10,606
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Document</title>
<script src='zepto.js'></script>
<script src='iscroll.js'></script>
<script>
var myScroll;
var myScroll_2;
var myScroll_3;
function loaded() {
myScroll = new IScroll('#wrapper',{
// scroll:false
});
myScroll_2 = new IScroll('#thead', {
scrollX: true
});
myScroll_3 = new IScroll('#box', {
scrollX: true,
scrollbars:true
});
console.log(myScroll_3);
var box = document.getElementById('box');
// myScroll_3.scrollEnd = function(){
// console.log('name');
// }
myScroll_3.on('scroll', function(e) {
console.log(myScroll_3.y);
console.log(myScroll_3.x);
console.log(myScroll_2.x);
console.log(e);
myScroll_2.x = -1872;
});
}
</script>
<style>
#wrapper {
height: 300px;
overflow: hidden;
position: absolute;
top: 34px;
bottom: 0px;
left: 30px;
}
thead {
position: absolute;
width: 500px;
left: 100px;
right: 0px;
overflow: hidden;
}
ul,
li {
margin: 0;
padding: 0;
}
h3 {
position: absolute;
top: 10px;
left: 40px;
padding: 0;
margin: 0;
}
#box {
width: 500px;
height: 300px;
position: absolute;
left: 100px;
top: 34px;
overflow: hidden;
}
</style>
</head>
<body onload="loaded()">
<h3>期号</h3>
<div id="wrapper">
<ul>
<li>20150901</li>
<li>20150902</li>
<li>20150903</li>
<li>20150904</li>
<li>20150905</li>
<li>20150906</li>
<li>20150907</li>
<li>20150908</li>
<li>20150909</li>
<li>20150910</li>
<li>20150911</li>
<li>20150912</li>
<li>20150913</li>
<li>20150904</li>
<li>20150905</li>
<li>20150906</li>
<li>20150907</li>
<li>20150908</li>
<li>20150909</li>
<li>20150910</li>
<li>20150911</li>
<li>20150912</li>
<li>20150913</li>
<li>20150904</li>
<li>20150905</li>
<li>20150906</li>
<li>20150907</li>
<li>20150908</li>
<li>20150909</li>
<li>20150910</li>
<li>20150911</li>
<li>20150912</li>
<li>20150913</li>
<li>20150904</li>
<li>20150905</li>
<li>20150906</li>
<li>20150907</li>
<li>20150908</li>
<li>20150909</li>
<li>20150910</li>
<li>20150911</li>
<li>20150912</li>
<li>20150913</li>
<li>20150914</li>
<li>20150915</li>
<li>20150916</li>
<li>20150917</li>
<li>20150918</li>
<li>20150919</li>
<li>20150920</li>
<li>20150921</li>
<li>20150922</li>
<li>20150923</li>
<li>20150924</li>
<li>20150925</li>
<li>20150926</li>
<li>20150927</li>
<li>20150928</li>
<li>20150929</li>
<li>20150930</li>
</ul>
</div>
<table>
<thead id="thead">
<tr>
<th>202033301</th>
<th>202033302</th>
<th>202033303</th>
<th>202033304</th>
<th>202033305</th>
<th>202033306</th>
<th>202033307</th>
<th>202033308</th>
<th>202033309</th>
<th>202033310</th>
<th>202033311</th>
<th>202033312</th>
<th>202033313</th>
<th>202033314</th>
<th>202033315</th>
<th>202033316</th>
<th>202033317</th>
<th>202033318</th>
<th>202033319</th>
<th>202033320</th>
<th>202033321</th>
<th>202033322</th>
<th>202033323</th>
<th>202033324</th>
<th>202033325</th>
<th>202033326</th>
<th>202033327</th>
<th>202033328</th>
<th>202033329</th>
<th>202033330</th>
</tr>
</thead>
</table>
<div id="box">
<table>
<tbody>
<tr>
<td>9203030401</td>
<td>9203030402</td>
<td>9203030403</td>
<td>9203030404</td>
<td>9203030405</td>
<td>9203030406</td>
<td>9203030407</td>
<td>9203030408</td>
<td>9203030409</td>
<td>9203030410</td>
<td>9203030411</td>
<td>9203030412</td>
<td>9203030413</td>
<td>9203030414</td>
<td>9203030415</td>
<td>9203030416</td>
<td>9203030417</td>
<td>9203030418</td>
<td>9203030419</td>
<td>9203030420</td>
<td>9203030421</td>
<td>9203030422</td>
<td>9203030423</td>
<td>9203030424</td>
<td>9203030425</td>
<td>9203030426</td>
<td>9203030427</td>
<td>9203030428</td>
<td>9203030429</td>
<td>9203030430</td>
</tr>
<tr>
<td>9203030401</td>
<td>9203030402</td>
<td>9203030403</td>
<td>9203030404</td>
<td>9203030405</td>
<td>9203030406</td>
<td>9203030407</td>
<td>9203030408</td>
<td>9203030409</td>
<td>9203030410</td>
<td>9203030411</td>
<td>9203030412</td>
<td>9203030413</td>
<td>9203030414</td>
<td>9203030415</td>
<td>9203030416</td>
<td>9203030417</td>
<td>9203030418</td>
<td>9203030419</td>
<td>9203030420</td>
<td>9203030421</td>
<td>9203030422</td>
<td>9203030423</td>
<td>9203030424</td>
<td>9203030425</td>
<td>9203030426</td>
<td>9203030427</td>
<td>9203030428</td>
<td>9203030429</td>
<td>9203030430</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JS使图片左右移动_何问起</title>
<meta charset="utf-8" />
<base target="_blank" />
<style>
span{margin: 100px;}
p{margin-top: 20px;}
div{overflow: auto;}
#main,#top1{width: 300px;background-color: aquamarine;}
#left,#main{width: 300px;display: inline-block;height: 100px;}
</style>
</head>
<body>
<div id="top1">
<span>1234</span><span>1234</span><span>1234</span>
<span>1234</span><span>1234</span><span>1234</span>
<span>1234</span><span>1234</span><span>1234</span>
<span>1234</span><span>1234</span><span>1234</span>
</div>
<div id="left">
<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
<p>1234</p><p>1234</p><p>1234</p><p>1234</p><p>1234</p>
</div>
<div id="main">
<span>1234</span><span>1234</span><span>1234</span>
<span>1234</span><span>1234</span><span>1234</span>
<span>1234</span><span>1234</span><span>1234</span>
<span>1234</span><span>1234</span><span>1234</span>
<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
</div>
<script>
main.onscroll=function(){
console.log(main.scrollTop)
console.log(main.scrollLeft)
top1.scrollLeft=main.scrollLeft;
left.scrollTop= main.scrollTop;
}
top1.onscroll=function(){
main.scrollLeft=this.scrollLeft;
}
left.onscroll=function(){
main.scrollTop=this.scrollTop
}
</script>
</body>
</html>