//用脚本使广告随滚动条滚动 window.onload=initial; window.onscroll=move; var objAdver;//层对象 var objTop;//头部 var objLeft;//左边 function initial(){ objAdver=document.getElementById("right");//广告层对象 if(objAdver.currentStyle){//IE浏览器取层的位置:头部位置与左边位置 objTop=parseInt(objAdver.currentStyle.top); objLeft=parseInt(objAdver.currentStyle.left); }else{//非IE浏览器取层的位置方式 objTop=parseInt(document.defaultView.getComputedStyle(objAdver,null).top); objLeft=parseInt(document.defaultView.getComputedStyle(objAdver,null).left); } } function move(){//滚动条移动事件 //重新设置广告层的位置 objAdver.style.top=objTop+parseInt(document.documentElement.scrollTop)+"px"; objAdver.style.left=objLeft+parseInt(document.documentElement.scrollLeft)+"px"; } $(document).ready(function(){ //弹出广告 window.open("open.html"); //用样式使广告随滚动条滚动 //$("#right").css("position","fixed"); //点击滚动广告的X可以关闭广告 $(".dd_close").click(function(){ $("#right").css("display","none"); }); //轮换显示广告 //给数字栏1加一个默认样式 $("#scroll_number li:first").addClass("scroll_number_over"); //轮换横幅广告图片 var isscroll=false; var index=1; setInterval(function(){ if(isscroll) return; $("#scroll_img li:visible").hide(); $("#scroll_img li:eq("+index+"):hidden").show(); $("#scroll_number li:eq("+index+")").addClass("scroll_number_over"); $("#scroll_number li:eq("+(index-1)+")").removeClass("scroll_number_over"); index++; if(index==6){ index=0;} },1500); //鼠标移动至数字栏改变样式 $("#scroll_number li").hover( function(){ isscroll=true; index=parseInt(($(this).text())-1); $("#scroll_number li").removeClass("scroll_number_over"); $("#scroll_number li:eq("+index+")").addClass("scroll_number_over"); $("#scroll_img li:visible").hide(); $("#scroll_img li:eq("+index+"):hidden").show(); }, function(){ isscroll=false;}); //鼠标移动至图片,停止 $("#scroll_img").hover( function(){ isscroll=true}, function(){isscroll=false }); //TAB切换 $("#history").mouseover(function(){ $(this).addClass("book_type_out").siblings().removeClass("book_type_out"); $("#book_history:hidden").show().siblings().hide(); }); $("#family").mouseover(function(){ $(this).addClass("book_type_out").siblings().removeClass("book_type_out"); $("#book_family:hidden").show().siblings().hide(); }); $("#culture").mouseover(function(){ $(this).addClass("book_type_out").siblings().removeClass("book_type_out"); $("#book_culture:hidden").show().siblings().hide(); }); $("#novel").mouseover(function(){ $(this).addClass("book_type_out").siblings().removeClass("book_type_out"); $("#book_novel:hidden").show().siblings().hide(); }); //滚动栏 var b=true; var marginTop =0; setInterval(function(){ if(isscroll) return;//判断运行和停止 $("#express li:first").animate({marginTop:marginTop--},0,function(){ var $f = $(this); if(!$f.is(":animated")) { //判断是否有一个动画节点 if (marginTop<0 && b) { //开始移动时,并且b为true时执行 $li = $f.clone(); //克隆一个节点 $li.css("margin-top","0px"); //重新设置样式 $li.appendTo($("#express")); //把新克隆的节点复制到后面去 b=false; //b为false } } if((-marginTop)>=$f.height()){ $("#express li:first").remove(); //移出去后删除 b=true; //b为true marginTop=0; //重新设置margTop为0; } }); },100); //滚动栏 //var marginTop=0; //setInterval(function(){ // $("#express li:first").animate({marginTop:marginTop--},10,function(){ // if(!($(this).is(":animated"))){ // if((-marginTop)>$(this).height()){ // $(this).css("margin-top", "0px"); // $(this).appendTo($("#express")); //把第一个节点移到ul后面 // marginTop = 0; // } // } // }); //},10); $("#express").mouseover(function(){ //li鼠标移入,停止移动 isscroll=true; }); $("#express").mouseout(function(){ isscroll=false; }); //Tab鼠标移至图片和文字给它加样式 $("#book_history dd").hover( function(){$(this).css("background","#ccc");}, function(){$(this).css("background","none"); }); });
滚动栏改进,table切换,使广告随滚动条滚动
最新推荐文章于 2026-06-17 10:40:45 发布
本文介绍了一种使用脚本让网页广告随着滚动条滚动的方法,同时实现了广告的弹出、关闭功能及轮播效果。此外,还展示了如何通过鼠标交互控制广告轮播,并实现了TAB切换效果和滚动栏的动态更新。

473

被折叠的 条评论
为什么被折叠?



