【温故而知新】Javascript图片效果（图像震动效果、闪烁效果、自动切换图像）

2024-04-27 14:17:23

字体：大中小

来源：转载

供稿：网友

【温故而知新】javascript图片效果（图像震动效果、闪烁效果、自动切换图像）

1.当鼠标指针经过图像时图像震动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>当鼠标指针经过图像时图像震动效果</title><style type="text/CSS">.zhendimage{ position:relative; }</style><script type="application/Javascript" >var rector =3;var stopit = 0;var a=1;var zhend;function init(which){    stopit =0;    zhend = which;    zhend.style.left =0;    zhend.style.top =0;}function rattleimage(){    if(stopit==1)    {        return;    }        if(a==1)    {        zhend.style.top = parseInt(zhend.style.top)+rector+"px";    }    else if(a==2)    {        zhend.style.left = parseInt(zhend.style.left)+rector+"px";    }    else if(a==3)    {        zhend.style.top = parseInt(zhend.style.top)-rector+"px";    }    else     {        zhend.style.left = parseInt(zhend.style.left)-rector+"px";    }    if(a<4)a++;    else a =1;    setTimeout("rattleimage()",50);}function stoPRattle(which){    stopit = 1;    which.style.left =0;        which.style.top =0;        }</script></head><body><div><img class="zhendimage" onmousemove="init(this);rattleimage();"onmouSEOut="stoprattle(this);"  src="http://s1.vevb.com/20150728/f2cu2f2mf3l31.png" /></div></body></html>

View Code

2.图片闪烁效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片闪烁效果</title><script type="application/javascript">function blink(){//定义图片的显示和隐藏属性tp.style.visibility = (tp.style.visibility=="hidden")?"visible":"hidden";    //每0.5秒刷新一次setTimeout("blink()",500);}</script></head><body onload="blink();"><div id="tp"><img src="http://s1.vevb.com/20150728/xlj5svrwxsd31.jpg" style="width:160px; height:160px;" /></div></body></html>

View Code

3.自动切换图像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自动切换图像</title><script type="application/javascript">var imgs = new Array("http://s1.vevb.com/20150728/xlj5svrwxsd31.jpg","http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg004.gif","http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_%e6%9a%82%e6%97%a0%e5%9b%be%e7%89%87.gif"    )var nums =0;setInterval("fort()",1000);function fort(){    iimg.src = imgs[nums];        nums++;    if(nums==3)nums=0;}</script></head><body><div><img id="iimg" src="http://s1.vevb.com/20150728/xlj5svrwxsd31.jpg" height="160" width="160" /></div></body></html>

View Code

来源：《HTML、CSS、Javascript网页制作从入门到精通》15.2章节

上一篇：Javascript 方法大全

下一篇：Javascript 数组与字典