当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

JS完成晃动的图片

JS完成晃动的图片

更新时间:2023-06-17 文章作者:未知 信息来源:网络 阅读次数:

编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

JS实现晃动的图片

【实例描述】

文字可以实现左右滚动,图片也可以实现左右移动。本例介绍一个图片左右移动的特效。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-本站(www.xue51.com)</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="http://www.baidu.com/img/logo.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>

 

 

【运行效果】

 晃动的图片运行效果

【难点剖析】

本例的重点是定时器和随机数的应用。定时器用来不断移动图片,随机数的获取是使用“Math.random”函数。“Math.round”是四舍五人函数,返回一个伪随机数(0~1之间的double数)。

【源码下载】

为了JS代码的准确性,请点击:JS实现晃动的图片 进行本实例源码下载 


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html