自己使用jquery寫(xiě)的一個(gè)無(wú)縫滾動(dòng)的插件
更新時(shí)間:2014年04月30日 16:47:28 作者:
這篇文章主要介紹的是自己使用jquery寫(xiě)的一個(gè)無(wú)縫滾動(dòng)的插件,個(gè)人感覺(jué)還不錯(cuò),需要的朋友可以參考下
效果圖:
html代碼:
<h1>無(wú)縫滾動(dòng),向右滾動(dòng)</h1>
<ul id="guoul1">
<li><img src="img/f1.jpg" alt="f1"/></li>
<li><img src="img/f2.jpg" alt="f2"/></li>
<li><img src="img/f3.jpg" alt="f3"/></li>
<li><img src="img/f4.jpg" alt="f4"/></li>
<li><img src="img/f5.jpg" alt="f5"/></li>
<li><img src="img/f6.jpg" alt="f6"/></li>
<li><img src="img/f7.jpg" alt="f7"/></li>
</ul>
<h1>無(wú)縫滾動(dòng),向左滾動(dòng)</h1>
<ul id="guoul2">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>無(wú)縫滾動(dòng),向上滾動(dòng)</h1>
<ul id="guoul3">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>無(wú)縫滾動(dòng),向下滾動(dòng)</h1>
<ul id="guoul4">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>無(wú)縫滾動(dòng),非ul,li標(biāo)簽組合,向右滾動(dòng)</h1>
<div id="guoul5">
<p>111111111111</p>
<p>222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
<p>5555555555555</p>
<p>6666666666666</p>
<p>7777777777777</p>
<p>8888888888888</p>
<p>9999999999999</p>
</div>
<h1>不動(dòng)</h1>
<ul id="guoul6">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
css代碼:
ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}
ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}
li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: Gray; color: Yellow; margin-left:10px;}
#guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}
#guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}
js插件代碼:
; (function ($) {
var defaults = {
dir: "left", //none:不動(dòng),up:上,right:右,down:下,right:左
delay: 30,//執(zhí)行時(shí)間
};
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, defaults, opt);
//全局變量區(qū)域
var obj = $(this); //當(dāng)前對(duì)象
obj.css({ "overflow": "hidden" }); //初始化元素
if (opt.dir == "none") return;
var objLis = obj.children(); //對(duì)象中的子元素
objLis.css({ "overflow": "hidden" });
var objSize = 0; //外框尺寸
var scrollEvent = "scrollLeft"; //滾動(dòng)條的滾動(dòng)方向
var liTotalSize = 0, liTotalSizeOther = 0; //每個(gè)li元素的尺寸(寬或者高),克隆之后的總尺寸
var scrollSize = 0, //滾動(dòng)條的實(shí)際距離
scrollSizeMax = 0, //滾動(dòng)條的最大距離
scrollSizeMin = 0; //滾動(dòng)條的最小距離
var interval = ""; //記錄setInterval
if (opt.dir == "up" || opt.dir == "down") {//上下
objSize = obj.innerHeight();
scrollEvent = "scrollTop";
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize);
}
else if (opt.dir == "left" || opt.dir == "right") {//左右
objSize = obj.innerWidth();
scrollEvent = "scrollLeft";
obj.css({ "padding-left": 0, "padding-right": 0 }).width(objSize);
}
else {
alert("你的dir參數(shù)有誤");
}
var getChildTotalSize = function (dir) {// 定義獲取li總尺寸的方法
if (dir == "left" || dir == "right") {
objLis.css("float", "left");
return function () {
objLis.each(function () {
liTotalSize += $(this).outerWidth(true);
});
}
}
else if (dir == "up" || dir == "down") {
objLis.css("float", "none");
return function () {
objLis.each(function () {
liTotalSize += $(this).outerHeight(true);
});
}
}
} (opt.dir);
getChildTotalSize(); //獲得所有的li的總尺寸,在方法中賦值
(function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //賦值子元素多少遍
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串
for (var i = 0; i < cloneCount; i++) {
cloneHtmlNow += cloneHtmlStart;
}
obj.append(cloneHtmlNow);
liTotalSizeOther = (cloneCount + 1) * liTotalSize; //獲取添加了子元素之后的長(zhǎng)度
})();
if (opt.dir == "left" || opt.dir == "right") {
obj.css({ "position": "relative", "z-index": 0 });
obj.children().css({ "position": "absolute", "z-index": 1 });
var left = 0;
obj.children().each(function () {
$(this).css({ "left": left + "px", "top": 0 });
left += $(this).outerWidth(true);
});
}
//滾動(dòng)條的滾動(dòng)方法
function scrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0);
scrollChange = function () {
scrollSize++;
if (scrollSize >= liTotalSize) scrollSize = 0;
obj[scrollEvent](scrollSize);
}
}
else if (dir == "right" || dir == "down") {
scrollSizeMax = liTotalSizeOther - objSize;
obj[scrollEvent](scrollSizeMax);
scrollSize = scrollSizeMax;
scrollSizeMin = scrollSizeMax - liTotalSize;
scrollChange = function () {
scrollSize--;
if (scrollSize <= scrollSizeMin) scrollSize = scrollSizeMax;
obj[scrollEvent](scrollSize);
}
}
};
scrollChange(opt.dir);
interval = setInterval(scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(interval);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
});
}
})(jQuery);
插件的調(diào)用:
$(function () {
$("#guoul1").gysContentDisplay({ dir: "right" });
$("#guoul2").gysContentDisplay({ dir: "left" });
$("#guoul3").gysContentDisplay({ dir: "up" });
$("#guoul4").gysContentDisplay({ dir: "down" });
$("#guoul5").gysContentDisplay({ dir: "right" });
$("#guoul6").gysContentDisplay({ dir: "none" });
})

html代碼:
復(fù)制代碼 代碼如下:
<h1>無(wú)縫滾動(dòng),向右滾動(dòng)</h1>
<ul id="guoul1">
<li><img src="img/f1.jpg" alt="f1"/></li>
<li><img src="img/f2.jpg" alt="f2"/></li>
<li><img src="img/f3.jpg" alt="f3"/></li>
<li><img src="img/f4.jpg" alt="f4"/></li>
<li><img src="img/f5.jpg" alt="f5"/></li>
<li><img src="img/f6.jpg" alt="f6"/></li>
<li><img src="img/f7.jpg" alt="f7"/></li>
</ul>
<h1>無(wú)縫滾動(dòng),向左滾動(dòng)</h1>
<ul id="guoul2">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>無(wú)縫滾動(dòng),向上滾動(dòng)</h1>
<ul id="guoul3">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>無(wú)縫滾動(dòng),向下滾動(dòng)</h1>
<ul id="guoul4">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<h1>無(wú)縫滾動(dòng),非ul,li標(biāo)簽組合,向右滾動(dòng)</h1>
<div id="guoul5">
<p>111111111111</p>
<p>222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
<p>5555555555555</p>
<p>6666666666666</p>
<p>7777777777777</p>
<p>8888888888888</p>
<p>9999999999999</p>
</div>
<h1>不動(dòng)</h1>
<ul id="guoul6">
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
css代碼:
復(fù)制代碼 代碼如下:
ul, li,h1 { margin: 0; padding: 0; list-style-type:none;}
ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;}
li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: Gray; color: Yellow; margin-left:10px;}
#guoul1{ width:1000px; height:188px;margin: 0; padding: 0;}
#guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;}
js插件代碼:
復(fù)制代碼 代碼如下:
; (function ($) {
var defaults = {
dir: "left", //none:不動(dòng),up:上,right:右,down:下,right:左
delay: 30,//執(zhí)行時(shí)間
};
$.fn.gysContentDisplay = function (opt) {
opt = $.extend({}, defaults, opt);
//全局變量區(qū)域
var obj = $(this); //當(dāng)前對(duì)象
obj.css({ "overflow": "hidden" }); //初始化元素
if (opt.dir == "none") return;
var objLis = obj.children(); //對(duì)象中的子元素
objLis.css({ "overflow": "hidden" });
var objSize = 0; //外框尺寸
var scrollEvent = "scrollLeft"; //滾動(dòng)條的滾動(dòng)方向
var liTotalSize = 0, liTotalSizeOther = 0; //每個(gè)li元素的尺寸(寬或者高),克隆之后的總尺寸
var scrollSize = 0, //滾動(dòng)條的實(shí)際距離
scrollSizeMax = 0, //滾動(dòng)條的最大距離
scrollSizeMin = 0; //滾動(dòng)條的最小距離
var interval = ""; //記錄setInterval
if (opt.dir == "up" || opt.dir == "down") {//上下
objSize = obj.innerHeight();
scrollEvent = "scrollTop";
obj.css({ "padding-top": 0, "padding-bottom": 0 }).height(objSize);
}
else if (opt.dir == "left" || opt.dir == "right") {//左右
objSize = obj.innerWidth();
scrollEvent = "scrollLeft";
obj.css({ "padding-left": 0, "padding-right": 0 }).width(objSize);
}
else {
alert("你的dir參數(shù)有誤");
}
var getChildTotalSize = function (dir) {// 定義獲取li總尺寸的方法
if (dir == "left" || dir == "right") {
objLis.css("float", "left");
return function () {
objLis.each(function () {
liTotalSize += $(this).outerWidth(true);
});
}
}
else if (dir == "up" || dir == "down") {
objLis.css("float", "none");
return function () {
objLis.each(function () {
liTotalSize += $(this).outerHeight(true);
});
}
}
} (opt.dir);
getChildTotalSize(); //獲得所有的li的總尺寸,在方法中賦值
(function () {
var cloneCount = Math.ceil(objSize * 2 / liTotalSize); //賦值子元素多少遍
var cloneHtmlNow = "", cloneHtmlStart = obj.html(); //原始的子元素字符串
for (var i = 0; i < cloneCount; i++) {
cloneHtmlNow += cloneHtmlStart;
}
obj.append(cloneHtmlNow);
liTotalSizeOther = (cloneCount + 1) * liTotalSize; //獲取添加了子元素之后的長(zhǎng)度
})();
if (opt.dir == "left" || opt.dir == "right") {
obj.css({ "position": "relative", "z-index": 0 });
obj.children().css({ "position": "absolute", "z-index": 1 });
var left = 0;
obj.children().each(function () {
$(this).css({ "left": left + "px", "top": 0 });
left += $(this).outerWidth(true);
});
}
//滾動(dòng)條的滾動(dòng)方法
function scrollChange(dir) {
if (dir == "left" || dir == "up") {
obj[scrollEvent](0);
scrollChange = function () {
scrollSize++;
if (scrollSize >= liTotalSize) scrollSize = 0;
obj[scrollEvent](scrollSize);
}
}
else if (dir == "right" || dir == "down") {
scrollSizeMax = liTotalSizeOther - objSize;
obj[scrollEvent](scrollSizeMax);
scrollSize = scrollSizeMax;
scrollSizeMin = scrollSizeMax - liTotalSize;
scrollChange = function () {
scrollSize--;
if (scrollSize <= scrollSizeMin) scrollSize = scrollSizeMax;
obj[scrollEvent](scrollSize);
}
}
};
scrollChange(opt.dir);
interval = setInterval(scrollChange, opt.delay);
obj.children().on("mouseover", function () {
clearInterval(interval);
}).on("mouseleave", function () {
interval = setInterval(scrollChange, opt.delay);
});
}
})(jQuery);
插件的調(diào)用:
復(fù)制代碼 代碼如下:
$(function () {
$("#guoul1").gysContentDisplay({ dir: "right" });
$("#guoul2").gysContentDisplay({ dir: "left" });
$("#guoul3").gysContentDisplay({ dir: "up" });
$("#guoul4").gysContentDisplay({ dir: "down" });
$("#guoul5").gysContentDisplay({ dir: "right" });
$("#guoul6").gysContentDisplay({ dir: "none" });
})
您可能感興趣的文章:
- jQuery模擬Marquee實(shí)現(xiàn)無(wú)縫滾動(dòng)效果完整實(shí)例
- JQuery插件Marquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
- jQuery插件scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
- jquery實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫滾動(dòng)
- jquery xMarquee實(shí)現(xiàn)文字水平無(wú)縫滾動(dòng)效果
- jquery 文本上下無(wú)縫滾動(dòng),鼠標(biāo)放上去就停止 小例子
- 基于jQuery的圖片左右無(wú)縫滾動(dòng)插件
- jcarousellite.js 基于Jquery的圖片無(wú)縫滾動(dòng)插件
- jquery簡(jiǎn)單實(shí)現(xiàn)縱向的無(wú)縫滾動(dòng)代碼實(shí)例
相關(guān)文章
使用jquery自定義鼠標(biāo)樣式滿(mǎn)足個(gè)性需求
瀏覽器是有自帶的鼠標(biāo)樣式的,如果某些時(shí)候?yàn)榱吮3质髽?biāo)樣式的統(tǒng)一,或者想指定特定的鼠標(biāo)樣式該怎么辦呢?那就要使用自定義了,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以參考下2013-11-11ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例
這篇文章主要介紹了ajax與json 獲取數(shù)據(jù)并在前臺(tái)使用簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-0120個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案
本篇文章給大家分享了20個(gè)最常見(jiàn)的jQuery面試問(wèn)題及答案,對(duì)此有需要的朋友可以參考下。2018-05-05使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)實(shí)例
下面小編就為大家?guī)?lái)一篇使用jquery實(shí)現(xiàn)的循環(huán)連續(xù)可停頓滾動(dòng)實(shí)例。2016-11-11easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法
下面小編就為大家?guī)?lái)一篇easyui datagrid 表格中操作欄 按鈕圖標(biāo)不顯示的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07javascript向后臺(tái)傳送相同屬性的參數(shù)即數(shù)組參數(shù)
在傳送參數(shù)時(shí),經(jīng)常會(huì)碰到向后臺(tái)傳送一些相同屬性的參數(shù),最好的選擇是采用數(shù)組的方式,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-02-02