search

Home >php教程 >PHP开发 >jsp picture effect collection (image vibration effect, flashing effect, automatic switching of images)

jsp picture effect collection (image vibration effect, flashing effect, automatic switching of images)

高洛峰
高洛峰Original
2016-12-29 16:02:511447browse

This article mainly introduces jsp to achieve image vibration effects, flickering effects, and automatic image switching information. No more nonsense. The specific code is as follows:

1. The image vibrates when the mouse pointer passes over the image. Effect

<!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. Picture flashing effect

<!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. Automatically switch images

<!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>

I hope this article will be helpful to you, jsp picture effects (image shaking effect , flashing effect, automatic switching of images) content is introduced to you here. I hope you will continue to pay attention to our website! If you want to learn and introduce jsp, you can continue to pay attention to this site.

For more jsp image effects (image vibration effects, flashing effects, automatic image switching) related articles, please pay attention to the PHP Chinese website!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Tips for outputting pictures in separate rows on jsp pagesNext article：Tips for outputting pictures in separate rows on jsp pages

Related articles

See more