JQuery实现楼层效果
博客专区 > ycYinG 的博客 > 博客详情
JQuery实现楼层效果
ycYinG 发表于10个月前
JQuery实现楼层效果
  • 发表于 10个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

####主要思想 对应楼层距离页面顶部的距离与页面滚动的距离相对应 ####jquery相关知识 $(obj).click(function(){ …… }) 点击事件 index() 获取元素对象在同辈元素中的索引值 offset() 获取元素对象距离页面的边距 position() 如果父元素有定位,距离父级元素的边距。若父元素没有定位,距离页面的边距 animate({要变化的样式(只能是变化的值)},执行的时间,执行的效果(线性等),动画执行完执行的函数) ####html实现代码

家用电器

手机、运营商、数码

电脑、办公

家居、家具、家装、厨具

男装、女装、童装、内衣

####css样式代码 .box { width: 1000px; margin: 0 auto; } .floor { height: 500px; background: #ddd; } ul { list-style: none; position: fixed; top: 100px; left: 0;} ul li { width: 50px; height: 50px;line-height: 50px; text-align: center; background: #ddd;border: 1px solid red;} ####jquery代码实现 $(function(){ $('.menu>li').click(function(){ //当点击li标签时 var index = $(this).index();//获取当前对象在同辈兄弟中的索引值 vat top = $('.floor').eq(index).offset().top;//获取li对应的楼层距离页面上边距 $('html,body').animate({//设置动画 scrollTop : top
},500); //500毫秒让页面滚动到相应位置 })
})

共有 人打赏支持
粉丝 0
博文 10
码字总数 4889
×
ycYinG
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: