jQuery實現(xiàn)點擊按鈕滾動元素功能詳解
更新時間:2023年06月30日 10:43:09 作者:Skywang
這篇文章主要為大家介紹了jQuery實現(xiàn)點擊按鈕滾動元素功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
jQuery實現(xiàn)點擊按鈕滾動元素
最近做項目做到一個功能是用左右按鈕取代進度條滾動,網(wǎng)上沒有類似的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實現(xiàn)點擊按鈕滾動元素功能詳解的詳細(xì)內(nèi)容,更多關(guān)于jQuery點擊按鈕滾動元素的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
jQuery的Ajax接收java返回數(shù)據(jù)方法
今天小編就為大家分享一篇jQuery的Ajax接收java返回數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08js中獲取 table節(jié)點各tr及td的內(nèi)容簡單實例
下面小編就為大家?guī)硪黄猨s中獲取 table節(jié)點各tr及td的內(nèi)容簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10