jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)
jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)
发布时间:2016-12-29 来源:查字典编辑
摘要:本文主要介绍jsp实现图像震动效果、闪烁效果、自动切换图像的资料,废话不多说了,具体代码如下:1.当鼠标指针经过图像时图像震动效果当鼠标指针...

本文主要介绍jsp实现图像震动效果、闪烁效果、自动切换图像的资料,废话不多说了,具体代码如下:

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 onmousemove="init(this);rattleimage();" onmouseout="stoprattle(this);" src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg002.png" /></div> </body> </html>

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")"hidden"; //每0.5秒刷新一次 setTimeout("blink()",500); } </script> </head> <body onload="blink();"> <div id="tp"> <img src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg" /> </div> </body> </html>

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://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.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://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg" height="160" width="160" /></div> </body> </html>

希望本文所述对你有所帮助,jsp图片效果大全(图像震动效果、闪烁效果、自动切换图像)内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习介绍jsp可以继续关注本站。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新JSP教程学习
热门JSP教程学习
编程开发子分类