jQuery漂浮廣告代碼，很經典的浮動廣告，到目前都還很實用，如果你是一位站長的話，這種代碼是必備的，希望對你有用處。用jQuery兼容性好，可關閉，鼠標移動在上面時可關閉 ，可控制漂浮速度，稍微改改樣式和圖片就可使用。
效果演示地址：http://tangjiusheng.com/jQuery/page20180922.html
很經典的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);
});
});
});
閱讀更多 湯久生前端 的文章
關鍵字: jQuery JavaScript HTML
