2012/11/8 17:15:02作者:佚名来源:网络
【实例名称】
始终在屏幕右下角的图片JS代码怎么写
【实例描述】
不管页面怎么滚动,当前图片都显示在窗体的右下角。本例学习如何保持这种移动状态。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</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代码 图片
相关文章
够快云库v6.3.24.12120免费版
详情
光影魔术手官方版 v4.7.1
详情
ADsafe净网大师v5.4.408.7000
详情
网易邮箱大师v5.3.2.1015电脑版
详情
foxmailv7.2.25.375
详情
暴风影音5v5.92.0824.1111
详情
暴风影音v5.92.0824.1111
详情
BitComet(比特彗星)v2.13.4.13Beta2
详情
路由优化大师v4.5.31.267
详情
茄子快传电脑版 v5.1.0.7
详情
搜狐影音 v7.2.1.0官方版
详情
搜狐影音客户端 v7.2.1.0
详情
迅雷影音官方版 v7.0.3.92
详情
cbox央视影音v6.0.3.4经典版
详情
potplayer播放器v1.7.22496
详情
Daum PotPlayer(已集成直播源)v1.7.22496绿色纯净美化便携增强版
详情
天国拯救2黄金版 Build.17149332-1.1.1.11377中文版
详情
燕云十六声电脑版 v1.9.31
详情
潜行者2:切尔诺贝利之心 Build.16805297豪华中文版
详情
模拟农场25豪华中文版
详情
迷你世界电脑版 v1.41.00
详情
骑马与砍杀2 v1.2.9.34019免费版
详情
侠盗猎车手圣安地列斯 v1.0最新中文版
详情
整蛊白云 v1.0
详情
地平线4 v1.476中文版
详情
圣女战旗中文v1.1.9绿色免安装版
详情
狂怒2中文
详情
红色警戒2共和国之辉电脑版 v1.0
详情
模拟人生4 v1.0中文免费版
详情
蛊婆v1.0免费版
详情
风起云涌2越南中文版 v1.6Steam正版
详情
使命召唤17官方中文版 v1.0
详情
运满满货主版v7.92.1.0安卓版
详情
运满满司机版app手机版v8.92.1.0安卓版
详情
网易蜗牛读书水墨版V1.9.78
详情
泼辣修图免费版v6.11.3安卓版
详情
泼辣修图安卓版v6.11.3
详情
汽车大师v7.15.5技师版
详情
步多多v2.8.1安卓版
详情
新浪新闻v8.43.7官方版
详情
拓词v14.21安卓版
详情
思尔健康v3.1.42安卓版
详情
云上钢琴v4.0.3安卓版
详情
乐听头条v3.3.3安卓版
详情
t3出行v4.2.9安卓版
详情
66手游平台v5.11.7.0安卓版
详情
360清理大师2019最新版v8.5.8
详情
福昕PDF阅读器v9.7.31101安卓版
详情