⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 picture10.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>图形左右晃动脚本</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
--></style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript">
<!--

step = 0;
obj = new Image();

function anim(xp,xk,smer) //smer = direction
{
 obj.style.left = x;

 x += step*smer;
 
 if (x>=(xk+xp)/2) {
    if (smer == 1) step--;
       else step++;
    }
 else {
    if (smer == 1) step++;
       else step--;
    }

 if (x >= xk) {
       x = xk;
       smer = -1;
      }

  if (x <= xp) {
       x = xp;
       smer = 1;
      }
// if (smer > 2) smer = 3;
  setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}


function moveLR(objID,movingarea_width,c)
{

  if (navigator.appName=="Netscape") window_width = window.innerWidth;
     else window_width = document.body.offsetWidth;

  obj = document.images[objID];   
  image_width = obj.width;
  
  x1 = obj.style.left;
  x = Number(x1.substring(0,x1.length-2));   // 30px -> 30

  if (c == 0) {

	   if (movingarea_width == 0) {
	   		right_margin = window_width - image_width;
	        anim(x,right_margin,1);
			}			
       	  else {
		    right_margin = x + movingarea_width - image_width; 
			if (movingarea_width < x + image_width) window.alert("No space for moving!");
     	  		else anim(x,right_margin,1);
		}
   }
   else {
       if (movingarea_width == 0) right_margin = window_width - image_width;
		  else {
		     x = Math.round((window_width-movingarea_width)/2);
			 right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
		 }
		anim(x,right_margin,1);
   }     	
}


//-->
</SCRIPT>

</head>
<body bgcolor="#fef4d9">
<br>
<br>
<center><font color=red face="隶书" size=6>图形左右晃动脚本</font></center>
<br>
<center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为脚本显示区</strong></font></td></tr><tr><td align=center width=300 height=100><img src="shu.gif" name="picture" style='position: absolute; top: 170px; left: 30px;' BORDER=0>
<SCRIPT LANGUAGE="JavaScript">
<!--
  setTimeout("moveLR('picture',300,1)",10);
//-->
</SCRIPT>

</td></tr></table></center>
<br>
<br>
<center>
<textarea name=source rows=12 cols=55 class=yk9>
脚本说明:
第一步:把如下代码加入<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!--

step = 0;
obj = new Image();

function anim(xp,xk,smer) //smer = direction
{
 obj.style.left = x;

 x += step*smer;
 
 if (x>=(xk+xp)/2) {
    if (smer == 1) step--;
       else step++;
    }
 else {
    if (smer == 1) step++;
       else step--;
    }

 if (x >= xk) {
       x = xk;
       smer = -1;
      }

  if (x <= xp) {
       x = xp;
       smer = 1;
      }
// if (smer > 2) smer = 3;
  setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}


function moveLR(objID,movingarea_width,c)
{

  if (navigator.appName=="Netscape") window_width = window.innerWidth;
     else window_width = document.body.offsetWidth;

  obj = document.images[objID];   
  image_width = obj.width;
  
  x1 = obj.style.left;
  x = Number(x1.substring(0,x1.length-2));   // 30px -> 30

  if (c == 0) {

	   if (movingarea_width == 0) {
	   		right_margin = window_width - image_width;
	        anim(x,right_margin,1);
			}			
       	  else {
		    right_margin = x + movingarea_width - image_width; 
			if (movingarea_width < x + image_width) window.alert("No space for moving!");
     	  		else anim(x,right_margin,1);
		}
   }
   else {
       if (movingarea_width == 0) right_margin = window_width - image_width;
		  else {
		     x = Math.round((window_width-movingarea_width)/2);
			 right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
		 }
		anim(x,right_margin,1);
   }     	
}


//-->
</SCRIPT>



第二步:在<body>区域加入如下代码
<img src="image1.gif" width=205 height=56 name="picture" style='position: absolute; top: 10px; left: 30px;' BORDER=0>
<SCRIPT LANGUAGE="JavaScript">
<!--
  setTimeout("moveLR('picture',300,1)",10);
//-->
</SCRIPT>

</textarea>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -