WEB前端jQuery漂浮广告代码

释放双眼,带上耳机,听听看~!
jQuery漂浮广告代码,很经典的浮动广告,到目前都还很实用,如果你是一位站长的话,这种代码是必备的,希望对你有用处。用jQuery兼容性好,可关闭,鼠标移动在上面时可关闭 ,可控制漂浮速度,稍微改改样式和图片就可使用。
<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="#" target="_blank"><img src="/image/b.jpg">a>
div>
<span class="close">Xspan>
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>

内容投诉

人已赞赏
前端开发

使用用jquery做的弹幕特效

2018-11-5 10:28:44

前端开发

ajax同步模式和异步模式的区别

2018-11-5 14:57:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索