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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
浅析JS运动
Dec 28 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 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防CC攻击实现代码
2011/12/29 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php实现的CSS更新类实例
2014/09/22 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
用Python解决x的n次方问题
2019/02/08 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
scrapy-splash简单使用详解
2021/02/21 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
会计顶岗实习心得
2014/01/25 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
品牌服务方案
2014/06/03 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python