Saber 酱的抱枕

<div id="demo">
	<div class="scrollbox">
		<div id="demo1">
			<a href="">雪见雪见雪见雪见雪见雪见</a>
			<a href="">sabersabersabersaber</a>
		</div>
		<div id="demo2"></div>
	</div>
</div>
<style type="text/css">
	#demo{width: 300px;overflow:hidden;} /*最外层box的宽度可以随意设置，但必须小于里面demo(如demo1)的宽度，否则滚动完一次会停止*/
	#demo .scrollbox{width:1000%;}/*设置一个较大的范围，保证其宽度大于内部两个div宽度之和（如果宽度不够两个div就会错开）*/
	#demo1,#demo2{display: inline-block;}/*浮动或设置display以保持在同一行*/
</style>
<script type="text/javascript">
	var demo = document.getElementById("demo");
	var demo1 = document.getElementById("demo1");
	var demo2 = document.getElementById("demo2");
	demo2.innerHTML=document.getElementById("demo1").innerHTML;
	function Marquee(){
		if(demo.scrollLeft-demo2.offsetWidth>=0){
			demo.scrollLeft-=demo1.offsetWidth;
		}
		else{
			demo.scrollLeft++;
		}
	}
	var myvar=setInterval(Marquee,30);
	demo.onmouseout=function (){myvar=setInterval(Marquee,30);}
	demo.onmouseover=function(){clearInterval(myvar);}
</script>

我解释下dom结构:
id#demo是最外层，设置滚动区域的宽高。此代码中它的宽度需要比滚动内容的宽度小。
class.scrollbox是容纳两个滚动容器的，它的宽度需要设置得比较宽，以保证能容纳两个滚动内容。
id#demo1和#demo2就是滚动内容了，通过设置浮动或display让他们保持在同一行，循环滚动。

示例中给出的css样式都是基础的必须样式，如果需要其他样式请自行添加。

JavaScript无缝滚动一例

今天用js做了个元素移动的效果，支持水平、垂直方向上的单次移动和来回移动，支持斜向运动（斜向运动时自带反弹效果 哈哈）。

假设这个元素是我们想要移动的：

<img id="moveE" src="http://www.saber.我爱你/wp-content/uploads/2014/07/1_b.gif">

它可以是图片，也可以是其他元素。可以定义css样式，这个没关系。

js代码如下：

function move_on(element,far,to,cishu,time) {
	var add=(to%2==1)?true:false;
	var num=(to<3)?((element.style.marginLeft==="")?0:parseInt(element.style.marginLeft)):((element.style.marginTop==="")?0:parseInt(element.style.marginTop));
	var max=(to%2==1)?(num+far):num;
	var min=(to%2==1)?num:(num+far);
	var time=setInterval(function  () {
	    if(add){
	        num++;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num>=max){
	            add=false;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }else{
	        num--;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num<=min){
	            add=true;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }
	},time);
}

（代码挺短的吧~三元操作符真是个好东西啊

参数解释：

要移动的元素、移动多少像素、移动类型、移动次数、定时器执行间隔时间（毫秒）
移动类型规定如下：
1 左右来回移动，起始点是从左向右
2 左右来回移动，起始点是从右向左
3 上下来回移动，起始点是从上向下
4 上下来回移动，起始点是从下向上
移动次数定义如下：
为0时为无限制来回移动，否则定义为多少则移动多少次。注意，一次单向运动算1次，一次来回运动算2次。

可能看的有点迷，没关系，接下来我一个个上例子。
Read More →

js做的元素不间断来回移动的效果