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();" src="https://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")?"visible":"hidden"; //每0.5秒刷新一次 setTimeout("blink()",500); } </script> </head> <body> <div> <img src="https://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 ( "https://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 src="https://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg" /></div> </body> </html>
希望本文所述对你有所帮助，jsp图片效果大全（图像震动效果、闪烁效果、自动切换图像）内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习介绍jsp可以继续关注本站。
您可能感兴趣的文章: