散人笔记 » setTimeout

利用js的Math方法实现一种摇晃的鼠标跟随效果

kos — Mon, 30 Nov 2009 14:16:41 +0000

　　也许这个东西没什么实用价值，但好耍是肯定的，看看下面的效果



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body style="overflow:hidden">  <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> <p> </p> <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> <p> </p> <p><a href="http://www.uideas.cn/download/1.html">点击查看美女图片</a></p> </body> <script language="javascript" type="text/javascript">   var ns=document.getElementById&&!document.all;     var AD = document.getElementById("AD"); var shakeX = 0,shakeY = 0; var stantX = 0,stantY = 0; var ADX = 0,ADY = 0; var ADW = AD.offsetWidth/2; var ADH = AD.offsetHeight/2;    function Ouille(){    	x = Math.round(stantX += (shakeX += ((ADX-stantX-shakeX)*1)/10));    	y = Math.round(stantY += (shakeY += ((ADY-stantY-shakeY)*1)/10));      	AD.style.left = x-ADW;      	AD.style.top = y-ADH;     	setTimeout("Ouille()",5);        	}     	   function momouse(obj){      	ADX=ns? obj.clientX: event.clientX;     	ADY=ns? obj.clientY: event.clientY; }  document.onmousemove=momouse; Ouille(); </script> </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　其实在上面的代码中做点小手脚，你就可以看到不同的效果，也许你会用得着。
比如把
　　AD.style.left = x-ADW;
　　AD.style.top = y-ADH;
改成
　　AD.style.left = x;
　　AD.style.top = y;
或其它的，就可以用到其它地方了！

setTimeout实现缓慢移动和clearTimeout停止移动效果

kos — Mon, 16 Nov 2009 03:01:08 +0000

　　前面一篇文章实现了用其它方式代替滚动条的方法，能够更容易的美化页面，而那种方法有一个缺陷就是给人视觉上的反应不是很一目了然，每点击按钮触发一次事件后，就直接从一个位置滚动到另一个位置，看不到整个滚动过程
其实前面一篇文章对于正常的使用完全没有问题了，但为了让其更完美决定把此功能完善了一下
先看看下面的效果



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>无标题文档</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/menuscrollbak.css"> </head>  <body onLoad="setmenu()">  <div class="mainDiv">  <div id="menutop"> </div> <div id="cov">  <div id="menu">  <p class="contenttitle">快乐不快乐(郑秀文)</p> 	 <p>咖啡淡了</p> 	  <p>是因为冰块溶了</p> <p>没怎么了</p> <p>淡了就是淡了</p> <p>搁在桌上还要不要</p> <p>不再爱了</p> <p>是因为感情坏了</p> <p>你怎么了</p> <p>坏了就是坏了</p> <p>没有什么大不了</p> <p>我们不快乐</p> <p>快乐后不再快乐</p> <p>就在最后的一秒</p> <p>抱了吻了哭了</p> <p>快乐不快乐</p> <p>没人快不快乐</p> <p>就在最后的一秒</p> <p> </p> <p>我们的关系就这样了</p> <p>咖啡淡了</p> <p>是因为冰块溶了</p> <p>没怎么了</p> <p>淡了就是淡了</p> <p>搁在桌上还要不要</p> <p>不再爱了</p> <p>是因为感情坏了</p> <p>你怎么了</p> <p>坏了就是坏了</p> <p>没有什么大不了</p> <p>我们不快乐</p> <p>快乐后不再快乐</p> <p>就在最后的一秒</p> <p>抱了吻了哭了</p> <p>快乐不快乐</p> <p>没人快不快乐</p> <p>就在最后的一秒</p> <p> </p> <p>我们的关系就这样了</p> <p> </p> 	 </div>  </div>  <div id="menubottom"></div> </div>  </body> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/menuscrollbak.js"></script>  </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　js下载：menuscrollbak.js
　　css下载点击menuscrollbak.css

有关图片或文字的连续滚动

kos — Tue, 20 Oct 2009 11:22:27 +0000

　　在处理滚动上，通常采用Marquee，只需要加上这个标签，给这个标签设定一个宽度和高度就能实现了，代码如下：



CODE
<marquee direction="up" height="100" width="300" style="background:#F6F6F6;border:1px #999999 solid;" onmouseout="this.start()" onMouseOver="this.stop()" scrollamount="2"> <p>这只是一个简单的例子</p> <p>仅仅利用marquee实现的滚动</p> <p>当然</p> <p>没有太多必要的话</p> <p>用这种滚动已经能让页面有动感了</p> </marquee> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　然而这样的滚动会出现一个问题，当marquee里面的内容滚动一次完成后，会出现一片空白，再重新滚动，会影响到页面的整体效果，要达到连续滚动则需要用js来控制，通过使用setTimeout和setInterval方法都能实现这样的功能，下面例子仅以setInterval为例作一个简单介绍。
代码如下：



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <style type="text/css"> <!-- #Nomain{border: 1px #FFFF00 solid; padding:10px; width: 500px;} #Nodiv {background: #FFF;overflow:hidden;width: 500px; height:60px;} #Nocov {float: left;width:400%;} #Nocontent {float: left;} #Nofloat {float: left;} --> </style> <div id="Nomain"> <div id="Nodiv"> <div id="Nocov"> <div id="Nocontent">  </div> <div id="Nofloat"></div> </div> </div> </div> <script> var speed=10; var Nodiv=document.getElementById("Nodiv"); var Nocontent=document.getElementById("Nocontent"); var Nofloat=document.getElementById("Nofloat"); Nofloat.innerHTML=Nocontent.innerHTML; function Marquee(){ 	if(Nofloat.offsetWidth-Nodiv.scrollLeft<=0) 	Nodiv.scrollLeft-=Nocontent.offsetWidth; 	else{ 	Nodiv.scrollLeft++; 	} } var MyMar=setInterval(Marquee,speed); Nodiv.onmouseover=function() {clearInterval(MyMar)}; Nodiv.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </body> </html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

说明一下，speed的值越大，移动越慢，反知，这里设置的是图片向左移动，你只需要稍加修改就可以让其向右移动，甚至向上，或向下移动都行！目前没发现有bug,如果有值得改进的地方，希望各位提出宝贵的意见！