很经典的jQuery漂浮广告代码

Joker • • 前端笔记 • 278 阅读

    jQuery漂浮广告代码，很经典的浮动广告，到目前都还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。用jQuery兼容性好，可关闭，鼠标移动在上面时可关闭 ，可控制漂浮速度，稍微改改样式和图片就可使用。

jQuery漂浮广告代码

点击查看演示







jQuery漂浮广告代码

* {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
font-family: "微软雅黑";
color: #666;
}
.conent {
width: 90px;
height: 120px;
position: absolute;
top: 20px;
z-index:99999999999999;
}
.conent .sition {
width: 90px;
height: 120px;
position: relative;
}
.conent .sition .c_adver {
width: 90px;
height: 90px;
}
.conent .sition .c_adver img {
width: 90px;
height: 90px;
}
.conent .close {
width: 16px;
height: 16px;
line-height: 14px;
font-size: 16px;
cursor: pointer;
text-align: center;
color: #000;
border: 1px solid #000;
border-radius: 100px;
position: absolute;
top: -10px;
right: -6px;
}
X
$(function(){ var timer=null;  //定时器 var _left=0;    //默认left距离 var _top=20;   //默认top距离 var top_folg=false;/*控制高度-锁*/ var left_folg=true;/*控制宽度-锁*/ //获取并计算浏览器初始宽度 var win_width=$(window).width()-$(".conent").width(); //获取并计算浏览器初始高度 var win_height=$(window).height()-$(".conent").height(); $("#liulan").html(win_height+"px"); $("#sumwid").html(win_width+"px"); action();//执行走动 $(".conent").mouseover(function(){ clearInterval(timer); }).mouseout(function(){ action(); }); $(window).resize(function(){ conobj=$(".conent"); win_width=$(window).width()-conobj.width(); win_height=$(window).height()-conobj.height(); $("#liulan").html(win_height+"px"); $("#sumwid").html(win_width+"px");; }); function action(){ timer=setInterval(function(){ if(!top_folg){ _top++; if(_top>=win_height){top_folg=true;}; }else{ _top--; if(_top<=0){top_folg=false;}; }; if(left_folg){ _left++; if(_left>=win_width){left_folg=false;}; }else{ _left--; if(_left<=0){left_folg=true;}; }; $("#textone").html(_top+"px"); $("#timewid").html(_left+"px"); $(".conent").animate({ left:_left, top:_top },1);//数字越大，速度越慢 },15); }; //点击关闭 $(".conent .close").click(function(){ $(this).parents(".conent").slideDown(500,function(){ $(this).remove(); clearInterval(timer); }); }); });