JavaScript 實現背景圖片隨機浮動
只要一個層設定了背景圖片就可以了
js程式碼如下
本程式碼用到了jquery了
function floatMove(did,h,w)
{
this.Obj = $("#"+did);
this.tdir = this.ldir = 1;
var THIS = this;
this.init = function()
{
var p = this.Obj.css("backgroundPosition")
if(p)
{
p = p.split(" ");
this.top = parseInt(p[0]);
if(isNaN(this.top)) this.top = 0;
this.left = parseInt(p[1]);
if(isNaN(this.left)) this.left = 0;
}
else
{
this.top = this.left = 0;
}
}
this.getRnd = function()
{
var rnd = Math.random()*30;
if(rnd < 15)
return 1;
else if(rnd < 30)
return 0;
}
var move = this.move = function(){
this.init();
this.top = this.top + this.getRnd()*this.tdir;
while(Math.abs(this.top) > h)
{
this.tdir = this.tdir * -1;
this.top = this.top + this.getRnd()*this.tdir;
}
this.left = this.left + this.getRnd()*this.ldir;
while(Math.abs(this.left) > w)
{
this.ldir = this.ldir * -1;
this.left = this.left + this.getRnd()*this.ldir;
}
this.Obj.css("backgroundPosition",this.top+"px
"+this.left+"px");
setTimeout(function(){move.apply(THIS);},20);
}
}
呼叫程式碼如下
$().ready(function(){
new
floatMove('bgleft',10,10).move();//bgleft要移動層的id，第一個數字是垂直可移動的範圍，第二個數字是水平
可移動的範圍
})
在寫這個程式碼的時候還遇到了一點小問題跟大家分享一下
在獲取backgroundPositionX時在ie8下沒有問題，可是在firefox下就是取不到啊
沒辦法了 只能取 backgroundPosition 然後自己處理才沒有出現問題啊
相關推薦
JavaScript 實現背景圖片隨機浮動
只要一個層設定了背景圖片就可以了 js程式碼如下 本程式碼用到了jquery了 function floatMove(did,h,w) { this.Obj = $("#"+did); this.tdir = this.ldir = 1; var TH
JavaScript 實現背景圖片隨機浮動2
今天在開啟頁面一直開著的時候，發現昨天程式碼會進入執行時間太長的，所以今天我有修改了一下 總算是沒有問題了，我運行了一個下午也沒有出現這樣的問題啊，看來應該是沒有問題了 最新程式碼如下 function floatMo
JS實現圖片隨機浮動效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>圖片隨機浮動遊戲</title&
JavaScript實現簡單圖片滾動 --9張圖告訴你，C羅欲哭無淚
charset () element edit fas 簡單圖 pad jpg sni 源代碼下載：http://download.csdn.net/detail/u011043843/7510425 昨晚德國和葡萄牙的焦點之戰你看了嗎？北京時間淩晨的比賽
JQuery實現背景圖片漸變！
side start process log key 圖片 ant -type port <html> <head> <meta http-equiv="Content-Type" content="text/html; charse
CSS實現背景圖片透明而文字不透明效果的方法
1.毛玻璃效果： 背景圖 + 偽類 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:befor
簡潔風個人主頁（3） js背景圖片隨機切換
靜態頁面做完了，現在用js做一個背景圖片隨機切換的效果。 1.點選‘個人網站'這個字樣，實現body背景的切換。所以，首先獲取這兩個節點。 var body = document.body; var change_btn = document.getElementById("change
CSS實現背景圖片固定寬高比自適應調整
<img>標籤可以使圖片在保持寬高比不變的情況下自動調整。我們討論的是div的背景圖片實現固定寬高比自適應調整的方法。這裡的圖片不是< img>標籤一樣通過src引入，而是通過css的background-image: url('路徑')實現。 &
CSS HTML實現背景圖片的填充
margin: 0; background-image: url('bg.jpg'); backgroun
QT label樣式表實現背景圖片自動拉伸縮小（充滿整個Label）
QT label樣式表實現自動拉伸,充滿整個框，支援放大和縮小。 使用樣式表語句 QLabel { background-color: gainsboro; border-image: url(@skinpath/icons/map_background.png); }
android 自定義ScrollView實現背景圖片伸縮(阻尼效果)
android 自定義ScrollView實現強調內容背景圖片伸縮（仿多米,qq空間背景的重新整理） bug修改：只需將自定義PersonalScrollView的真假判斷修改即可，修改後的程式碼片段如下： case MotionEven
使用JavaScript實現製作網頁隨機驗證碼
1: getCode.js /** * 產生隨機數的函式 */ function validateCode(n){ //驗證碼可能包含的字元 var s="abcdefghijklmn
用background-size實現 背景圖片自適應瀏覽器大小，但不變形
很多flash站都用到了一張背景圖，然後根據瀏覽器大小自動縮放，但圖片不變形。在CSS3中，有屬性：background-size: cover; //只支援IE9+ -webkit-background-size: cover; //webkit核心 -moz-bac
JavaScript設定背景圖片
本章節通過程式碼例項介紹一下如何利用js實現動態的為div元素設定背景圖片。 核心程式碼片段如下: [JavaScript] 純文字檢視 複製程式碼執行程式碼1odiv.style.backgroundImage="url('images/test.jpg')"; 下面給出一個完整的程式碼例項，使用的
如何實現背景圖片自適應td大小
<td style="filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-
網頁設計中利用CSS實現背景圖片平鋪的技巧
我們在進行網站的設計製作過程中，使用css來針對背景圖片進行設定，其實就與傳統的做法一樣十分簡單方便。不過，相對於傳統的一些操作方式，css可以提供更多的可控選項，我們先了解一下一引起最基本的設定圖片的方法。 css程式碼如下： #content { border:1
js實現登入頁面的背景圖片的隨機展示
js程式碼如下： <script type="text/javascript"> // 隨機展示背景圖片 var imgSrcs = [ "${ctx}/
背景圖片利用backgrond-posintion屬性實現不同形式的分割
utf title borde images set absolut font 圖片 charset <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
【前端】特效-Javascript實現購物頁面圖片放大效果
position pre children mes ges 冒泡 cnblogs absolute 取值 實現效果 實現代碼: <!DOCTYPE html> <html> <head> <title>購物圖片放大&