jquery簡單實(shí)現(xiàn)縱向的無縫滾動(dòng)代碼實(shí)例
更新時(shí)間：2019年04月01日 15:21:59 作者：songywaa
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)縱向的無縫滾動(dòng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
簡單實(shí)現(xiàn)縱向無縫滾動(dòng)（不要忘記引入jquery文件哦）
看效果：
1、HTML代碼
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>簡單的jQuery無縫向上滾動(dòng)效果</title> </head> <body> <div class="myscroll"> <ul> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> <li><a href="">簡單的jQuery無縫向上滾動(dòng)效果</a></li> </ul> </div> </body> </html>
2、css代碼
<style>
* { margin: 0; padding: 0;list-style:none;}
.myscroll {
width: 300px;
height: 260px;
margin: 0 auto;
line-height: 26px;
font-size: 12px;
overflow: hidden;
border:2px solid orange;
}
.myscroll li {
height: 26px;
padding:0 10px;
font-size:14px;
}
.myscroll a {
color: #333;
text-decoration: none;
}
.myscroll a:hover {
color: orange;
text-decoration: underline;
}
</style>
3、js代碼
(function($){
$.fn.myScroll = function(options){
//默認(rèn)配置
var defaults = {
speed:40, //滾動(dòng)速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),
intId = [];
function marquee(obj, step){
obj.find("ul").animate({//html中必須有的ul
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));//截取ul中的第一個(gè)li,添加到ul的最后
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var rowHeight = opts["rowHeight"],
speed = opts["speed"],
_this = $(this);//這里的_this指向div.myscroll
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){//當(dāng)ul的高度小于html中，div.myscroll的高度，則結(jié)束定時(shí)器
clearInterval(intId[i]);
}else{
marquee(_this, rowHeight);
}
}, speed);
_this.hover(function(){//鼠標(biāo)移動(dòng)到div.myscroll上時(shí)，結(jié)束定時(shí)器
clearInterval(intId[i]);
},function(){//鼠標(biāo)離開div.myscroll容器，判斷ul的高度若小于等于div.myscroll高度，則結(jié)束定時(shí)器（不滾動(dòng)），否則調(diào)用marquee函數(shù)
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, rowHeight);
}
}, speed);
});
});
}
})(jQuery);
4、調(diào)用
$(function(){
$('.myscroll').myScroll({
speed: 40, //數(shù)值越大，速度越慢
rowHeight: 26 //li的高度
});
});
以上所述是小編給大家介紹的jquery簡單實(shí)現(xiàn)縱向的無縫滾動(dòng)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)判斷滾動(dòng)條滾動(dòng)到document底部的方法分析
- JavaScript實(shí)現(xiàn)的滾動(dòng)公告特效【基于jQuery】
- JQuery獲取元素尺寸、位置及頁面滾動(dòng)事件應(yīng)用示例
- Easyui 去除jquery-easui tab頁div自帶滾動(dòng)條的方法
- Jquery實(shí)現(xiàn)無縫向上循環(huán)滾動(dòng)列表的特效
- jQuery實(shí)現(xiàn)當(dāng)拉動(dòng)滾動(dòng)條到底部加載數(shù)據(jù)的方法分析
- jQuery實(shí)現(xiàn)的簡單歌詞滾動(dòng)功能示例
- 利用jquery和BootStrap實(shí)現(xiàn)動(dòng)態(tài)滾動(dòng)條效果
- jquery彈窗時(shí)禁止body滾動(dòng)條滾動(dòng)的例子
相關(guān)文章
加載列表時(shí)jquery獲取ul中第一個(gè)li的屬性
通過jquery獲取ul中第一個(gè)li的屬性，當(dāng)加載列表時(shí)，默認(rèn)希望選中第一條，下面是具體的實(shí)現(xiàn)代碼2014-11-11
使用jQuery fancybox插件打造一個(gè)實(shí)用的數(shù)據(jù)傳輸模態(tài)彈出窗體
模態(tài)窗體已經(jīng)成為Web開發(fā)人員設(shè)計(jì)界面時(shí)經(jīng)常要使用的傳輸數(shù)據(jù)的方式;通過模態(tài)窗口，可以提高網(wǎng)站的可用性;你可以在你的郵件里收到用戶發(fā)送的反饋消息2013-01-01
有bug..點(diǎn)到后面的圖片后,再返回 ..... 問題出現(xiàn)了...2008-01-01
jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法實(shí)例分析
這篇文章主要介紹了jquery動(dòng)態(tài)導(dǎo)航插件dynamicNav用法,較為詳細(xì)的分析了jquery導(dǎo)航插件的原理及具體使用方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺(tái)權(quán)限添加的效果
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺(tái)權(quán)限添加的效果，需要的朋友可以參考下。2011-05-05
兼容主流瀏覽器的jQuery+CSS 實(shí)現(xiàn)遮罩層的簡單代碼
比起使用注冊頁和登陸頁，網(wǎng)站在當(dāng)前頁使用遮罩層注冊和登陸的用戶體驗(yàn)要好不少。這里使用jQuery和CSS實(shí)現(xiàn)一個(gè)簡單的遮罩效果。2014-10-10
百度搜索自動(dòng)聯(lián)想提示效果，想必大家都有見到過吧，下面本文也為大家也是一個(gè)高仿的類似效果2014-05-05
jQury Ajax使用Token驗(yàn)證身份實(shí)例代碼
這篇文章主要介紹了jQury Ajax使用Token驗(yàn)證身份實(shí)例代碼,需要的朋友可以參考下2017-09-09
JqueryUI作為一個(gè)優(yōu)秀的前端庫，在項(xiàng)目中經(jīng)常會(huì)用到，下面小編抽點(diǎn)時(shí)間給大家介紹jQueryUI中的datepicker使用方法詳解，一起看看吧2016-05-05
jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能完整實(shí)例
這篇文章主要介紹了jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)鼠標(biāo)響應(yīng)及頁面元素屬性變換的相關(guān)技巧,需要的朋友可以參考下2015-10-10