muiios标题栏上移

muiios标题栏上移,第1张

要将Muiios标题栏上移,需要在编辑器中进行一些简单的修改。Muiios是一个用来创建高端网站的软件,它可以帮助用户快速创建出优雅的网站,用来展示个人的技能、公司的产品或服务。Muiios的标题栏是网站的重要组成部分,它用来显示网站的名称、图标以及链接。

要将Muiios标题栏上移,首先需要在编辑器中找到标题栏的CSS代码,然后将其移动到网页布局中的想要的位置上。可以通过修改顶部margin属性的值来实现标题栏的上移,只需要将margin属性的值设置为负数即可,比如margin-top:-50px这样就可以将标题栏上移50像素。

另外,还可以通过调整标题栏的位置属性来上移标题栏。这里的位置属性一般有absolute和relative两种,如果想要标题栏上移,可以将其位置属性设置为relative,同时设置top属性的值为负数即可,比如top:-50px。

总之,通过修改CSS代码,就可以实现Muiios标题栏的上移。要记住,在修改CSS代码时,一定要谨慎 *** 作,以免破坏网站的布局,影响网站的整体效果。

上一个版本比较简陋,可以避免了window.innerHeight <document.body.clientHeight 的情况,but再去判断该高度并选择是否使用本功能是很不友好的事情,因此就将列表下拉的功能也放进来了,并且添加了双击头部或单击头部标题,返回到最顶部的功能。

var huitan = (function() {

var ht = {}

ht.init = function(dom) {

if (!support_touch_event()) return

var startX, startY, endX, endY, cou,

a = window.innerHeight,

b = document.body.clientHeight,

c = b - a,

d,

f = 0,

isUp = false,

isdownAfterUp = false,

container = dom || document.querySelector(".mui-content")

container.addEventListener('touchstart', function(e) {

e.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等

var touch = e.touches[0]//获取第一个触点

var x = touch.pageX//页面触点X坐标

var y = touch.pageY//页面触点Y坐标

//记录触点初始位置

startX = x

startY = y

cou = 0

})

container.addEventListener('touchmove', function(e) {

e.preventDefault()//阻止触摸时浏览器的缩放、滚动条滚动等

var touch = e.touches[0]//获取第一个触点

var x = touch.pageX//页面触点X坐标

var y = touch.pageY//页面触点Y坐标

endX = x

endY = y

d = Math.abs(y - startY)

if (++cou == 2) {

if (endY <startY) {

//上拉

isUp = true

} else {

if (isUp) {

isdownAfterUp = true

isUp = false

//console.log("isdownAfterUp")

}

}

}

if (d >50 &&d <180) {

//低版本安卓机拉伸有抖动现象,通过减少动画次数来规避

if ( /*mui.os.android &&*/ cou % 5 == 0) {

if (isUp) {

f += -d

} else {

if (isdownAfterUp) {

//下拉后上拉

f = d - Math.abs(f)

} else {

//刚开始就下拉

f = d

}

}

//console.log("moved:" + d)

//console.log("movef:" + f)

container.style.transition = "all 1s cubic-bezier(.1, .57, .1, 1)"

container.style.webkitTransition = "all 1s cubic-bezier(.1, .57, .1, 1)"

container.style.transform = "translate(0px, " + f + "px) translateZ(0px)"

container.style.webkitTransform = "translate(0px, " + f + "px) translateZ(0px)"

}

}

})

container.addEventListener('touchend', touchend)

container.addEventListener('touchcancel', touchend)

function touchend(e) {

e.preventDefault()

var ani = true

if (isUp) {

if (Math.abs(f) >c &&c >0) {

f = -c//偏移高度>窗口隐藏高度

} else {

ani = false

}

} else {

if (isdownAfterUp) {

f >0 ? f = 0 : null

} else {

f = 0

}

}

//console.log("f:" + f)

if (ani) {

container.style.transition = "all 300ms cubic-bezier(.1, .57, .1, 1)"

container.style.webkitTransition = "all 300ms cubic-bezier(.1, .57, .1, 1)"

container.style.transform = "translate(0px," + f + "px) translateZ(0px)"

container.style.webkitTransform = "translate(0px," + f + "px) translateZ(0px)"

}

}

function support_touch_event() {

return !!(('ontouchstart' in window) || window.DocumentTouch &&document instanceof DocumentTouch)

}

//双击回到顶部

document.querySelector('header').addEventListener('doubletap', toTop)

//单击回到顶部

document.querySelector(".mui-title").addEventListener('tap', toTop)

function toTop() {

var mf = Math.abs(f)

var tm = mf / 300 >5 ? mf / 300 - 5 : 1

tm *= 300//防止白屏

container.style.transition = "all " + tm + "ms cubic-bezier(.1, .57, .1, 1)"

container.style.webkitTransition = "all " + tm + "ms cubic-bezier(.1, .57, .1, 1)"

container.style.transform = "translate(0px,0px) translateZ(0px)"

container.style.webkitTransform = "translate(0px,0px) translateZ(0px)"

}

}

return ht

}())


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11860496.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存