jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素功能詳解
jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素
最近做項(xiàng)目做到一個(gè)功能是用左右按鈕取代進(jìn)度條滾動(dòng),網(wǎng)上沒有類似的dome就自己寫了一個(gè),挺簡(jiǎn)單不難,廢話不多說直接上代碼;
html
// 首先這是一個(gè)固定尺寸的視口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>
// 這里是可以滾動(dòng)的元素
<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="">//這個(gè)是一個(gè)動(dòng)畫特效可以不用管
<div class="dot2 ">
<div class="dot3"></div>
</div>
</div>
</div>
</div>
</div>效果圖

css部分很簡(jiǎn)單 就不貼出來了
js部分
// 滾動(dòng)效果
// 這里主要用到的方法就是$().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++;
})
});代碼很簡(jiǎn)單,以上就是jQuery實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)元素功能詳解的詳細(xì)內(nèi)容,更多關(guān)于jQuery點(diǎn)擊按鈕滾動(dòng)元素的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
讓你的CSS像Jquery一樣做篩選的實(shí)現(xiàn)方法
用Jquery去操作HTML元素很方便,能夠靈活自如的去查找。其實(shí)CSS也可以靈活方便的去查找篩選,以下用到的一些,整理了一下,還有很多有趣的用法,后續(xù)會(huì)繼續(xù)添加。2011-07-07
jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回?cái)?shù)據(jù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
js中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jquery中用jsonp實(shí)現(xiàn)搜索框功能
這篇文章主要為大家詳細(xì)介紹了jquery中用jsonp實(shí)現(xiàn)搜索框功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
最簡(jiǎn)單的jQuery程序 入門者學(xué)習(xí)
用jQuery寫的一個(gè)簡(jiǎn)單的程序,用于入門練習(xí),發(fā)給大家,希望初學(xué)者有用.2009-07-07
jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
在圖片加載前顯示一個(gè)加載標(biāo)志,當(dāng)圖片下載完畢后顯示圖片出來 可對(duì)圖片進(jìn)行是否自動(dòng)縮放功能2008-12-12

