當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 始終在屏幕右下角的圖片JS代碼怎么寫

始終在屏幕右下角的圖片JS代碼怎么寫

2012/11/8 17:15:02作者：佚名來源：網絡

移動端

【實例名稱】

始終在屏幕右下角的圖片JS代碼怎么寫

【實例描述】

不管頁面怎么滾動，當前圖片都顯示在窗體的右下角。本例學習如何保持這種移動狀態。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-學無憂（www.yzddtk.cn）</title>
<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
imgwidth=235;               //圖像的寬度
imgheight=19;               //圖像的高度
if (navigator.appName == "Netscape") {
 //netscape下的位置設置
    horz=".left";
    vert=".top";
    docStyle="document.";
    styleDoc="";
    innerW="window.innerWidth";
    innerH="window.innerHeight";
    offsetX="window.pageXOffset";
    offsetY="window.pageYOffset";
}
else {                              //ie下的位置設置
    horz=".pixelLeft";
    vert=".pixelTop";
    docStyle="";
    styleDoc=".style";
    innerW="document.body.clientWidth";
    innerH="document.body.clientHeight";
    offsetX="document.body.scrollLeft";
    offsetY="document.body.scrollTop";
   }
}
function checkLocation() 
{
    objectXY="rightBottom";         
//獲取始終顯示在右下角的div
    var availableX=eval(innerW);    
//最大x坐標
    var availableY=eval(innerH);    
//最大y坐標
    var currentX=eval(offsetX);     
//鼠標當前的x坐標
    var currentY=eval(offsetY);     
//鼠標當前的y坐標
    x=availableX-(imgwidth+30)+currentX; 
//最終div的x坐標
    y=availableY-(imgheight+20)+currentY;
//最終div的y坐標
    evalMove();
    setTimeout("checkLocation()",10);    
//定時移動
}
function evalMove() {               
//移動到指定位置
    eval(docStyle + objectXY + styleDoc + horz + "=" + x);
    eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</script>
</head>
<body bgcolor="#fef4d9" onload="setVariables(); checkLocation();">
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aa<br />
a<br />
aa<br />
a<br />
a<br />
a<br />
a<br />
<div id="rightBottom" style="position:absolute; visibility:show; left:235px; top:50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="http://www.google.net" onmouseover="window.status='我愛的搜索';return true" onmouseout="window.status='';return true"><center><img src="logo1.gif" width="240" height="20" border="0"></center></a></td>
</table>

</body>
</html>

【運行效果】

始終在屏幕右下角的圖片運行效果

【難點剖析】

本例的重點是使用“checkLocation”方法，用來設計當前div應該顯示的位置。主要是根據鼠標的移動事件，獲取div層的（x，y）坐標，根據坐標不斷地改變div的位置，讓其永遠顯示在窗體的右下方。

【源碼下載】

為了JS代碼的準確性，請點擊：始終在屏幕右下角的圖片的JS代碼進行本實例源碼下載

標簽：圖片

上一篇：JS實現預裝載圖片提高站點速度
下一篇：PS利用計算給失真的圖片美白磨皮

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频