素材网 素材网

jQuery制作可拖动漂浮广告图片插件

下载资源()次

阅读次数()次

发布时间:2015-04-08

jQuery制作可拖动漂浮广告图片插件
分享到:

用法简介:

来源:xw素材网

jQuery制作可拖动漂浮广告图片插件。
文件引用:

<script type="text/javascript" src="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('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>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。