In diesem Artikel wird hauptsächlich JSP vorgestellt, um Bildvibrationseffekte, Flackereffekte und automatische Bildwechselinformationen zu erzielen. Der spezifische Code lautet wie folgt:
1 Das Bild vibriert Der Mauszeiger fährt über das Bild.
<!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. Bild-Blinkeffekt
<!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>Ich hoffe, dass dieser Artikel funktioniert Seien Sie hilfreich für Sie, jsp picture. Hier wird Ihnen die gesamte Palette der Effekte (Bildvibrationseffekte, Blinkeffekte, automatischer Bildwechsel) vorgestellt. Ich hoffe, dass Sie unserer Website weiterhin Aufmerksamkeit schenken! Wenn Sie JSP kennenlernen und vorstellen möchten, können Sie dieser Website weiterhin Aufmerksamkeit schenken.
<!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>
