人人做人人澡人人爽欧美,国产主播一区二区,久久久精品五月天,羞羞视频在线观看免费

當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

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
主站蜘蛛池模板: 鄄城县| 陆良县| 辽中县| 灵石县| 治县。| 谷城县| 丰都县| 安塞县| 阜平县| 恭城| 开阳县| 荣成市| 平遥县| 库车县| 二手房| 黄冈市| 迭部县| 广丰县| 临洮县| 安化县| 五大连池市| 康定县| 云林县| 寻乌县| 陆河县| 饶平县| 凤翔县| 民勤县| 勃利县| 抚松县| 固镇县| 阿尔山市| 肥城市| 禄丰县| 十堰市| 长宁县| 南丰县| 河东区| 华容县| 长治市| 马龙县|