jsp 그림 효과 모음(이미지 진동 효과, 깜박임 효과, 이미지 자동 전환)-PHP开发-php.cn

집

php教程

PHP开发

jsp 그림 효과 모음(이미지 진동 효과, 깜박임 효과, 이미지 자동 전환)

高洛峰

Dec 29, 2016 pm 04:02 PM

이 기사에서는 이미지 진동 효과, 깜박임 효과 및 자동 이미지 전환 정보를 구현하기 위해 주로 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 lazy"  src="/static/imghwm/default1.png"  data-src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg002.png"   onmousemove="init(this);rattleimage();"
onmouseout="stoprattle(this);"  /></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">
 
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="/static/imghwm/default1.png"  data-src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg"  class="lazy"     style="max-width:90%" / alt="jsp 그림 효과 모음(이미지 진동 효과, 깜박임 효과, 이미지 자동 전환)" >
</div>
</body>
</html>

도움이 되세요, jsp picture 여기에서는 다양한 효과(이미지 진동 효과, 깜박임 효과, 자동 이미지 전환)를 소개합니다. JSP를 배우고 소개하고 싶다면 이 사이트에 계속 관심을 가져주시길 바랍니다.

<!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  src="/static/imghwm/default1.png"  data-src="http://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg003.jpg"  class="lazy"  id="iimg"     style="max-width:90%"  style="max-width:90%" / alt="jsp 그림 효과 모음(이미지 진동 효과, 깜박임 효과, 이미지 자동 전환)" ></div>
</body>
</html>

더 많은 jsp 그림 효과(이미지 진동 효과, 깜박임 효과, 자동 이미지 전환) 관련 글을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는