js22.htm

来自「搜集的很多javascript实例及教程」· HTM 代码 · 共 234 行

HTM
234 行
字号 
<!--Saved  from《网页设计师》pageone.yeah.net,作者：阿捷ajie@nease.net-->
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="Javascript,Javascript,Javascript,Javascript,Javascript">
<!--  以下代码是设定此页的超链接样式    -->
<style type="text/css"><!-- A:link {text-decoration: none; color:#000000}
     A:visited {text-decoration: none; color: #000000}
     A:active {text-decoration: none; color: #FF0000}
     A:hover {text-decoration: underline; color: FF0000}
       body{font-size=9pt}
	        TH{FONT-SIZE: 9pt}
           TD{ FONT-SIZE: 9pt}
       -->
</style>
<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>

<title>左右移动的图片</title>
</head>

<body bgcolor="#FFFFFF">

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" bgcolor="#006DA2"><!--webbot bot="ImageMap" rectangle="(8,2) (105,34) http://www.pageone.yeah.net" src="../images/jlogo3.GIF" alt="网页设计师" border="0" startspan --><MAP NAME="FrontPageMap"><AREA SHAPE="RECT" COORDS="8, 2, 105, 34" HREF="http://www.pageone.yeah.net"></MAP><a href="../_vti_bin/shtml.exe/js/js22.htm/map"><img ismap usemap="#FrontPageMap" border="0" height="36" alt="网页设计师" src="../images/jlogo3.GIF" width="111"></a><!--webbot bot="ImageMap" endspan i-checksum="13180" --></td>
    <td width="50%" bgcolor="#006DA2"><p align="right"><br>
    <a href="index5.htm">上一页</a>　<a href="js41.htm">下一页</a>　<a href="../index.html">返回首页</a></td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5%" bgcolor="#B7D1F4" valign="top"></td>
    <td width="16%" bgcolor="#006DA2" valign="top"><table border="0" width="100%" cellspacing="4" cellpadding="0">
      <tr>
        <td width="16%"></td>
        <td width="84%"></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="index.htm">JAVASCRIPT</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../frontpage/index.htm">FRONTPAGE</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../dhtml/index.htm">DHTML</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../photoshop/index.htm">PHOTOSHOP</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../fireworks/index.htm">FIREWORKS</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../flash/index.htm">FLASH</a></font></td>
      </tr>
      <tr>
        <td width="16%"><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../cgi/index.htm">CGI</a></font></td>
      </tr>
      <tr>
        <td width="16%" a><font color="#ffff80">★</font></td>
        <td width="84%"><font face="Arial"><a href="../download/index.htm">DOWNLOAD</a></font></td>
      </tr>
      <tr>
        <td width="16%"></td>
        <td width="84%"></td>
      </tr>
    </table>
    </td>
    <td width="79%" valign="top"><table border="0" width="100%" cellspacing="1" cellpadding="0">
      <tr>
        <td width="12%" bgcolor="#B7D1F4"><p align="center"><font color="#FF8000">名称</font></td>
        <td width="88%" bgcolor="#FFFFFF"><p align="center">左右移动的图片</td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">实例</font></td>
        <td width="88%"><table border="1" width="100%" bordercolor="#B7D1F4" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100%"><p align="center"><img src="image1.gif" name="picture" style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40"> <script LANGUAGE="JavaScript">
<!--
  setTimeout("moveLR('picture',300,1)",10);
//-->
</script></p>
            <p align="center">　</p>
            <p align="center">　</td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">教程</font></td>
        <td width="88%"><table border="1" width="100%" cellspacing="0" cellpadding="0" bordercolor="#B7D1F4">
          <tr>
            <td width="100%" bgcolor="#FFFFFF"><br>
            <p>第一步：拷贝下面的代码到你的html文件的&lt;head&gt;和&lt;/head&gt;之间；</p>
            <blockquote>
              <form name="copy1">
                <p><textarea rows="4" name="S1" cols="39" onMouseOver="this.focus()" onFocus="this.select()">&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
<!--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);   }     	}//-->
&lt;/SCRIPT&gt;</textarea></p>
              </form>
            </blockquote>
            <p>第二步：拷贝下面的代码到你的html文件的&lt;body&gt;和&lt;/body&gt;之间；</p>
            <blockquote>
              <form name="copy2">
                <p><textarea rows="4" name="S1" cols="39" onMouseOver="this.focus()" onFocus="this.select()">&lt;img src=&quot;image1.gif&quot; width=205 height=56 name=&quot;picture&quot; style='position: absolute; top: 70px; left: 30px;' BORDER=0&gt;
&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
<!--  setTimeout("moveLR('picture',300,1)",10);//-->
&lt;/SCRIPT&gt;</textarea></p>
              </form>
            </blockquote>
            <p>说明：可以将image1.gif改为你需要的图片，修改top和left数值调整位置。</p>
            <p>　</td>
          </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">下载</font></td>
        <td width="88%" bgcolor="#FFFFFF">　请到下载中心</td>
      </tr>
      <tr>
        <td width="12%" bgcolor="#B7D1F4" valign="top"><p align="center"><font color="#FF8000">版权</font></td>
        <td width="88%" bgcolor="#FFFFFF">　阿捷编辑整理</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" height="39">
  <tr>
    <td width="21%" bgcolor="#006DA2" height="25"><font color="#0072A8">.</font></td>
    <td width="79%" bgcolor="#E6F2FF" height="25" colspan="2"><p align="right"><br>
    <a href="index5.htm">上一页</a>　<a href="js41.htm">下一页</a>　<a href="js22.htm#top">回到页首</a></td>
  </tr>
  <tr>
    <td width="21%" height="3"></td>
    <td width="79%" height="3" align="center" colspan="2"><font color="#FFFFFF">.</font></td>
  </tr>
  <tr>
    <td width="21%" height="2"></td>
    <td width="27%" height="7" align="center" rowspan="2"><p align="right"><img src="../images/jlogo4.GIF" alt="jlogo4.GIF (1066 bytes)" WIDTH="26" HEIGHT="26"></td>
    <td width="52%" height="2">《<a href="http://ajie.cxinfo.com">网页设计师</a>》 
    阿捷制作 版权所有</td>
  </tr>
  <tr>
    <td width="21%" height="5"></td>
    <td width="52%" height="5"><font face="Arial">&copy;1999-2000</font> <font face="Arial">All 
    Rights Reserved</font></td>
  </tr>
  <tr>
    <td width="21%" height="4"></td>
    <td width="79%" height="4" align="center" colspan="2">本站教程免费学习，引用请注明出处，禁止抄袭。</td>
  </tr>
</table>
</body>
</html>

js22.htm - 源码说明

本页面展示了「搜集的很多javascript实例及教程」中的 js22.htm 源码文件，采用 HTM 编程语言编写，共 234 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

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