手机版

jquery通过拖放向图片添加热链接

时间:2021-09-21 来源:互联网 编辑:宝哥软件园 浏览:

本文描述了jquery使用拖放添加图片热链接的实现过程,并分享给大家参考。具体如下:运行效果截图如下:

根据项目的需要,为图片添加不同的链接。比如图中是一个有沙发、茶几、酒柜、电视柜等的套房。然后添加这些对象的超链接,点击打开相关产品的介绍。

图片中添加锚点的功能是用jquery编写的。实现原理是:文本框写标题,文本框写链接,添加按钮和编辑按钮。写完内容后,点击添加中的添加,图片顶部会出现一个P标签。然后,按下鼠标左键并拖动标签,将其释放到相应的位置。让我们看看下面的具体代码。

首先介绍jquery库。

script src=' http : js/jquery/1 . 11 . 1/jquery . min . js '/script构建html。

class=' box ' input type=' text ' name=' title ' input type=' text ' name=' link ' value=' http://' input type=' button ' value=' add link ' id=' add ' input type=' button '。在' value=' edit ' id=' show '/div class=' img _ box ' img src=' http : images/55cc 64813 c 330 . jpg '/div中写入CSS。注意这里标签的位置是相对于图片的位置,所以position: relative应该加到图片的img _ box

* { padd : 0;margin : 0;}.box { margin: 10px}.img_box{position:相对;}.img_box。茅店{position:绝对值;padding: 5px 10pxborder-right : 5px;背景技术: # 000;filter:alpha(不透明度=40);-moz-opa city 33600.4;opacity:0.4top:10pxleft:10pxcolor : # FFF;font-size : 12px;font-family : ' Tahoma ';cursor:指针;}.毛甸a { color : # FFF;文本装饰:无;}编写JS。

$(function(){ var obj=null;//定义标签对象的全局变量进行编辑$('#add ')。click(function(){//Binding Add按钮click事件var title=$ ('input [name=title]')。val();//获取标题内容var link=$ ('input [name=link]')。val();//获取超链接var html=' p class=' Mao Dian ' a href=' link ' ' title '/a/p;p标记$('。img_box ')。追加(html);//添加到img_box div,即图片后面});$ ('.img _ box ')。委托('。maodian ',' mousedown ',函数(e){//绑定标签鼠标按下事件obj=$(this);//为与非浏览器obj.setCapture()兼容,将当前标记对象赋给if(obj.setCapture){ //变量;} $('input[name=title]')。val(obj.find('a ')。text());//将点中标签的内容添加到标题文本框$ ('input [name=link]')。瓦尔。查找(' a ')。attr(' href ');/在指向链接框中添加标签的链接。var _ x=e.pagex-obj.offset()。向左;//获取鼠标到标签var _y=e.pageY-obj.offset()左侧的距离。顶部;//获取鼠标到标签顶部的距离var oWidth=$(this)。outwidth();//获取标签的宽度,包括填充var o height=$ (this)。外部高度();//获取标签高度,包括填充var x=0,y=0;定义全局变量$('。img _ box ')。bind ('mousemove ',函数(e) {var img _ position=$(')。img _ box ')。offset();//获取图片的位置x=e . pagex-_ x-img _ position . left;//计算运动y的x值=e . pagey-_ y-img _ position . top;//如果(x0){ //则计算运动的Y值,如果运动小于0,则证明其已移出画面,应设置为0x=0;} else if (x ($(')。img _ box img’)。width()-o width)){//如果移动量大于图片宽度减去标签宽度,则证明已经移动到图片外部,应设置为最大可用值x=$(')。img _ box img’)。width ()-o宽度;} if(y0){ //同上y=0;}else if(y($(')。img _ box img’)。height()-oHeight)){ y=$('。img _ box img’)。高度()-Oheight;} obj.css({'left':x,' top ' :y });});$ ('.img _ box ')。bind ('mouseup ',function () {//bind鼠标左键弹出事件$(')。img _ box ')。解除绑定(' mouse move ');//Move mousemove事件$(this)。解除绑定(' mouse up ');//mobile mouseup事件if(obj.releaseCapture){ //兼容非标准浏览器obj . release capture();} });返回false//用于在选择文本时取消浏览器的默认事件});$ ('.img _ box ')。委托('。maodian ',' dblclick ',function () {//bind双击事件$(this)。移除();//删除当前标记}) $ ('# show ')。单击(function(){//绑定编辑按钮//将内容更新到标签obj.find ('a ')。文本($(“输入[name=title]”)。val())。attr ('href ',}) $ ('.img _ box ')。委托(' A ',' click ',function(){//取消默认事件返回false为点击A标记;})})以上就是本文的全部内容,希望对大家的学习有所帮助。

版权声明:jquery通过拖放向图片添加热链接是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。