专栏首页天天jQuery事件(20171031)

jQuery事件(20171031)

1.交换内容

$("#btn").on("click",function(){
//方法一
                var srcOne = $("img").eq(0).attr("src");
                var srcTwo = $("img").eq(1).attr("src");
                $("img").eq(0).attr("src",srcTwo);
                $("img").eq(1).attr("src",srcOne);
//方法二
//               var imgclone = $("img").eq(0).clone();
//                imgclone.insertAfter($("img").eq(1));
//                $("img").eq(0).replaceWith($("img").eq(1));
            })

2.元素拖动

<script>
        $(function(){
            $("#box").mousedown(function(e){
                var disX= e.pageX - $(this).offset().left;
                var disY= e.pageY - $(this).offset().top;
                console.log(disX+"----"+disY);
                $(document).mousemove(function(e){
                    $("#box").css({left:(e.pageX-disX)+"px",top:(e.pageY-disY)+"px"});
                });
                $(document).mouseup(function(){
                    $(document).off("mousemove");
                })
            })
        })

解析:
$().offset().left :获得元素的left值
$().offset().top :获得元素的top值
事件绑定用on;事件解绑用off;
$(node).on("事件类型",“绑定元素”,fn)
$(node).off("事件类型")

注:此方法可以用来实现滑动解锁

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页image资源如何判断加载完毕

    在之前的工作中,越大过这样的场景,在做banner图的时候,使用的定位,实现图片的淡入淡出和放大效果,

    天天_哥
  • H5(drag,百度地图使用,requestFullscreen,H5应用缓存)

    天天_哥
  • 使用swiper制作拓展效果(跑马灯)

    Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

    天天_哥
  • 详解NodeList 和 HTMLCollection 和 Array

    Array,NodeList, HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚,经常遇到但是又感觉很陌生,剪不断理还乱...

    MudOnTire
  • "reason":"object mapping for [] tried to parse field [] as object, but found a concrete value"

    enclosure_infor这个字段的mapping如下,是个nested类型的:

    IT云清
  • ES6笔记(5)-- Generator生成器函数

    Generator的声明方式类似一般的函数声明,只是多了个*号,并且一般可以在函数内看到yield关键字

    书童小二
  • 教你利用Taro中的Decorator快速实现小程序分享

    我们开发小程序分享时都知道,小程序分享的出口及入口过多,每个页面中都要使用onShareAppMessage,这样并不方便我们进行管理。

    前端老道
  • 介绍几个JavaScript设计模式及场景应用

    当然我们可以用一个通俗的说法:设计模式是解决某个特定场景下对某种问题的解决方案。因此,当我们遇到合适的场景时,我们可能会条件反射一样自然而然想到符合这种场景的设...

    winty
  • 机器学习模型训练全流程!

    周末在家无聊闲逛github,发现一个很有趣的开源项目,作者用手绘图的方式讲解了机器学习模型构建的全流程,逻辑清晰、生动形象。同时,作者也对几张图进行了详细的讲...

    Datawhale
  • js知识点总结--这些你都了解了吗?

    js是一种基于对象和事件驱动的并具有相对安全性的客户端脚本语言。也是一种广泛用于web客户端开发的脚本语言,常用来给html网页添加动态功能,如响应用户的各种操...

    7537367

扫码关注云+社区

领取腾讯云代金券