网页添加飘动窗口（图片链接）+ IE8下js解析错误

需求：在网站首页添加一个四处浮动的窗口（实际是一个图片，单击是一个地址链接）。

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(“图片地址”，“链接地址”)函数里面的两个参数分别是图片地址和链接地址。

-----------------------------------分割线-----------------------------------

问题描述：挂上之后出现了IE8下js解析错误的问题，网页左下角提示“网页上有错误”，点开后提示为：Parsing Error:Unable to modify the parent container element before the child element is closed.

查了一下说是可能 “页面未加载完前js代码操作了body里的元素，将相关js代码移到</body>后面”。（http://www.cnblogs.com/acker/archive/2011/07/27/2117927.html）

重新修改了一下<body>里的div，将div里的 “Rimifon.NewFloatAd("img/0biye/0.jpg", "front/tDODetail.aspx?type=source&id=73");” 移到<body>标签外就可以了。

1 </body>
2
3 <script type="text/javascript">
4 Rimifon.NewFloatAd("img/0biye/0.jpg", "front/tDODetail.aspx?type=source&id=73");
5 </script>
6
7 </html>

推荐：一个IE版本测试软件，IETester，可以用来测试IE5.5、6、7、8版本上的js显示效果。

转载于:https://www.cnblogs.com/al3302/p/4585350.html

网页添加飘动窗口（图片链接）+ IE8下js解析错误相关推荐

网页php载入live2d,给网页添加Live2D和图片不显示解决方法
给网页添加Live2D和图片不显示解决方法 ! 小白教程之给网页添加Live2D https://www.jianshu.com/p/1cedcf183633 window10下搭建php的运行环境 ...
【OpenGL】二十四、OpenGL 纹理贴图 ( 读取文件内容 | 桌面程序添加控制台窗口 | ‘fopen‘: This function may be unsafe 错误处理 )
文章目录一.文件读取二.报错处理 ( 'fopen': This function or variable may be unsafe. ) 三.桌面程序添加控制台窗口四.相关资源一.文件读取 ...
IE8下JS报indexOf不存在问题
原因分析: 这是一个js bug, 在IE8下,js数组没有indexOf方法,会报错:而在其它浏览器下(Firefox, Chrome, IE9)都是正常的. 解决方案: 1.,页面初始化时判断是否 ...
C语言绘制立体窗口,制作立体风格网页上传窗口图片的PS教程
各种各样的对话框,对于我们来说,太常见了.发微博和在网站上上传图片,我们都会遇到图片上传的对话框.今天,参考了网上的一个图片,我们制作了一个超级简单的图片上传对话框. 本教程主要使用Photoshop ...
在chrome网页上通过点击链接或执行js打开本地文件夹
用来能在网页上方便的打开常用文件夹或文件. 方法: 下面文件放到c:/tools/位置: 执行mycall.reg添加注册信息: 试试在chrome里点击<a href="mycall ...
给网页添加背景图片1
我们在打开博客的时候,有时会看到有的网页添加了背景图片.从而让网页增加了不少的乐趣.一个好的背景可以更好体现网站的风格.也让自己的网站与众不同.赏心悦目的图片可以让人眼前一亮. 同样,我们在网站制作过 ...
win7系统计算机无最小化,win7纯净版系统任务栏无法显示网页最小化窗口怎么办...
最近有位用户说win7纯净版任务栏无法显示网页最小化窗口,一般情况下,我们在使用浏览器完都会直接点击窗口最小化,网页窗口最小化到任务栏上.要使用的时候只要单击就可以将任务栏浏览器恢复到最大化,以方便网 ...
HTML学习笔记4：如何给网页添加图片和超链接
今天,我学习了如何给网页添加图片和超链接,学习html越多,我就可以给网页增添越多的元素,就像我精心培育的一篇花圃,今天迎进紫罗兰,明天种下红玫瑰,学到越多的技能,我就越开心,越期待春风拂过惺忪的大地 ...
解决IE8下父容器背景图片不显示的问题
我们发现在IE8下不能显示背景图片的原因是因为子容器使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法 ...

网页添加飘动窗口（图片链接）+ IE8下js解析错误

网页添加飘动窗口（图片链接）+ IE8下js解析错误相关推荐

最新文章

热门文章