div左右滑动，另一个div跟着滑动
0
所有回答(1)
0
你说的是轮播图吗 网上好多插件
不是，
手机屏幕，分为左右两块，左边宽度30%，右边宽带70%，右边的内容是超出内容的，用的overflow-x:scroll,可以滑动，想要做的效果是，上下滑动时，左边的第一行和右边的第一行元素固定在顶部，右边区域左右滑动的时候，右边的第一行元素也要跟着左右滑动，但是还是要固定在顶部
@rachelch: 用js做 获取滚动条滑动的距离 动态改变顶部位置不就好了吗
@一切都要简单化:我让scrollLeft获取滑动的距离，再让顶部的那一行元素的left=这个距离，但是发现，显示的很奇怪，不同步
@一切都要简单化: 所以在想能不能有什么别的好点的方法弄
@rachelch: 你用的什么事件
@rachelch: 发代码
@一切都要简单化: touchmove,以及touchstart事件
@一切都要简单化:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/list.css" />
</head>
<body id="list">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" id="header_title">最新创新层名单</h1>
</header>
<div class="mui-content">
<div class="sort">
<div class="sort_item">
<div class="num">
1
</div>
<div class="name name_title">
名称
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div><div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
<div class="sort_item">
<div class="num">
1
</div>
<div class="name">
齐鲁银行
<small>430051<span>创</span></small>
</div>
</div>
</div>
<div class="profit">
<div class="profit_item" id="profit_item">
<div class="item_i" id="item_nav">
<div>净利润 ↓</div><div>营业收入</div><div>每股利益</div><div>每股净资产</div><div>总市值</div><div>最新价</div><div>涨跌幅</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div><div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
<div class="item_i">
<div>16.42亿</div><div>51.43亿</div><div>0.58</div><div>3.80</div><div>113.06亿</div><div>3.98</div><div>0.76%</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/list.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.touchswipe/1.6.15/jquery.touchSwipe.min.js"></script>
<script>
// $('.profit').swipe( {
// //Single swipe handler for left swipes
// swipeLeft: function () {
// console.log('left');
// },
// swipeRight: function () {
// console.log('right');
// },
// swipeUp: function () {
// console.log('u');
// },
// swipeDown: function () {
// console.log('d');
// }
// });
</script>
</body>
</html>
//-----------------------------------------
//js
//判断滑动方向,然后让div到达顶部时固定
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑动距离太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if(angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
}
//滑动处理
var startX, startY;
var left_width;
document.getElementById('profit_item').addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
//console.log( '鼠标点击时光标所在坐标'+startX );
startY = ev.touches[0].pageY;
$('#item_nav').addClass('active');
$('.sort').find('.sort_item').eq('0').addClass('active');
$('#item_nav').next().css('marginTop','4.2rem');
$('.sort').find('.sort_item').eq('1').css('marginTop','4.2rem');
left_width=$('.sort').width();
}, false);
document.getElementById('profit_item').addEventListener('touchmove',function (ev) {
// $('#item_nav').addClass('active');
// $('.sort').find('.sort_item').eq('0').addClass('active');
var profit_scroll = left_width - parseInt($('.profit').scrollLeft());
$('#item_nav').css('left',profit_scroll+'px');
},false);
document.getElementById('profit_item').addEventListener('touchend',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
var profit_scroll;
switch(direction) {
case 0:
// alert("没滑动");
break;
case 1:
//alert("向上");
// $('#item_nav').addClass('active');
// $('.sort').find('.sort_item').eq('0').addClass('active');
// profit_scroll = left_width - parseInt($('.profit').scrollLeft());
// $('#item_nav').css('left',profit_scroll);
// scroll == 0 时,left == 116
// scroll == 362 时, left == -246
break;
case 2:
//alert("向下");
// $('#item_nav').addClass('active');
// $('.sort').find('.sort_item').eq('0').addClass('active');
// profit_scroll = left_width - parseInt($('.profit').scrollLeft());
// $('#item_nav').css('left',profit_scroll);
break;
case 3:
//alert("向左");
// $('#item_nav').addClass('active');
// $('.sort').find('.sort_item').eq('0').addClass('active');
// var left_width=$('.sort').width();
profit_scroll = left_width - parseInt($('.profit').scrollLeft());
$('#item_nav').css('left',profit_scroll);
break;
case 4:
//alert("向右");
// $('#item_nav').addClass('active');
// $('.sort').find('.sort_item').eq('0').addClass('active');
// var left_width=$('.sort').width();
profit_scroll = left_width - parseInt($('.profit').scrollLeft());
$('#item_nav').css('left',profit_scroll);
break;
default:
}
}, false);
//css
#list header {
background: #4893f3;
}
#list header a,
#list header h1 {
color: #fff;
}
#list .mui-content {
overflow: hidden;
}
#list .mui-content .sort,
#list .mui-content .profit {
float: left;
font-size: 12px;
}
#list .mui-content .sort {
width: 31%;
}
#list .mui-content .sort .sort_item {
width: 100%;
overflow: hidden;
background: white;
}
#list .mui-content .sort .sort_item.active {
z-index: 9999;
position: fixed;
width: 31%;
}
#list .mui-content .sort .sort_item:nth-of-type(2n+1) {
background: #f3f3f3;
}
#list .mui-content .sort .sort_item .num,
#list .mui-content .sort .sort_item .name {
float: left;
height: 4.2rem;
text-align: center;
}
#list .mui-content .sort .sort_item .num {
width: 40%;
line-height: 4.2rem;
}
#list .mui-content .sort .sort_item .name {
width: 60%;
font-size: 14px;
padding-top: 0.2rem;
}
#list .mui-content .sort .sort_item .name small {
display: block;
color: #8b8b8b;
font-size: 12px;
margin-top: -0.2rem;
}
#list .mui-content .sort .sort_item .name small span {
color: white;
font-size: 9px;
width: 18px;
height: 13px;
line-height: 16px;
display: inline-block;
background: #faa014;
border-radius: 50px;
float: none;
margin-left: 2%;
}
#list .mui-content .sort .sort_item .name_title {
line-height: 4.2rem;
font-size: 12px;
padding: 0;
}
#list .mui-content .profit {
width: 69%;
overflow-x: scroll;
}
#list .mui-content .profit .profit_item {
width: 240%;
}
#list .mui-content .profit .profit_item .item_i {
overflow: hidden;
background: white;
}
#list .mui-content .profit .profit_item .item_i:nth-of-type(1) {
color: #5bacff;
}
#list .mui-content .profit .profit_item .item_i.active {
position: fixed;
top: 44px;
width: 240%;
}
#list .mui-content .profit .profit_item .item_i:nth-of-type(2n+1) {
background: #f3f3f3;
}
#list .mui-content .profit .profit_item .item_i div {
float: left;
width: 82px;
height: 4.2rem;
line-height: 4.2rem;
text-align: center;
}
@media screen and (min-width: 376px) {
#list .mui-content .profit .profit_item {
width: 220%;
}
#list .mui-content .profit .profit_item .item_i.active {
width: 220%;
}
}
@media screen and (max-width: 346px) {
#list .mui-content .profit .profit_item {
width: 260%;
}
#list .mui-content .profit .profit_item .item_i.active {
width: 260%;
}
}
@media screen and (max-width: 329px) {
#list .mui-content .sort {
width: 32%;
}
#list .mui-content .sort .sort_item.active {
width: 32%;
}
#list .mui-content .profit {
width: 68%;
}
#list .mui-content .profit .profit_item {
width: 270%;
}
#list .mui-content .profit .profit_item .item_i.active {
width: 270%;
}
}
/*# sourceMappingURL=../map/list.map */