简单的js实例（图片动态特性）

来源：互联网发布：redmine软件编辑：程序博客网时间：2024/05/22 01:04

1,图片的单方向移动，引起网站用户的注意力(同时还包括了鼠标的移入onmouseover以及移出onmouseout事件)

<html><head>    <title>sport</title><style type="text/css">#ball{ display:none;}</style><script>window.onload=init;var xs=0;function init(){     document.getElementById("3").innerHTML += "&nbsp&nbsp&nbsp看看我改了什么 ";//从外部向html文件添加文本     var li=document.getElementsByTagName("li"); for(var j=0;j<li.length;j++){    li[j].style.border="1px dotted #00ff00";li[j].onmouseover=function(){//鼠标移动到列表上方时       this.style.backgroundColor='blue';   };    li[j].onmouseout=function(){//鼠标离开列表时，恢复原来的模样       this.style.backgroundColor='white';   }; } var x=document.getElementById("1"); x.parentNode.removeChild(x); setTimeout("move()",50);};function move(){    var ball=document.getElementById("ball");ball.style.position="relative";xs=xs+50;if(xs>document.body.clientWidth)     xs=0;ball.style.left=xs;if(ball.style.display=="none")     {ball.style.display="block";} else             {ball.style.display="none";} setTimeout("move()", 500);//don't forget this order!};</script></head><body>   <h1>welcome to our sport!</h1>   <p id="text">体育具有强身健体、娱乐，另外还有教育、政治、经济等功能。也可以说所处的历史阶段不同，体育就具有不同的功能，但是自从体育产生以来，强身健体及其娱乐自始至终是体育的主要功能。体育是一种复杂的社会文化现象，以身体活动为基本手段，增强体质、增进健康及其培养人的各种心理品质为目的。尤其是随着社会经济的发展，人们的生活水平得到了提高，人们对精神方面的需要高于对物质方面的需要。人们对于体育的认识不只限于强身健体的方面，希望通过体育活动的参与得到更多的精神享受。 </p><p><img src="ball.jpg" id="ball"/></p><hr/><ul>   <li id="1">篮球</li>   <li id="2">足球</li>   <li id="3">羽毛球</li> </ul></body></html>

本例最终只是当鼠标移动到列表上方时，显示框框；

同时还会伴有图片的移动，速度可根据settimeout（“function（）”，minute），修改minute的数值即可，minute的单位是毫秒。

2.图片的闪烁效果

<HTML><HEAD><TITLE>Blink image</TITLE></HEAD><BODY ONLOAD="soccerOnload()" topmargin="0"><DIV ID="soccer" STYLE="position:absolute; left:150; top:0"><IMG SRC="ball.jpg" border="0"></a></DIV><SCRIPT LANGUAGE="JavaScript">var msecs = 500; //改变时间得到不同的闪烁间隔；var counter = 0; function soccerOnload() {setTimeout("blink()", msecs);}function blink() {soccer.style.visibility =(soccer.style.visibility == "hidden") ? "visible" : "hidden";counter +=1;setTimeout("blink()", msecs);}</SCRIPT></BODY></HTML>

这个实例比较简单，单纯的运用settimeout这个函数，不过需要留意的是，在闪烁的过程中，两者的切换手法

soccer.style.visibility =(soccer.style.visibility == "hidden") ? "visible" : "hidden";

值得推荐，不用再写if语句，而且来的简洁明了。

3.图片的切换效果，类似于幻灯的自动切换

<html><head>    <title>hello,js</title><link href="1.css"rel="stylesheet" type="text/css"> <style type="text/css">body{    background-color:blue;/*background-image:url(ball.jpg) no repeat;*/}#pic{ text-align:"center"; display:none;//默认时不显示图片}#footer{position:absolute;top:300px;font-family:'宋体',arial,georgia,verdana,helvetica,sans-serif;color:#ff0;background-color:#009989;}</style><script>window.onload=b;var xs=0;var te=new Array("阿丁，你在在干吗？","我在走路呀。","骗人，干嘛一歪一歪的？","哈哈啊，这是个秘密，不告诉你","切，我才不想知道呢。。");function b(){    var shuoming=document.getElementById("title");shuoming.innerHTML="序幕";        var footer=document.getElementById("footer");var ball=document.getElementsByTagName("img");       if(xs==0){        ball[4].style.display="none";   }   else   {        ball[xs-1].style.display="none";   }        ball[xs].style.display="block";            footer.innerHTML=te[xs];xs=xs+1;if(xs==5)  {xs=0;}        setTimeout("b()", 500);};</script></head><body>   <h1>漫画小丁</h1>   <p id="title"></p><hr/><p id="pic"><img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" /><img src="4.jpg" /><img src="5.jpg" /></p><p id="footer"></p></body></html>

切换的关键之处在于显示当前图片的同时，保证上一张图片被隐藏起来。

其实上面几个实例，都可以将其中的display：none/block；对应的修改为visibility：hidden/visible；

最终效果是一样的，大家可以尝试一下。

tip:

当需要使用left或top等定位属性时，务必将position属性值设定为：absolute，不过在上述第1个实例中，如果图片的下方还有文本的话，当这样设置，就有可能出现覆盖状况，

所以有必要将absolute改为relative，这样当图片不再页面时，文本都不会跑上去。