载入中…
设为首页 加入收藏 网站地图

首 页

QQ无敌技巧 QQ空间技巧 Q Q 秘籍技巧 SQL无敌技巧 电脑无敌技巧 电脑知识技巧 电脑维护技巧 数据库无敌技巧
设计无敌技巧 phoshop技巧 Flash 技巧 CAD 技 巧 网赚无敌技巧 网赚攻略技巧 另类网赚技巧 网推无敌技巧 网络无敌技巧
编程无敌技巧 .Net 技 巧 HTML 技巧 Css 技 巧 Javascript技巧 Java 技 巧 生活无敌技巧 烹调小技巧 美容小技巧
 无敌技巧打造一周学会
 无敌技巧打造一周学会
几种常见的在线播放Asp.NET常用函数总结无敌HTML标签之链接无敌HTML标签之格式简单WEB开发规范
一个简单的Java应用无敌HTML标签之表格无敌HTML标签之图像无敌HTML标签之基本Div+CSS布局入门教程
 使图片左右晃动
 自动调整iframe框架的
 无敌HTML标签之链接标
 破解加密的网页轻松看
几种常见的在线播放Asp.NET常用函数总结无敌HTML标签之链接无敌HTML标签之格式简单WEB开发规范
一个简单的Java应用无敌HTML标签之表格无敌HTML标签之图像无敌HTML标签之基本Div+CSS布局入门教程
 Servlet的基础结构
 EJB详细概述(下)
您现在的位置: 无敌技巧 >> 编程技巧 >> JavaScript技巧 >> 正文
 
使图片左右晃动

信息来源: http://www.wudijiqiao.com | 发布日期:2008-11-5 11:14:34  字体设置

复制代码开始(此行不用复制)

<head>
<title>使图片左右晃动</title>
<script language="JavaScript">
step = 0;
obj = new Image();        //创建图片对象
function anim(xp,xk,smer) //smer 代表晃动方向
{
   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;
      }
  setTimeout('anim('+xp+','+xk+','+smer+')', 40); //设置定时器,实现不断晃动效果
}

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坐标
  x = Number(x1.substring(0,x1.length-2));            //去掉后面的像素标记“px”
  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>
<img src="/bianchengJQ/UploadFiles_3489/200811/20081105111837892.gif" name="img1" style='position: absolute; top: 50px; left: 213px;' border=0 id="myImg">
<script language="JavaScript">
  setTimeout("moveLR('myImg',400,1)",10);
</script>
</head>
<body>
</body>
</html>

复制代码结束(此行不用复制)

 
  • 上一篇编程技巧:

  • 下一篇编程技巧: 没有了
  • 最 新 热 门

    最 新 推 荐

     网友评论 网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    无敌技巧