jQuery可拖动图片漂浮广告代码
以上只是部份演示图片，详细可以付费购买。
<!doctype html>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery可拖动图片漂浮广告代码</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
/*conent start*/
.conent{width:90px;height:120px;position:absolute;top:20px;}
.conent .sition{width:90px;height:120px;position:relative;}
.conent .sition .c_header{width:90px;text-align:center;cursor:move;}
.conent .sition .c_header .txt{color:#00CC00;font-weight:600;font-size:15px;line-height:30px;box-shadow:1px 1px 1px 1px #000;text-shadow:1px 1px 1px #000;}
.conent .sition .c_adver{width:90px;height:90px;background:url("images/back.gif") no-repeat;cursor:pointer;}
.conent .sition .sign{width:0px;height:10px;border:2px solid #000;display:block;position:absolute;top:27px;left:46px;}
/*end conent*/
/*data start*/
.data{width:260px;height:130px;margin:255px auto;color:#036;}
.data p{line-height:20px;}
.data p .high{color:red;}
.data p .dispaly{color:#00F;}
/*end data*/
</style>
</head>
<body>
<!--conent start-->
<div class="conent">
<div class="sition">
<div class="c_header"><strong class="txt">杜绝广告</strong></div>
<div class="c_adver"></div>
<i class="sign"></i>
</div>
</div>
<!--end conent-->
<!--data start-->
<div class="data">
<p>浏览器总<span class="high">高度</span>为：<span class="dispaly" id="liulan">0px</span></p>
<p>拖动时元素距浏览器顶部<span class="high">高度</span>为；<span class="dispaly" id="text">0px</span></p>
<p>当前元素距浏览器动态<span class="high">高度</span>为；<span class="dispaly" id="textone"></span></p>
<p>浏览器总<span class="high">宽度</span>为：<span class="dispaly" id="sumwid">0px</span></p>
<p>拖动时元素距浏览器顶部<span class="high">宽度</span>为；<span class="dispaly" id="dywid">0px</span></p>
<p>当前元素距浏览器动态<span class="high">宽度</span>为；<span class="dispaly" id="timewid"></span></p>
<p>双击小熊可 remove</p>
</div>
<!--end data-->
<script type="text/javascript" src="//xcdn.php.cn/js/ads/jQuery可拖动图片漂浮广告代码/js/jquery-1.11.2.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);
$(this).find(".c_adver").css({"background":"url('//xcdn.php.cn/js/ads/jQuery可拖动图片漂浮广告代码/images/no.gif')","bakcground-repeat":"no-repeat"});
$(this).find(".txt").text("放开我!!!");
}).mouseout(function(){
action();
$(this).find(".txt").text("杜绝广告");
$(this).find(".c_adver").css({"background":"url('//xcdn.php.cn/js/ads/jQuery可拖动图片漂浮广告代码/images/back.gif')","bakcground-repeat":"no-repeat"});
});
$(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
},3);
},15);
};
$(".conent .c_adver").dblclick(function(){
$(this).parents(".conent").slideUp(500,function(){
$(this).remove();
clearInterval(timer);
});
});
var state;/*拖动锁*/
$(".c_header").mousedown(function(event){
state=false;
var x=event.clientX;
var y=event.clientY;
var obj=$(this).parents(".conent");
var c_left=obj.offset().left;
var c_top=obj.offset().top;
$(document).mousemove(function(e){
if(!state){
var x1=e.clientX;
var y1=e.clientY;
var action_left=x1-x+c_left;
var action_top=y1-y+c_top;
if(action_left<=0){action_left=0;};
if(action_top<=0){action_top=0;}
if(action_left>=win_width){action_left=win_width;};
if(action_top>=win_height){action_top=win_height;};
obj.css({top:action_top,left:action_left});
_left=action_left;
_top=action_top;
$("#text").html(_top+"px");
$("#dywid").html(_left+"px");
};
}).mouseup(function(){
state=true;
});
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="#" target="_blank">牛牛论坛</a></p>
</div>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
页:
[1]