zoukankan      html  css  js  c++  java
  • jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法
    
    我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用!
    
    假如用css设置一个属性,我们写法如下:
    
    $("#haorooms").css("width","100px");
    
    假如多个属性呢?我们写法如下:
    
    $(".demo").css({"height":"100px","background-color":"red"});
    
    把他们放到一个对象里面!
    
    看了上面的例子,大家能知道我这个插件中关于拖拽楼盘的写法了吗?
    监听事件on写法解释
    
    我们平时写监听事件on,通常如下写:
    
    $(".haorooms").on("click",function(){
        alert("haorooms前端博客")
    })
    
    其实,我们可以吧click,和function看出2个参数,和上面css的写法类似,那我们也可以如下写啊!
    
    $(".haorooms").on({
            click:function(){
                      alert("我是点击事件")
            },
            mouseover:function(){
                alert("mouseover");
            },
            mouseout:function(){
                alert("out")
            }
        })
    
    这下大家明白了吧!
    最简单的拖拽效果
    
    我写的这个拖拽效果,应该是代码量比较少的,大家copy下来,应该可以用!
    
    拖拽代码如下:
    
    $(".haorooms_drag").on({
        mousedown: function(e){
                    var el=$(this);
                    var os = el.offset(); dx = e.pageX-os.left, dy = e.pageY-os.top;
                    $(document).on('mousemove.drag', function(e){ el.offset({top: e.pageY-dy, left: e.pageX-dx}); });
                },
       mouseup: function(e){ $(document).off('mousemove.drag'); }
  • 相关阅读:
    逆元(费马小定理求法)
    CodeForces
    lower_bound and upper_bound
    HDU 4825 Xor Sum
    1030: [JSOI2007]文本生成器
    1070: [SCOI2007]修车
    agc 027 B
    P2664 树上游戏
    CF 314 E. Sereja and Squares
    4237: 稻草人
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/5829234.html
Copyright © 2011-2022 走看看