js实现网页飘窗

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <title>Jerory‘s code</title>
 5 </head>
 6 <body>
 7 <div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;   border:1px solid #000; width:200px; height:100px;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval(‘changePos()‘, delay)" align="right">
 8 <img style="width:100%;height:100%; cursor:pointer" src="http://www.baidu.com/img/bdlogo.png" onclick="javascript:window.open(‘http://www.baidu.com‘);"  onload="return imgzoom(this,550)"/>
 9 <div style="cursor:pointer;color:#000;  margin:3 0 3 0; font-size:12px; width:100%;  text-align:center;" onclick="clearInterval(interval);img.style.visibility = ‘hidden‘">关闭</div>
10
11 </div>
12 <script language=javascript>
13 var xPos = 20;
14 var yPos = document.body.clientHeight;
15 var step = 1;
16 var delay = 30;
17 var height = 0;
18 var Hoffset = 0;
19 var Woffset = 0;
20 var yon = 0;
21 var xon = 0;
22 var pause = true;
23 var interval;
24 img.style.top = yPos;
25 function changePos() {
26 width = document.body.clientWidth;
27 height = document.body.clientHeight;
28 Hoffset = img.offsetHeight;
29 Woffset = img.offsetWidth;
30 img.style.left = xPos + document.body.scrollLeft;
31 img.style.top = yPos + document.body.scrollTop;
32 if (yon) {
33 yPos = yPos + step;
34 }
35 else {
36 yPos = yPos - step;
37 }
38 if (yPos < 0) {
39 yon = 1;
40 yPos = 0;
41 }
42 if (yPos >= (height - Hoffset)) {
43 yon = 0;
44 yPos = (height - Hoffset);
45 }
46 if (xon) {
47 xPos = xPos + step;
48 }
49 else {
50 xPos = xPos - step;
51 }
52 if (xPos < 0) {
53 xon = 1;
54 xPos = 0;
55 }
56 if (xPos >= (width - Woffset)) {
57 xon = 0;
58 xPos = (width - Woffset);
59 }
60 }
61 function start() {
62 img.style.visibility = "visible";
63 interval = setInterval(‘changePos()‘, delay);
64 }
65 start();
66 </script>
67 </body>
68 </html>
时间: 2024-10-18 09:07:51

js实现网页飘窗的相关文章

用js在网页上完成倒计时3秒后自动跳转到另一个页面

<body> <div id="time"></div> <a href="#" onclick="stop()">停止</a> <script type="text/javascript"> var i=3; function changeTime(){ document.getElementById("time").innerHTM

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

js获取网页的各种高度

网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: document.body.sc

&lt;&lt;&lt; JS实现网页批量下载文件,支持PC/手机

//把下载链接放入集合里 var downloadData = new Array{"http://www.empli.com/data1.apk","http://www.empli.com/data1.apk","http://www.empli.com/data1.apk","http://www.empli.com/data1.apk"}; var downloadNum=0;//方法执行次数 circularWind

JS获取网页宽高方法集合

JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth - 网页总宽documen

html5 websocket + node.js 实现网页聊天室

1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 client 关键代码 var socket = io.connect('http://localhost:8080'); socket.on('connect',function(){ console.log('connected to server'); socket.on('login succes

js获取网页屏高 屏宽

<SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document.body.scrollLeft 滚动条的左端距离 window.onload = function() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:&qu

JS CSS 网页 简单 右侧 悬浮

<!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(this).css("right", "-2px"); }, function() { $(this).css("right", "-175px"); }); }); </script> <div class=&quo

JS实现 网页下拉一段后固定导航条

<!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> <meta http-equiv="Content-