js 无缝滚动效果学习
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动测试</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../dist/zepto.js"></script>
</head>
<body>
<style type="text/css">
#ScrollContainer{
overflow: hidden;
width: 500px;
}
#Container{
float: left;
width: 800%;
}
#detail{
float: left;
}
#detailview{
float: left;
}
</style>
<div id="ScrollContainer">
<div id="Container">
<div id="detail">
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="http://www.codefans.net//jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
<div id="detailview"></div>
</div>
</div>
<script>
(function(Scroll,Container,detail){
//nowmyMarquee.run();
})("ScrollContainer","Container","detail")
function myMarquee(Scroll,Container,detail){
console.log(this);
var that=this;
this.speed=10;
this.tabScroll=document.getElementById(Scroll);
this.tabdetail=document.getElementById(detail);
this.tabdetailView=document.getElementById(detail+'view');
this.tabdetailView.innerHTML=this.tabdetail.innerHTML;
this.Marquee=function(){
if(this.tabdetailView.offsetWidth-this.tabScroll.scrollLeft<=0)
{
//一轮滚动结束需要充值
this.tabScroll.scrollLeft-=this.tabdetail.offsetWidth;
}
else
{
this.tabScroll.scrollLeft++;
};
};
this.tabdetail.onmouseover=function(){
clearInterval(that.MyMar)
};
this.tabdetail.onmouseout=function(){
that.MyMar=setInterval(
function(){ that.Marquee.apply(that)}
, that.speed);
}
this.run=function(){
this.MyMar=setInterval(
function(){ that.Marquee.apply(that)}
, that.speed);
}
this.run();
}
var nowmyMarquee=new myMarquee("ScrollContainer","Container","detail")
</script>
</body>
</html>
offsetWidth 和 scrollLeft 的应用 和子容器800%与父容器的使用
参考 http://blog.csdn.net/xuantian868/article/details/3116442
obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。
3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.
scrollLeft 主要用来定位子容器在父容器中的定位，控制子容器的位置
test
