swiperLeft/swiperRight以及js长按事件
2016-04-21 13:34
645 查看
在线实例: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" onclick="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>
代码编写:
代码使用:
<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" onclick="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)
代码编写:相关文章推荐
- JavaScript 对象
- 60行JS实现俄罗斯方块
- javascript深入理解js闭包
- javascript textContent与innerText的异同分析
- JS HTML DOM
- js 控制frame的元素
- (礼拜四log)点击某元素外的时候,该元素隐藏的办法
- javaScript学习思维导向图
- moment.js
- js数组基本知识
- Angular.js中使用$watch监听模型变化
- 关于js的函数重载的问题
- javascript与浏览器学习(一)
- JS实现简单面向对象的颜色选择器实例
- javascript中字符和ascii互换
- jsp中四种范围变量
- javascript常见数字进制转换实例分析
- 返回JSON出现Infinite recursion无限循环错误的解决
- SignalR的Javascript客户端API使用方式整理
- Json 简易教程