标签:
需求:在网站首页添加一个四处浮动的窗口(实际是一个图片,单击是一个地址链接)。
1.网页上找到的一段javascript代码,写成了js文件。
1 var Rimifon = { 2 "Ads": new Object, 3 "NewFloatAd": function (imgUrl, strLink) { 4 var ad = document.createElement("a"); 5 ad.DirV = true; 6 ad.DirH = true; 7 ad.AutoMove = true; 8 ad.Image = new Image; 9 ad.Seed = Math.random(); 10 ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 50); 11 this.Ads[ad.Seed] = ad; 12 ad.Image.Parent = ad; 13 ad.style.position = "absolute"; 14 ad.style.left = 0; 15 ad.style.top = 0; 16 ad.style.zIndex=999999; 17 ad.Image.src = imgUrl; 18 ad.Image.onmouseover = function () { this.Parent.AutoMove = false; } 19 ad.Image.onmouseout = function () { this.Parent.AutoMove = true; } 20 if (strLink) { 21 ad.href = strLink; 22 ad.Image.border = 0; 23 ad.target = "_blank"; 24 } 25 ad.appendChild(ad.Image); 26 document.body.appendChild(ad); 27 return ad; 28 }, 29 "Float": function (floatId) { 30 var ad = this.Ads[floatId]; 31 if (ad.AutoMove) { 32 var curLeft = parseInt(ad.style.left); 33 var curTop = parseInt(ad.style.top); 34 if (ad.offsetWidth + curLeft > document.body.clientWidth + document.body.scrollLeft - 1) { 35 curLeft = document.body.scrollLeft + document.body.clientWidth - ad.offsetWidth; 36 ad.DirH = false; 37 } 38 if (ad.offsetHeight + curTop > document.body.clientHeight + document.body.scrollTop - 1) { 39 curTop = document.body.scrollTop + document.body.clientHeight - ad.offsetHeight; 40 ad.DirV = false; 41 } 42 if (curLeft < document.body.scrollLeft) { 43 curLeft = document.body.scrollLeft; 44 ad.DirH = true; 45 } 46 if (curTop < document.body.scrollTop) { 47 curTop = document.body.scrollTop; 48 ad.DirV = true; 49 } 50 ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px"; 51 ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px"; 52 } 53 } 54 }
注:加入到具体.aspx页面后,发现由于页面中div太多,图片并不在最上方(囧)。百度后,说更改z-index(css属性)的值,如设置为z-index:9999;设置之后还是不行,最后找了专业美工(感谢子杰),美工看了js后,说js的问题,在16行加了ad.style.zIndex=999999;测试成功。
2.页面<head>添加js的引用,我的名字叫piao.js
<script type="text/javascript" src="js/piao.js"></script>
3.页面<body>添加具体div实现。
1 <div style="width:10px;height:10px;"> 2 <script type="text/javascript"> 3 Rimifon.NewFloatAd("img/0biye/0.jpg", "front/tDODetail.aspx?type=source&id=73"); 4 </script> 5 </div>
注:.NewFloatAd(“图片地址”,“链接地址”)函数里面的两个参数分别是 图片地址 和 链接地址。
标签:
原文地址:http://www.cnblogs.com/al3302/p/4585350.html