首页 新闻 搜索 专区 学院

div左右滑动,另一个div跟着滑动

0
悬赏园豆:20 [待解决问题]

怎么实现一个div左右滑动内容,另一个div内容也跟着滑动

这两个div的内容都是overflow-x:scroll

rachelch的主页 rachelch | 初学一级 | 园豆:48
提问于:2017-07-07 11:58
< >
分享
所有回答(1)
0

你说的是轮播图吗 网上好多插件

一切都要简单化 | 园豆:210 (菜鸟二级) | 2017-07-07 14:23

不是,

手机屏幕,分为左右两块,左边宽度30%,右边宽带70%,右边的内容是超出内容的,用的overflow-x:scroll,可以滑动,想要做的效果是,上下滑动时,左边的第一行和右边的第一行元素固定在顶部,右边区域左右滑动的时候,右边的第一行元素也要跟着左右滑动,但是还是要固定在顶部

支持(0) 反对(0) rachelch | 园豆:48 (初学一级) | 2017-07-07 14:49

@rachelch:  用js做  获取滚动条滑动的距离  动态改变顶部位置不就好了吗

支持(0) 反对(0) 一切都要简单化 | 园豆:210 (菜鸟二级) | 2017-07-07 15:04

@一切都要简单化:我让scrollLeft获取滑动的距离,再让顶部的那一行元素的left=这个距离,但是发现,显示的很奇怪,不同步

支持(0) 反对(0) rachelch | 园豆:48 (初学一级) | 2017-07-07 15:08

@一切都要简单化: 所以在想能不能有什么别的好点的方法弄

支持(0) 反对(0) rachelch | 园豆:48 (初学一级) | 2017-07-07 15:09

@rachelch:  你用的什么事件

支持(0) 反对(0) 一切都要简单化 | 园豆:210 (菜鸟二级) | 2017-07-07 15:31

@rachelch: 发代码

支持(0) 反对(0) 一切都要简单化 | 园豆:210 (菜鸟二级) | 2017-07-07 15:31

@一切都要简单化: touchmove,以及touchstart事件

支持(0) 反对(0) rachelch | 园豆:48 (初学一级) | 2017-07-08 16:35

@一切都要简单化: 

<!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>净利润&nbsp;↓</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 */

支持(0) 反对(0) rachelch | 园豆:48 (初学一级) | 2017-07-08 16:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册