本文实例讲述了js实现漂浮广告的方法。分享给大家供大家参考。具体如下:
具体代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="moveobj.js"> </script> <script type="text/javascript"> var flyimage1, flyimage2, flyimage3 function pagestart(){ flyimage1=new Chip("flyimage1",47,68); flyimage2=new Chip("flyimage2",47,68); flyimage3=new Chip("flyimage3",47,68); movechip("flyimage1"); movechip("flyimage2"); movechip("flyimage3"); } if (window.addEventListener) window.addEventListener("load", pagestart, false) else if (window.attachEvent) window.attachEvent("onload", pagestart) else if (document.getElementById) window.onload=pagestart </script> </head> <body> <DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;"> <A><IMG SRC="img/1.gif" BORDER=0></a> </DIV> <DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;"> <A><IMG SRC="img/2.gif" BORDER=0></a> </DIV> <DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;"> <A><IMG SRC="img/3.gif" BORDER=0></a> </DIV> </body> </html>
moveobj.js:
var vmin=2; var vmax=5; var vr=2; var timer1; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function Chip(chipname,width,height){ this.named=chipname; this.vx=vmin+vmax*Math.random(); this.vy=vmin+vmax*Math.random(); this.w=width+20; this.h=height; this.xx=0; this.yy=0; this.timer1=null; } function movechip(chipname){ if (document.getElementById){ eval("chip="+chipname); if (window.innerWidth || window.opera){ pageX=window.pageXOffset; pageW=window.innerWidth-40; pageY=window.pageYOffset; pageH=window.innerHeight-20; } else if (document.body){ pageX=iecompattest().scrollLeft; pageW=iecompattest().offsetWidth-40; pageY=iecompattest().scrollTop; pageH=iecompattest().offsetHeight-20; } chip.xx=chip.xx+chip.vx; chip.yy=chip.yy+chip.vy; chip.vx+=vr*(Math.random()-0.5); chip.vy+=vr*(Math.random()-0.5); if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx; if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx; if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy; if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy; if(chip.xx<=pageX){ chip.xx=pageX; chip.vx=vmin+vmax*Math.random(); } if(chip.xx>=pageX+pageW-chip.w){ chip.xx=pageX+pageW-chip.w; chip.vx=-vmin-vmax*Math.random(); } if(chip.yy<=pageY) {chip.yy=pageY; chip.vy=vmin+vmax*Math.random(); } if(chip.yy>=pageY+pageH-chip.h) {chip.yy=pageY+pageH-chip.h; chip.vy=-vmin-vmax*Math.random(); } document.getElementById(chip.named).style.left=chip.xx+"px"; document.getElementById(chip.named).style.top=chip.yy+"px"; chip.timer1=setTimeout("movechip('"+chip.named+"')",100); } }
运行效果图:
此特效包含的文件:
希望本文所述对大家的javascript程序设计有所帮助。
本文向大家介绍基于JavaScript代码实现随机漂浮图片广告,包括了基于JavaScript代码实现随机漂浮图片广告的使用技巧和注意事项,需要的朋友参考一下 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐。 代码一: 代码如下: 以上代码实现了我们的要求
本文向大家介绍js实现左右两侧浮动广告,包括了js实现左右两侧浮动广告的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现左右浮动广告展示的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍JavaScript实现带缓冲效果的随屏滚动漂浮广告代码,包括了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码。分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作
本文向大家介绍js实现图片漂浮效果的方法,包括了js实现图片漂浮效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下: 描述:打开网页就看到不停在飘动的图片,点击连接到其他页面;起到着重强调的效果! 希望本文所述对大家的javascript程序设计有所帮助。
本文向大家介绍用js屏蔽被http劫持的浮动广告实现方法,包括了用js屏蔽被http劫持的浮动广告实现方法的使用技巧和注意事项,需要的朋友参考一下 最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告。 后来越来越多同事反映在家里不同浏览器也会出现广告。然后深入检查了下,发现网站竟然被劫持了。 然后百度了一大堆资料,什么http劫持、dns劫持、运营商劫持之类的,确定真的是中招
本文向大家介绍JS实现关闭小广告特效,包括了JS实现关闭小广告特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现关闭小广告特效的具体代码,供大家参考,具体内容如下 知识点 1、获取元素 2、通过元素获取父元素 3、删除节点 4、设置元素隐藏 运行效果 直接删除 隐藏 代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍Android 知乎广告效果实现代码,包括了Android 知乎广告效果实现代码的使用技巧和注意事项,需要的朋友参考一下 知乎的广告效果一直想写,无奈最近才有时间。 先看效果: 肯定要自定义view了,一个类似imageView的控件,还要给它一个值用来指定广告图片的显示位置。 问题: 1.图片如何在范围内(单个item范围)上下移动,如窗户一般,后面的图是可以动的,但是窗户是固定的
本文向大家介绍JS实现很实用的对联广告代码(可自适应高度),包括了JS实现很实用的对联广告代码(可自适应高度)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现很实用的对联广告代码(可自适应高度)。分享给大家供大家参考。具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能。 运行效果截图如下: 在线演示