jQuery漂浮廣告圖片可拖動位置效果



114 454 152



特效描述:漂浮廣告 圖片可拖動位置 圖片拖動效果,在瀏覽器自動漂浮,可拖動

代碼結構

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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 拖動 拖拽 拖動插件 拖拽插件 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 圖片拖動 圖片拖拽 圖片廣告 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子