jQuery实现点击按钮滚动元素功能详解
作者：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点击按钮滚动元素的资料请关注脚本之家其它相关文章！