本文主要介紹jsp實(shí)現(xiàn)圖像震動(dòng)效果、閃爍效果、自動(dòng)切換圖像的資料,廢話不多說了,具體代碼如下:
1.當(dāng)鼠標(biāo)指針經(jīng)過圖像時(shí)圖像震動(dòng)效果
<!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>當(dāng)鼠標(biāo)指針經(jīng)過圖像時(shí)圖像震動(dòng)效果</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.自動(dòng)切換影像
<!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>自動(dòng)切換圖像</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>
希望本文所述對(duì)你有所幫助,jsp圖片效果大全(影像震動(dòng)效果、閃爍效果、自動(dòng)切換影像)內(nèi)容就給大家介紹到這裡了。希望大家繼續(xù)關(guān)注我們的網(wǎng)站!想要學(xué)習(xí)介紹jsp可以繼續(xù)關(guān)注本站。
更多jsp圖片效果大全(影像震動(dòng)效果、閃爍效果、自動(dòng)切換影像)相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)!
本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請(qǐng)聯(lián)絡(luò)admin@php.cn

熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章
指南:恆星刀片保存文件位置/保存文件丟失/不保存
4 週前
By DDD
Oguri Cap Build Guide |漂亮的德比志
2 週前
By Jack chen
Agnes Tachyon Build Guide |漂亮的德比志
2 週前
By Jack chen
沙丘:覺醒 - 高級(jí)行星學(xué)家Quest演練
4 週前
By Jack chen
約會(huì)一切:德克和哈珀關(guān)係指南
4 週前
By Jack chen

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
