注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

以拖拽方式在图片上添加热链接

jQuery教程 fishcity 970浏览

以拖拽方式在图片上链接

项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后找开相关产品的介绍。其实按这个方式来说,实现起来不难,但产品经理那边要把图片按物件的位置切成不同的小图片,为此我大吵了一架,妈蛋的一个很普通的功能非要搞这么复杂么,最后坚持已见,用jquery写了个可以在图片添加锚点的功能。实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了,下面来看代码。

jquery教程:以拖拽方式在图片上链接教程

首入引入jquery库

<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>

构建html。

<div class="box">
	<input type="text" name="title">
	<input type="text" name="link" value="http://">
        <input type="button" value="添加链接" id="add">
	<input type="button" value="编辑" id="show">
</div>
<div class="img_box">
	<img src="images/55cc64813c330.jpg">
</div>

写上CSS,注意这里标签的位置是相对于图片的位置的,所以图片的img_box要加上position: relative;

*{padding: 0; margin: 0;}
.box{margin: 10px;}
.img_box{position: relative;}
.img_box .maodian{position: absolute; padding: 5px 10px; border-right: 5px; background: #000; 
			filter:alpha(opacity=40); 
			-moz-opacity:0.4; 
			opacity:0.4;
			top:10px;
			left:10px;
			color:#FFF;
			font-size: 12px;
			font-family: "宋体";
			cursor: pointer;
}
.maodian a{color: #FFF; text-decoration: none;}

写上JS

$(function(){
			var obj = null ;//定义标签对象的全局变量,目的用于编辑
			$("#add").click(function(){//绑定添加按钮单击事件
				var title = $("input[name=title]").val();//取得标题内容
				var link = $("input[name=link]").val();//取得超链接
				var html = "<p class='maodian'><a href='"+link+"'>"+title+"</a></p>";组装P标签
				$(".img_box").append(html); //添加到img_box div中,即图片的后面
			});

			$(".img_box").delegate(".maodian","mousedown",function(e){//绑定标签鼠标按下事件
				obj = $(this);//把当前标签对象赋值给变量
				if(obj.setCapture){ //用于兼容非准浏览器
					obj.setCapture();
				}
				$("input[name=title]").val(obj.find("a").text());//把点中标签的内容加到标题文本框中
				$("input[name=link]").val(obj.find("a").attr("href"));/把点中标签的链接加到链接本框中
			  	var _x = e.pageX - obj.offset().left;//取得鼠标到标签左边left的距离
			  	var _y = e.pageY - obj.offset().top; //取得鼠标到标签顶部top的距离
			  	var oWidth = $(this).outerWidth(); //取得标签的宽,包括padding
			  	var oHeight = $(this).outerHeight();//取得标签的高,包括padding
			  	var x=0,y=0; 定义移动的全局变量

			  	$(".img_box").bind("mousemove",function(e){
			  		var img_position = $(".img_box").offset(); //取得图片的位置
			  	 	 x = e.pageX -_x - img_position.left; //计算出移动的x值
			  	 	 y = e.pageY -_y - img_position.top; //计算出移动的y值
			  	 	if(x<0){ //如果移动小于0,证明移到了图片外,应设为0
			  	 		x = 0;
			  	 	}else if(x>($(".img_box img").width()-oWidth)){
			  	 	//如果移动大于图片的宽度减去标签的宽度,证明移到了图片外,应该设为可用的最大值
			  	 		x = $(".img_box img").width()-oWidth;
			  	 	}

			  	 	if(y<0){ //同上
			  	 		y = 0;
			  	 	}else if(y>($(".img_box img").height()-oHeight)){
			  	 		y = $(".img_box img").height()-oHeight;
			  	 	}
			  	 	obj.css({"left":x,"top":y});
			  	});

			  	$(".img_box").bind("mouseup",function(){ //绑定鼠标左键弹起事件
			  	 	$('.img_box').unbind("mousemove"); //移动mousemove事件
			  	 	$(this).unbind("mouseup"); //移动mouseup事件
			  	 	if(obj.releaseCapture){ //兼容非标准浏览器
						obj.releaseCapture();
					}
			  	 	
			  	});
			  	 return false; //用于选中文字时取消浏览器的默认事件
			});

			$(".img_box").delegate(".maodian","dblclick",function(){//绑定双击事件
				$(this).remove(); //删除当前标签
			})

			$("#show").click(function(){//绑定编辑按钮
			        //更新内容到标签
				obj.find("a").text($("input[name=title]").val()).attr("href",link);
			})
    
			$(".img_box").delegate("a","click",function(){ //取消a标签的单击默认事件
				return false;
			})

		})

转载请注明:jQ酷 » 以拖拽方式在图片上添加热链接

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。