jquery利用拖拽方式在图片上添加热链接


Posted in Javascript onNovember 24, 2015

本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程,分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery利用拖拽方式在图片上添加热链接

项目的需求,要在一张图片上加不同的链接,比如说,图片是一个套房,里面有沙发,茶几,酒柜,电视柜等,然后在这些物件上加一个超链接,点击后打开相关产品的介绍。

用jquery写了一个在图片添加锚点的功能,实现的原理:一个文本框写入标题,一个文本框写链接,一个添加按钮,一个编辑按钮,当写好内容后点击添中添加,便会在图片的上方出现一个P标签,然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了,下面来看具体代码。

首入引入jquery库

<script src="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;
   })
 
  })

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 #Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 #Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 #Javascript
基于jquery实现简单的手风琴特效
Nov 24 #Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
You might like
php 删除数组元素
2009/01/16 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript 函数调用规则
2009/08/26 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
保险专业大专生求职信
2013/10/26 职场文书
留学自荐信写作方法
2014/01/27 职场文书
中学生英语演讲稿
2014/04/26 职场文书
同学聚会策划方案
2014/06/06 职场文书
初中同学会活动方案
2014/08/22 职场文书
2015年公司新年寄语
2014/12/08 职场文书
学校运动会简讯
2015/07/20 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js