发布于 2016-10-26 09:33:52 | 101 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程，程序狗速度看过来！

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

---

原生javascript无间缝滚动目前支持的是竖向与横向滚动，下面有个不错的示例，大家可以参考下
目前支持的是竖向与横向滚动

http://lgyweb.com/marScroll/

现在分析下无间缝实现的基本思路（竖向例子）：

HTML结构：

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

CSS：

 


<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）首先需要判断里面的内容高度ul结构是否高于外层div#marScrolll，则才进行无间缝滚动：

 
// 写在匿名函数里面，防止全局变量污染 
(function(){ 
var target = document.getElementById('marScroll'), 
oUl = target.getElementsByTagName('ul')[0]; 
// 内容少，则直接退出此函数 
if(oUl.offsetHeight<target.offsetHeight) return; 
})(); 

（2）无间缝就是内容的无限滚动展示，那么先需要复制里面的内容，然后通过外层的scrollTop++属性，用setInterval 函数进行循环执行

 
target.innerHTML += target.innerHTML; 
/* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了 
---------------------------------------------------------------------------------------------*/ 
// 把功能函数抽离出来，方便调用 
var fn = function(){ 
if(target.scrollTop == oUl_h){ 
target.scrollTop = 0; 
}else{ 
target.scrollTop++; 
} 
} 
// setInterval 循环 
var timer = setInterval(function(){ 
fn(); 
},30); 

（3）鼠标经过此内容块时，就停止滚动

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

例子JS总代码：

 
// 写在匿名函数里面，防止全局变量污染 
(function(){ 
var target = document.getElementById('marScroll'), 
oUl = target.getElementsByTagName('ul')[0], 
oUl_h = oUl.offsetHeight; 
// 内容少，则直接退出此函数 
if(oUl_h<target.offsetHeight) return; 

target.innerHTML += target.innerHTML; 

/* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了 
---------------------------------------------------------------------------------------------*/ 
// 把功能函数抽离出来，方便调用 
var fn = function(){ 
if(target.scrollTop == oUl_h){ 
target.scrollTop = 0; 
}else{ 
target.scrollTop++; 
} 
} 
// setInterval 循环 
var timer = setInterval(function(){ 
fn(); 
},30); 
// hover 
target.onmouseover = function(){ 
clearTimeout(timer); 
} 
target.onmouseout = function(){ 
timer = setInterval(function(){ 
fn(); 
},30); 
} 
})(); 

已经完成了个简单的竖向无间缝，为了满足更多的需求，建议封装成可以，竖向，横向，多次调用的函数。

以下是个人的封装，线上例子：

http://lgyweb.com/marScroll/

 
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; 
} 
} 
}