本文主要介紹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(a4)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中圖片的上傳與顯示方法實例詳解
- Jsp中如何讓圖片在div中居中
- 解決圖片路徑中含有中文在jsp下不能正常顯示問題
- 如何在jsp界面中插入圖片
