&&&&div+css实现的两侧浮动广告JS代码
div+css实现的两侧浮动广告JS代码
很好用的 div+css实现的两侧浮动广告JS代码.div+css 教程。
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
开发技术下载排行1762人阅读
Web技术（2）
&以带关闭按钮的浮动关高为例，其实现思路如下：
1.在Dreamweaver中创建两个div（绝对）层，一个存放广告图片，一个存放关闭按钮，关闭按钮层要嵌入广告层；
2.通过document.getElementById()方法获取要操作的对象（以上两个层）；
3.用&document.getElementById("adv").style.pixelTop=document.documentElement(body).scrollTop+100&这行代码来动态改变广告层距离浏览器的上边距来实现广告层随着滚轮的浮动。
具体实现代码如下：
（方法一）：
&mce:script type="text/javascript" language="javascript"&&!--
function move(){
document.getElementById("adv").style.pixelTop=document.documentElement.scrollTop+100;
window.onscroll=
function closeMe(){
document.getElementById("closeMe").style.display="none";
// --&&/mce:script&
&div id="adv" style="position:" mce_style="position:"&广告层
&div id="closeMe" style="position:absolution" mce_style="position:absolution"&关闭按钮层&/div&
（方法二）：
&mce:script type="text/javascript" language="javascript"&&!--
var advInitTop=0;
var closeMeIntitTop=0;
function init(){
advInitTop=document.getElementById("adv").style.pixelT
closeMeIntitTop=document.getElementById("closeMe").style.pixelT
function move(){
document.getElementById("adv").style.pixelTop=advInitTop+document.documentElement.scrollT
window.onscroll=
function closeMe(){
document.getElementById("closeMe").style.display="none";
// --&&/mce:script&
&body onload="init()"&
&div id="adv" style="position:" mce_style="position:"&广告层
&div id="closeMe" style="position:absolution" mce_style="position:absolution"&关闭按钮层&/div&
当然方法不限于以上两种。
注：&documentElement符合W3C标准，任何浏览器都支持，而body仅仅支持IE&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：51831次
积分：1448
积分：1448
排名：千里之外
原创：70篇
评论：57条
(1)(3)(5)(4)(1)(4)(17)(4)(15)(4)(6)(5)(4)当前位置： &
网页两边对联浮动广告代码 - 网页特效代码演示 - 特效代码运行&
此特效飘浮于网页两侧位置，自动跟随页面的翻动飘浮，效果非常好，如果这个特效不是你想要的效果，这里还有几个可关闭的对联浮动广告代码提供给你参考：，提供的是在线演示效果。
好下面讲解这个特效的使用方法：
1、在BODY内加入以下代码:&
&&DIV&id=floater1&style="Z-INDEX:&100;&LEFT:&10&VISIBILITY:&&WIDTH:&100&POSITION:&&TOP:&160&height:&100"&&&&& 左的|西,可以是D片,表格&& &&/DIV&&&& &&DIV&id=floater&style="Z-INDEX:&100;&RIGHT:&10&VISIBILITY:&&WIDTH:&100&POSITION:&&TOP:&160&left:&890"&&&&& 右的|西,可以是D片,表格&& &&/DIV&&"&& menus.js的代码如下:&& self.onError&=&&& currentX&=&currentY&=&0;&&& whichIt&=&&&& lastScrollX&=&0;&lastScrollY&=&0;&& NS&=&(document.layers)&?&1&:&0;&& IE&=&(document.all)&?&1:&0;&& function&heartBeat(objectid)&{&& if(IE)&{&diffY&=&document.body.scrollT&diffX&=&document.body.scrollL&}&& if(NS)&{&diffY&=&self.pageYO&diffX&=&self.pageXO&}&& if(diffY&!=&lastScrollY)&{&& percent&=&.1&*&(diffY&-&lastScrollY);&& if(percent&&&0)&percent&=&Math.ceil(percent);&& else&percent&=&Math.floor(percent);&& if(IE)&{&& objectid&=&objectid.split(";");&&& for&(i&=&0;&i&&&objectid.&i++)&eval("document.all."+objectid[i]).style.pixelTop&+=&&& }&&& if(NS)&{&& objectid&=&objectid.split(";");&&& for&(i&=&0;&i&&&objectid.&i++)&eval("document."+objectid[i]).top&+=&&&& }&&& lastScrollY&=&lastScrollY&+&&& }&& if(diffX&!=&lastScrollX)&{&& percent&=&.1&*&(diffX&-&lastScrollX);&& if(percent&&&0)&percent&=&Math.ceil(percent);&& else&percent&=&Math.floor(percent);&& if(IE)&{&& objectid&=&objectid.split(";");&&& for&(i&=&0;&i&&&objectid.&i++)&eval("document.all."+objectid[i]).style.pixelLeft&+=&&& }&&& if(NS)&{&& objectid&=&objectid.split(";");&&& for&(i&=&0;&i&&&objectid.&i++)&eval("document."+objectid[i]).left&+=&&&& }&&& lastScrollX&=&lastScrollX&+&&& }&&& }&& if(NS&||&IE)&action&=&window.setInterval("heartBeat(’floater1’)",&2);&
OK,成功就这么简单!DIV内的文字可以换成图片和表格,ID不改就行了... 另外,记得以上代码为了不干扰本文章的显示,在"&&"中多加了空格,拷贝到文档以后记得修改. 除了上述方法之外,还另从其他网站搜集到另一种实现方法,方法如下: 在显示页面中加入:&
&&SCRIPT&language="JavaScript"&src="js/flr.js"&&&&/SCRIPT&&&& &&SCRIPT&language="JavaScript"&src="js/fll.js"&&&&/SCRIPT&&&
飘浮在右侧浮动广告代码flr.js：
var&imgheight&& document.ns&=&navigator.appName&==&"Netscape"&& window.screen.width&800&?&imgheight=100:imgheight=120&& function&myload()&& {&& if&(navigator.appName&==&"Netscape")&& {document.dangdang.pageY=pageYOffset+window.innerHeight-imgheight-0;&& document.dangdang.pageX=+window.innerWidth-107;&& mymove();&& }&& else&& {&& dangdang.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight-0;&& dangdang.style.left=document.body.offsetWidth-107;&& mymove();&& }&& }&& function&mymove()&& {&& if(document.ns)&& {&& document.dangdang.top=pageYOffset+window.innerHeight-imgheight-0;&& document.dangdang.left=pageXOffset+window.innerWidth-107;&& setTimeout("mymove();",50)&& }&& else&& {&& dangdang.style.top=document.body.scrollTop+document.body.offsetHeight-imgheight-0;&& dangdang.style.left=document.body.scrollLeft+document.body.offsetWidth-107;&& setTimeout("mymove();",50)&& }&& }&& function&MM_reloadPage(init)&{&//reloads&the&window&if&Nav4&resized&& if&(init==true)&with&(navigator)&{if&((appName=="Netscape")&&(parseInt(appVersion)==4))&{&& document.MM_pgW=innerW&document.MM_pgH=innerH&onresize=MM_reloadP&}}&& else&if&(innerWidth!=document.MM_pgW&||&innerHeight!=document.MM_pgH)&location.reload();&& }&& MM_reloadPage(true)&& if&(navigator.appName&==&"Netscape")&& {&& document.write("href=#’&&src=’*.GIF’&width=’80’&height=’80’&");&& myload()}&& else&& {&& document.write("&& ");&& myload()&& }&
飘浮在左侧浮动广告代码fll.js：
var&imgheight&& var&imgleft&& document.ns&=&navigator.appName&==&"Netscape"&& window.screen.width&800&?&imgheight=110:imgheight=110&& window.screen.width&800&?&imgleft=5:imgleft=5&& function&myload()&& {&& if&(navigator.appName&==&"Netscape")&& {document.myleft.pageY=pageYOffset+window.innerHeight-&& document.myleft.pageX=&& leftmove();&& }&& else&& {&& myleft.style.top=document.body.scrollTop+document.body.offsetHeight-&& myleft.style.left=&& leftmove();&& }&& }&& function&leftmove()&& {&& if(document.ns)&& {&& document.myleft.top=pageYOffset+window.innerHeight-imgheight&& documen&& t.myleft.left=&& setTimeout("leftmove();",80)&& }&& else&& {&& myleft.style.top=document.body.scrollTop+document.body.offsetHeight-&& myleft.style.left=&& setTimeout("leftmove();",80)&& }&& }&&& function&MM_reloadPage(init)&{&//reloads&the&window&if&Nav4&resized&& if&(init==true)&with&(navigator)&{if&((appName=="Netscape")&&(parseInt(appVersion)==4))&{&& document.MM_pgW=innerW&document.MM_pgH=innerH&onresize=MM_reloadP&}}&& else&if&(innerWidth!=document.MM_pgW&||&innerHeight!=document.MM_pgH)&location.reload();&& }&& MM_reloadPage(true)&& if&(navigator.appName&==&"Netscape")&& {&& document.write("href=’/'&width=’80’&height=’80’&");&& myload()}&& else&& {&& document.write("&& ");&& myload()&& }
到这里就结束了，这是你想要的对联浮动广告代码效果吗？
如果你还需要更多的广告代码下载，请访问： 广告代码大全。
刚被其它网友点击的网页特效&
特效标题预览特效点击运行特效
搜索查询面板&
本月特效排行&
本周特效排行&
本日特效排行&jQuery 浮动广告实现代码-jquery
用jquery实现的浮动广告代码,需要的朋友可以参考下。
实现方法： 复制代码 代码如下:&!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& &title&浮动广告&/title& &style type="text/css"& #qqonline{ background-color: border: 1px solid # position: top:100 left:16 width:100 height:120 } #qqonline1{ background-color: border: 1px solid # position: top:100 right:16 width:100 height:120 } &/style& &script src="../js/jquery-1.2.6.js" type="text/javascript"&&/script& &script type="text/javascript"& $(this).scroll(function() { // 页面发生scroll事件时触发 var bodyTop = 0; if (typeof window.pageYOffset != 'undefined') { bodyTop = window.pageYO } else if (patMode != 'undefined' && patMode != 'BackCompat') { bodyTop = document.documentElement.scrollT } else if (typeof document.body != 'undefined') { bodyTop = document.body.scrollT } $("#qqonline").css("top", 100 + bodyTop) // 设置层的CSS样式中的top属性, 注意要是小写，要符合“标准” $("#qqonline").text(bodyTop); // 设置层的内容，这里只是显示当前的scrollTop $("#qqonline1").css("top", 100 + bodyTop) $("#qqonline1").text(bodyTop); }); &/script& &/head& &body style="height:1800px"&&!-- 给BODY加个样式，让页面出现滚动条 --& &form id="form1" runat="server"& &/form& &div id="qqonline"& QQ在线服务 &/div& &div id="qqonline1"& QQfsdf在线服务 &/div& &/body& &/html& 基于jquery的 浮动广告 控制代码 最近接触jquery,学了点皮毛,为了满足boss的需求弄了个相对屏幕静止的浮动层,把代码记在这里,以防自己以后用到 下面是jquery代码,需要jquery类库的支持才能运行,我写文章的时候jquery的版本是1.3.2,不保证其他的版本能完美运行,代码的基本原理写在注释里,如果你看不懂,那么你需要补充javascript和jquery的基本知识,不用太多,因为我写这个的时候也不会什么.... $(document).ready(function(){ $(window).scroll( function() { //这个函数可以监视浏览器滚动条,只要滚动条一移动,此函数就触发 var diffY = $(window).scrollTop();//页面现在的位置和滚动条顶端的距离[scrollTop()] var diffH = $(window).height()/4;//设计者期望的浮动栏与浏览器顶端的距离[height()],这里是与浏览器顶端保持1/4个页面的高度,如果diffH的值设置成0,浮动栏就会落在屏幕顶端 var percent=diffY+diffH; //percent将被赋值给css中的"top"属性,作为浮动栏的新高度值 if(percent&0){ //判断percent的值是否小于0,小于0就凑整,大于0就忽略小数部分 percent=Math.ceil(percent); }else{ percent=Math.floor(percent); //取整 var v = percent+"px"; //css的属性需要一个单位,这里是px $("#adright").css("top",v);//percent被赋值给top属性,浏览器根据这个值动态的调整浮动栏的高度,如果按照上面给的代码,这个高度将正好让浮动栏一直保持在屏幕中央 } }); ///////////////////////////////////////////// JS和HTML 的分割线 ///////////////////////////////////////////////////////////////////// 下面是HTML代码,只要把这部分放在HTML页面中就行了,动态页面php,jsp,asp等应该也没问题.....我是放在页面尾部&/body&的上方的,想放图片,文字,flash就放在&div&XXXX&/div&中的XXXX位置就可以了,如果想浮动在页面左面,就把right:25改成left:25 &div id="adright" style = "right:25 position: top:200"&&a href="http://www.jb51.net"&脚本之家&/a&&/div&