```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右滑动事件</title>
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body h1,h2,h3,h4,h5,h6,p,hr{
margin:0;
padding:0;
font-style: normal;
font-weight: normal;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
u,s,i{
font-style: normal;
}
.activity_detail p{
padding:.5rem 0;
}
.activity_title p span:nth-child(1){
color:#7e7e7e;
font-size:1.6rem;
margin-right:1rem;
}
.activity_title p span:nth-child(2){
color:#c7566d;
font-size:1.4rem;
}
.activity_content{
overflow:hidden;
}
.activity_content ul{
overflow:hidden;
background:#fff;
padding-left:0;
}
.activity_content li{
float:left;
position:relative;
}
.activity_content li img {
width:100%;
}
.activity_content li:last-child b{
display:none;
}
.activity_content li a{
display:block;
}
.activity_content li p{
border:none;
width:100%;
}
.activity_content li p span{
display:inline-block;
width:100%;
text-align: center;
}
.activity_content li p span:nth-child(1){
font-size:1.2rem;
margin-bottom:5px;
}
.activity_content li p span:nth-child(2){
color:#c7566d;
font-size:1.4rem;
}
.activity_content li p b{
color:#a2a2a2;
font-size:3rem;
position: absolute;
top:23%;
right:-9%;
z-index: 100;
}
.part2 .product_name{
width: 100%;
color:#a2a2a2;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<section class="merchant_union part2">
<div class="content">
<h2 class="title_top">合力团<span></span><hr/></h2>
<div class="activity_detail">
<div class="activity_content">
<ul>
<li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li>
<li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li>
<li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li>
<li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li> <li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li> <li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li> <li >
<a href="http://www.baidu.com">
<img src="imgs/product_list.png" alt="">
<p>
<span class="product_name">beats头戴式耳机beats头戴式耳机</span>
<span>￥146</span>
<b>+</b>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
/*合力团*/
var liwidth=$(window).width()*0.35;
console.log( liwidth)
$(".activity_content li").css("width",liwidth);
var lilength=$(".activity_content li").length;
$(".activity_content ul").css("width",liwidth*lilength);
</script>
<!--/*左右滑动*/-->
<script>
var containerObj = document.getElementsByClassName('activity_content')[0];
var ulObj = containerObj.getElementsByTagName('ul')[0];
var lis = ulObj.getElementsByTagName('li');
var startX= 0, moveX = 0, distanceX= 0, currentX = 0;
var maxLeft = 0,
maxRight = containerObj.offsetWidth-ulObj.offsetWidth;
// 设置位移
var setTranslate = function(x){
ulObj.style.transform = 'translateX('+x+'px)';
ulObj.style.webkitTransfrom = 'translateX('+x+'px)';
}
containerObj.addEventListener('touchstart',function(e){
startX = e.targetTouches[0].clientX;
});
containerObj.addEventListener('touchmove',function(e){
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
var x = currentX + distanceX;
if( x > maxLeft){
x = maxLeft
}
if( x < maxRight ){
x = maxRight
}
if(moveX>10){
setTranslate(x);
}
})
containerObj.addEventListener('touchend',function(){
currentX = currentX+distanceX;
if(currentX>0){
currentX = 0;
}
if(currentX<maxRight){
currentX = maxRight;
}
setTranslate(currentX);
})
</script>
</body>
</html>
```
- vue
- axios封装全局loading（1）
- axios封装全局loading（2）
- axios封装全局loading（3）
- 学不动也要学，vue权限管理
- 判断前台当前页面是否需要token
- vue打包为APP（1）
- vue-cli3.0跨域
- vue-cli 3.0配置目录别名alias
- px自动转换rem
- 页面返回位置保留
- 浏览器title动态修改
- vue路由参数变化页面不刷新
- react
- 学不动也要学，react（1）
- Electron
- Electron厉害的要死（1）
- Electron厉害的要死（2）
- node
- 前后端分离
- MVC项目
- HTML
- 缓存时间机制
- 全站执行https请求
- 移动端meta
- CSS
- sticky_footer
- JS
- 子元素是否超出父元素
- iframe切换
- 获取url参数
- 回到顶部按钮
- 滚动条是否到达底部
- 移动端左右滑动div
- 移动pc相互跳转
- IE浏览器版本判断
- 调用摄像头和相册
- 抽奖概率
- cookie
- 平常小知识
- 单行文本与多行文本省略号
- display：table用法
- span标签document绑定事件失效
- 添加script标签
- 内联元素不能紧贴
- 3D旋转(transform)粗细渲染
- 全英文不换行问题
- 点击input出现蓝色边框
- wap端点击div，a，img出现阴影效果
- 华为手机使用flex布局，样式位移
- IE兼容性
- 图解
- 其他
- 未整理