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