Javascript實(shí)現(xiàn)仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
背景圖片:
浮云圖片: ←——————————這里是有圖片D~ 全選就能看見了(因?yàn)楸尘笆前椎?,云也是白的嘛~)……
CSS代碼:
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: url("Images/body_bg.jpg") repeat center 0 fixed;
}
.cloud
{
background: url("Images/cloud1.png");
height: 250px;
width: 580px;
position: absolute;
}
.hScroll
{
overflow: hidden;
}
</style>
理解: .hScroll 是為了讓瀏覽器的滾動(dòng)條隱藏;其他一看就明白咋回事,我也不廢話了;
body里的代碼:
<body onload="StartMove()">
<div class="cloud" id="moveCloud">
</div>
</body>
理解:頁面加載的時(shí)候調(diào)用StarMove()函數(shù);
Javascript代碼:
<script language="javascript" type="text/javascript">
var cloud = null;
var left = 0;
document.documentElement.className = "hScroll";
function StartMove() {
cloud = document.getElementById("moveCloud");
setInterval(Move, 100);
}
function Move() {
left += 1;
cloud.style.left = left + "px";
if (left >= (screen.width)) {
left = -580;
}
}
</script>
理解:document.documentElement.className = "hScroll"; 是調(diào)用css樣式中的代碼,目的是為了隱藏瀏覽器的滾動(dòng)條(廢話……上面不是說過了嘛^_^|| )
首先,我們要獲取“浮云”層的id,所以用到了 cloud = document.getElementById("moveCloud"); cloud是一個(gè)全局變量,上面已經(jīng)定義過了,所以在這里可以直接使用(老鳥勿噴,給新鳥看的).
然后再給他一個(gè)“計(jì)時(shí)器” setInterval(Move, 100); 調(diào)用100毫秒調(diào)用一次Move函數(shù);
left += 1;等價(jià)于left=left+1; 配合上面的函數(shù)(每100毫秒調(diào)用一次嘛~)使用,然后再賦值給“浮云”層原來的坐標(biāo);所以寫成了cloud.style.left = left + "px" ;
神馬?你問我left是什么東東?他是css樣式里的position的屬性??!不信你在DW里寫個(gè)position冒號(hào)一下,看他出來不?
if (left >= (screen.width)) ; left = -580; 就是斷判如果“浮云”移動(dòng)(距離左邊)的位置大于或者等于屏幕的寬度,我們就讓他從頭開始,把left的值設(shè)為-580;
為啥設(shè)-580?? 看CSS里面嘛,浮云的圖片大小是580*250嘛,也就是他的長(zhǎng)度是580px;所以把他設(shè)成-580是為了讓它從右開始一點(diǎn)點(diǎn)顯示,不然一上來就顯示整張圖片,多嚇人啊~
廢了半天話,不知道大家(和我一樣菜的)看懂了沒有,下面的是完整的代碼,另存為.html文件試一下吧;圖片自己下載,別忘了改路徑!
完整代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>背景圖片移動(dòng)</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
background: url("Images/body_bg.jpg") repeat center 0 fixed;
}
.cloud
{
background: url("Images/cloud1.png");
height: 250px;
width: 580px;
position: absolute;
}
.hScroll
{
overflow: hidden;
}
</style>
<script language="javascript" type="text/javascript">
var cloud = null;
var left = 0;
document.documentElement.className = "hScroll";
function StartMove() {
cloud = document.getElementById("moveCloud");
setInterval(Move, 100);
}
function Move() {
left += 1;
cloud.style.left = left + "px";
if (left >= (screen.width)) {
left = -580;
}
}
</script>
</head>
<body onload="StartMove()">
<div class="cloud" id="moveCloud">
</div>
</body>
</html>
相關(guān)文章
JavaScript 拖拽實(shí)現(xiàn)(附注釋),最經(jīng)典簡(jiǎn)單短小精悍!
JavaScript拖拽實(shí)現(xiàn)(附注釋),最經(jīng)典!最簡(jiǎn)單!短小精悍!2009-04-04JavaScript將頁面表格導(dǎo)出為Excel的具體實(shí)現(xiàn)
如何將頁面表格導(dǎo)出為Excel,這在日常工作中很常見,下面為大家詳細(xì)的介紹下使用JavaScript是如何實(shí)現(xiàn)的2013-12-12Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析
匿名函數(shù)就是沒有函數(shù)名的函數(shù)。這篇文章主要介紹了Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析的相關(guān)資料,需要的朋友可以參考下2016-05-05JS+Canvas實(shí)現(xiàn)上傳圖片截圖功能
在我們平時(shí)開發(fā)圖片上傳時(shí),有時(shí)需要實(shí)現(xiàn)圖片的裁剪功能,這篇文章主要為大家介紹了如何使用Canvas實(shí)現(xiàn)上傳圖片截圖功能,希望對(duì)大家有所幫助2023-10-10FireBug 調(diào)試JS入門教程 如何調(diào)試JS
這篇文章主要為大家介紹下通過firefox的FireBug調(diào)試JS,需要的朋友可以參考下2013-12-12實(shí)例分析js和C#中使用正則表達(dá)式匹配a標(biāo)簽
本文通過2個(gè)實(shí)例,對(duì)比分析了在js和c#中使用正則表達(dá)式匹配a標(biāo)簽的異同,小伙伴們自己參考下吧,有利于深刻理解正則表達(dá)式的使用。2014-11-11javascript 多種搜索引擎集成的頁面實(shí)現(xiàn)代碼
這個(gè)頁面是為了方便自己同時(shí)使用多種搜索引擎(呵呵我用其作默認(rèn)主頁),在IE5/IE6/FireFox下均運(yùn)行正常,效果如下圖2010-01-01