欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生javascript實(shí)現(xiàn)無間縫滾動(dòng)示例

 更新時(shí)間：2014年01月28日 16:12:54   作者：  
原生javascript無間縫滾動(dòng)目前支持的是豎向與橫向滾動(dòng)，下面有個(gè)不錯(cuò)的示例，大家可以參考下
目前支持的是豎向與橫向滾動(dòng)

http://lgyweb.com/marScroll/

現(xiàn)在分析下無間縫實(shí)現(xiàn)的基本思路（豎向例子）：

HTML結(jié)構(gòu)：
復(fù)制代碼 代碼如下:

<div id="marScroll">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>

CSS：
復(fù)制代碼 代碼如下:



<style type="text/css">
ul,li{padding: 0;margin: 0;}
#marScroll{height: 60px;overflow: hidden;}
#marScroll li{height: 20px;line-height: 20px;font-size: 14px;}
</style>



（1）首先需要判斷里面的內(nèi)容高度ul結(jié)構(gòu)是否高于外層div#marScrolll，則才進(jìn)行無間縫滾動(dòng)：
復(fù)制代碼 代碼如下:

// 寫在匿名函數(shù)里面，防止全局變量污染
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0];
// 內(nèi)容少，則直接退出此函數(shù)
if(oUl.offsetHeight<target.offsetHeight) return;
})();

（2）無間縫就是內(nèi)容的無限滾動(dòng)展示，那么先需要復(fù)制里面的內(nèi)容，然后通過外層的scrollTop++屬性，用setInterval 函數(shù)進(jìn)行循環(huán)執(zhí)行
復(fù)制代碼 代碼如下:

target.innerHTML += target.innerHTML;
/* 判斷每次滾動(dòng)的距離等于第一個(gè)ul的高度時(shí)，設(shè)置scrollTop為0，然后如此的循環(huán)操作就是無間滾動(dòng)了
---------------------------------------------------------------------------------------------*/
// 把功能函數(shù)抽離出來，方便調(diào)用
var fn = function(){
if(target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop++;
}
}
// setInterval 循環(huán)
var timer = setInterval(function(){
fn();
},30);

（3）鼠標(biāo)經(jīng)過此內(nèi)容塊時(shí)，就停止?jié)L動(dòng)
復(fù)制代碼 代碼如下:

// hover
target.onmouseover = function(){
clearTimeout(timer);
}
target.onmouseout = function(){
timer = setInterval(function(){
fn();
},30);
}

例子JS總代碼：
復(fù)制代碼 代碼如下:

// 寫在匿名函數(shù)里面，防止全局變量污染
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0],
oUl_h = oUl.offsetHeight;
// 內(nèi)容少，則直接退出此函數(shù)
if(oUl_h<target.offsetHeight) return;

target.innerHTML += target.innerHTML;

/* 判斷每次滾動(dòng)的距離等于第一個(gè)ul的高度時(shí)，設(shè)置scrollTop為0，然后如此的循環(huán)操作就是無間滾動(dòng)了
---------------------------------------------------------------------------------------------*/
// 把功能函數(shù)抽離出來，方便調(diào)用
var fn = function(){
if(target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop++;
}
}
// setInterval 循環(huán)
var timer = setInterval(function(){
fn();
},30);
// hover
target.onmouseover = function(){
clearTimeout(timer);
}
target.onmouseout = function(){
timer = setInterval(function(){
fn();
},30);
}
})();

已經(jīng)完成了個(gè)簡單的豎向無間縫，為了滿足更多的需求，建議封裝成可以，豎向，橫向，多次調(diào)用的函數(shù)。

以下是個(gè)人的封裝，線上例子：

http://lgyweb.com/marScroll/
復(fù)制代碼 代碼如下:

function GyMarquee(opt){
this.opt = opt;
if(!document.getElementById(this.opt.targetID)) return;
this.target = document.getElementById(this.opt.targetID);
this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical';
this.effect = this.opt.effect == 'scroll'?'scroll':'marque';
this.scrollHeight = this.opt.scrollHeight;
this.init();
}
GyMarquee.prototype = {
marquee:function(){
var _that = this,
direction = 'scrollTop',
judge = this.target.scrollHeight,
timer = null;
if(this.dir == 'crosswise'){
direction = 'scrollLeft';
judge = this.itemLen*this.opt.itemWidth;
this.targetChild.style.width = this.itemLen*this.opt.itemWidth*2 + 'px';
}
var doFn = function(){
if(_that.target[direction] == judge){
_that.target[direction] = 0;
}
_that.target[direction]++;
}
timer = setInterval(function(){
doFn();
},38);
this.target.onmouseover = function(){
if(timer) clearTimeout(timer);
}
this.target.onmouseout = function(){
timer = setInterval(function(){
doFn();
},38);
}
},
scrollDo:function(){
var can = true,
_that = this;
this.target.onmouseover=function(){can=false};
this.target.onmouseout=function(){can=true};
new function (){
var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can;
if(!stop)_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop=0:_that.target.scrollTop++;
setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500);
};
},
getByClassName:function(className,parent){
var elem = [],
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
p = new RegExp("(^|\\s)"+className+"(\\s|$)");
for(var n=0,i=node.length;n<i;n++){
if(p.test(node[n].className)){
elem.push(node[n]);
}
}
return elem;
},
init:function(){
var val = 0;
if(this.dir =='crosswise'&&this.effect=='marque'&&this.opt.itemName!=''){
this.itemLen = this.target.getElementsByTagName(this.opt.itemName).length;
val = this.itemLen*this.opt.itemWidth;
}else{
val = this.target.scrollHeight;
}
var holderHTML = this.target.innerHTML;
this.target.innerHTML = '<div class="J_scrollInner">'+holderHTML+'</div>';
this.targetChild = this.getByClassName('J_scrollInner',this.target)[0];
var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth';
if(val>this.target[attr]){
if(this.effect == 'scroll'){
this.scrollDo();
}else{
this.marquee();
}
this.targetChild.innerHTML += this.targetChild.innerHTML;
}
}
}

相關(guān)文章

最新評(píng)論