码迷,mamicode.com
首页 > Web开发 > 详细

网页添加飘动窗口(图片链接)

时间:2015-06-18 13:24:00      阅读:360      评论:0      收藏:0      [点我收藏+]

标签:

需求:在网站首页添加一个四处浮动的窗口(实际是一个图片,单击是一个地址链接)。

 

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!