jQuery漂浮广告图片可拖动位置效果



143 568 190



特效描述:漂浮广告 图片可拖动位置 图片拖动效果,在浏览器自动漂浮,可拖动

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

2. HTML代码

<!--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">
	$(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('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('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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 拖动拽动 悬浮浮动漂浮 浮动提示框 html5弹窗动画 html5动画h5动画 html5按钮动画 图片拖动 图片广告 html5图片动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到