很经典的jQuery漂浮广告代码

分类：jQuery教程时间：2018-09-22 15:04:03

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

jQuery漂浮广告代码

<!Doctype html>
<html>
<head>
<meta charset="gb2312">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery漂浮广告代码</title>
<style type="text/css">
* {
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;
}
</style>
</head>
<body>
<div class="conent">
<div class="sition">
<div class="c_adver">
<a href="http://tangjiusheng.com/" target="_blank"><img src="http://tangjiusheng.com/d/file/image/20180922/xue.jpg"></a>
</div>
<span class="close">X</span>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(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);
});
});
});
</script>
</body>
</html>

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/jQuery/156.html

关注下头条号后，请私信将免费分享给你一份web前端资料！
立即关注

大家都在看

很经典的jQuery漂浮广告代码