swiperLeft/swiperRight以及js长按事件

在线实例:http://tkdj1811.cn/swipejs.html


<script src="../../style/js/jquery.min.js"></script>

<script src="../../style/expand/jquery.event.move.js"></script>
<script src="../../style/expand/jquery.event.swipe.js"></script>
<style type="text/css">
.list-container{min-height:0rem;overflow:hidden;margin-top:10rem;background:#fff;}
.list-container > li{background: #ffffff;margin-bottom:2px;display:block;overflow: hidden;height:9rem;line-height:9rem;border-top: 0.2rem solid #d8d8d8;font-size:3rem;}
.list-container> li a{position: relative;height:9rem;display: inline-block;width: 100%;float: left;}
.logText{text-indent:3rem;width:70%;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logTime{padding-right:3rem;display:inline-block;float:right;}
.list-container li > span{display:inline-block;width:150px;background:red;height:9rem;text-align:center;line-height:9rem;}
</style>
</head>
<body>
<ul class="list-container">
  <li id="2007">
   <a href="#"><span class="logText">哈哈是啊撒是打发啊发撒地方阿斯顿发生的发撒地方阿斯顿发生的发撒地方暗示法打速度发V阿斯顿发撒话</span><span class="logTime">2014-6-12</span></a>
  <span class="logDel" οnclick="del(this)">删除</span>
 </li>
</ul>
</body>
</html>
<script>
function swiperLi(){
      var cont=$(".list-container li");
      cont.on('swipeleft', function(e) {$(this).find("a").css("margin-left",-150);});
      cont.on('swiperight', function(e){$(this).find("a").css("margin-left",0);});
}
swiperLi();
</script>

手机端js模拟长按事件(代码仿照jQuery)

代码编写:

1
2
3
4
5
6
7
8
9
10
11
12
$.fn.longPress =  function (fn) {
     var  timeout = undefined;
     var  $ this  this ;
     for ( var  i = 0;i<$ this .length;i++){
         $ this [i].addEventListener( 'touchstart' function (event) {
             timeout = setTimeout(fn, 800);
             },  false );
         $ this [i].addEventListener( 'touchend' function (event) {
             clearTimeout(timeout);
             },  false );
     }
}

代码使用:

1
2
3
$(select).longPress( function (){
     alert(1);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值