jQuery实现点击按钮滚动元素功能详解
更新时间:2023年06月30日 10:43:09 作者:Skywang
这篇文章主要为大家介绍了jQuery实现点击按钮滚动元素功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
jQuery实现点击按钮滚动元素
最近做项目做到一个功能是用左右按钮取代进度条滚动,网上没有类似的dome就自己写了一个,挺简单不难,废话不多说直接上代码;
html
// 首先这是一个固定尺寸的视口div <div class="scroll_part" style="position: relative;"> // 这是左按钮 <div id="goLeftBtn" class="btn sc_left" style="position: absolute;z-index: 10;"> <div class=""> <img src="img/sc_left.png" /> </div> </div> // 这是右按钮 <div id="goRightBtn" class="btn sc_right" style="position: absolute;z-index: 10;"> <div class=""> <img src="img/sc_right.png" /> </div> </div> // 这里是可以滚动的元素 <div class="content_sc"> <div id="" class="sc_box" style="position: relative;"> <img class="sc_img" style="" src="img/programme.png" /> <div class="dot" style="">//这个是一个动画特效可以不用管 <div class="dot2 "> <div class="dot3"></div> </div> </div> </div> </div> </div>
效果图
css部分很简单 就不贴出来了
js部分
// 滚动效果 // 这里主要用到的方法就是$().scrollLeft(); var count = 1; var goWight = 100; $("#goLeftBtn").click(function() { if(count == 0) { $('.content_sc').scrollLeft(0); count = 0; } else { count--; $('.content_sc').scrollLeft(count * goWight); } console.log("count" + count); var aaa = $(".sc_box") console.log("offsetWidth" + aaa.offsetWidth); }) $("#goRightBtn").click(function() { if(count == 0) { $('.content_sc').scrollLeft(goWight); } else { $('.content_sc').scrollLeft(count * goWight); } console.log("count" + count); var aaa = $(".content_sc")[0].offsetWidth var bbb = $(".sc_box")[0].offsetWidth if((aaa + count * goWight) > bbb) { return; } count++; }) });
代码很简单,以上就是jQuery实现点击按钮滚动元素功能详解的详细内容,更多关于jQuery点击按钮滚动元素的资料请关注脚本之家其它相关文章!
相关文章
jquery和javascript中如何将一元素的内容赋给另一元素
将一元素的内容赋给另一元素,在某些情况下还是比较实用的,下面为大家讲解下jquery和javascript中是如何实现的2014-01-01jquery弹出框插件jquery.ui.dialog用法分析
这篇文章主要介绍了jquery弹出框插件jquery.ui.dialog用法,结合实例形式分析了弹出框插件jquery.ui.dialog的功能、下载、使用方法与相关注意事项,需要的朋友可以参考下2016-08-08基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验。2011-05-05
最新评论