<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes"><title>TOUCH</title><styletype="text/css">*{margin:0;padding:0;}body{-webkit-user-select:none;}body,button{font-family:'MicrosoftYaHei',arial,helvetica,sans-serif;}.wrap{position:relative;height:60px;border-bottom:1pxsolid#ccc;}.container{position:relative;z-index:2;width:100%;height:60px;display:-webkit-box;background-color:#FFF;}.trans{-webkit-transition:margin-left0.2slinear;transition:margin-left0.2slinear;}.head-img{width:40px;height:40px;line-height:40px;background-color:#99F;border-radius:3px;margin:10px0010px;text-align:center;font-size:12px;color:#FFF;}.content{margin:10px005px;-webkit-box-flex:1;}.contentp{font-size:12px;color:#999;margin-top:5px;}.del-btn{position:absolute;right:0;top:0;z-index:1;width:60px;height:60px;line-height:60px;background-color:#F00;color:#FFF;border:0;font-size:14px;}</style></head><body><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><divclass="wrap"><divclass="container"><pclass="head-img">图片</p><divclass="content"><h6>腾讯新闻</h6><p>云南鲁甸强震已致379人遇难</p></div></div><buttonclass="del-btn">删除</button></div><scripttype="text/javascript">varstartPos=0,endPos=0,parent=null;document.body.addEventListener('click',function(e){e.stopPropagation();e.preventDefault();vartarget=e.target;if(target.className.indexOf('del-btn')>-1){alert('点击了删除');}},false);document.body.addEventListener('touchstart',function(e){parent=e.target;while(parent&&parent.className.indexOf('container')<0){parent=parent.parentNode;}vartouch=e.touches[0];startPos=touch.pageX;parent.className='container';},false);document.body.addEventListener('touchmove',function(e){vartouch=e.touches[0],offset=0;if(parent.className!='container'){return;}endPos=touch.pageX;offset=endPos-startPos;if(offset>0){offset=0;if(parent.className.length>0){parent.className=parent.className+'trans';}else{parent.className='trans';}}elseif(Math.abs(offset)>60){offset=-60;}parent.style.marginLeft=offset+'px';},false);document.body.addEventListener('touchend',function(e){varoffset=0;if(parent.className!='container'){return;}offset=endPos-startPos;if(offset<0&&Math.abs(offset)>30){offset=-60;}else{offset=0;}if(parent.className.length>0){parent.className=parent.className+'trans';}else{parent.className='trans';}parent.style.marginLeft=offset+'px';},false);</script></body></html>