本文主要介绍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 class="zhendimage" 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")?"visible":"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" style="width:160px; height:160px;" /> </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图片效果大全(图像震动效果、闪烁效果、自动切换图像)相关文章请关注PHP中文网!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular

Dreamweaver CS6
Alat pembangunan web visual

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.