Saber 酱的抱枕

<img src="/f/head15.jpg" id="stwRight">
<img src="/f/saber%E8%A1%A8%E6%83%85_1_1.jpg" id="stwCenter">
<img src="/f/x.png" id="swtClose">
<style type="text/css">
	#LRdiv0,#LRdiv1{display:none !important;}
	#stwRight{position: fixed;right: 0;top: 60px;display: none;z-index: 999;cursor: pointer;}
	#stwCenter{position: fixed;display: none;width: 400px;height: 350px;left: 50%;margin-left: -200px;top: 50%;margin-top: -175px;z-index: 999;cursor: pointer;}
	#swtClose{position: fixed;display: none;width: 24px;height: 24px;left: 50%;margin-left: 175px;top: 50%;margin-top: -175px;z-index: 9999;cursor: pointer;}
</style>
<script type="text/javascript">
	window.onload=function(){
		function showSwtC(){
			document.getElementById("stwCenter").style.display="block";
			document.getElementById("swtClose").style.display="block";
		}
		function showSwtR(){
			document.getElementById("stwRight").style.display="block";
		}
		function hideSwtC(){
			document.getElementById("stwCenter").style.display="none";
			document.getElementById("swtClose").style.display="none";
		}
		function hideSwtR(){
			document.getElementById("stwRight").style.display="none";
		}
		function openSwt(){
			LR_HideInvite();openZoosUrl();return false;
		}

		showSwtR();
		setTimeout(function(){
			hideSwtR();
			showSwtC();
		},4000);
		document.getElementById("stwRight").onclick=function(){
			openSwt();
		}
		document.getElementById("stwCenter").onclick=function(){
			hideSwtC();
			showSwtR();
			openSwt();
			setTimeout(function(){
				hideSwtR();
				showSwtC();
			},8000);
		}
		document.getElementById("swtClose").onclick=function(){
			hideSwtC();
			showSwtR();
			setTimeout(function(){
				hideSwtR();
				showSwtC();
			},8000);
		}
	}
</script>

侧边浮窗没做关闭按钮。

因为openSwt()里用了商务通自带的函数openZoosUrl()，所以页面上还是得加载商务通代码。如果把openSwt()改成直接用网址跳转，则不用加载商务通代码。

上面商务通不仅样式是我们自己做的，显示、隐藏的逻辑也需要自己定义。实际上对于有商务通代码的页面，我们可以直接利用商务通自身的函数来“偷梁换柱”，打开我们自己的商务通图片。

var sTimer = setInterval(function(){
	if(typeof LR_showInviteDiv != "undefined"){
		window.LR_showInviteDiv = function(){	//此处改写了商务通显示邀请框的函数	
			showSwt();
		}
		clearInterval(sTimer);
	}
},100);

LR_showInviteDiv是显示邀请框的函数，如果页面上有这个函数，则改写它，让它执行showSwt，也就是我们自己定义的一个函数，显示自己的邀请框。

恩……我对这这个代码研究了好久，发现这个办法并没有多方便，浪费时间。唯一的优点是不用写css来隐藏商务通的邀请框了。另外改写商务通的这个函数会导致商务通客户端发送邀请失败。麻烦。

简单的仿一下商务通效果

<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无缝滚动一例