dji.gif
dji1.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.banner{
width: 100%;
height: 2000px;
background-color: #0666;
}
.content{
overflow: hidden;
height: 100vh;
position: relative;
background-color: #eee;
}
.content .left{
width: 50%;
height: 100%;
border-right: 1px solid #000;
position: absolute;
left: 0;
overflow: hidden;
}
.content .right{
width: 50%;
height: 100%;
border-left: 1px solid #000;
position: absolute;
right: 0;
overflow: hidden;
}
.content .left img{
width: 100%;
height: 230px;
position: absolute;
right: -50%;
top:30%;
transition: right 0.5s;
}
.content .right img{
width: 100%;
height: 230px;
position: absolute;
left: -50%;
top:30%;
}
.rightcontent{
width: 50%;
height: 1000px;
background-color: green;
position: relative;
left: 50%;
}
.footer{
width: 100%;
height: 2000px;
background-color: red;
z-index: 100;
position: relative;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="content">
<div class="left">
<img src="http://www3.djicdn.com/assets/images/products/supernova/s4/s4-pro- 327837106caf7f03d379e99ed09ebdb3.png?from=cdnMap">
</div>
<div class="right">
<img src="http://www4.djicdn.com/assets/images/products/supernova/s4/s4-zoom-b458b254ca10f1a813d80c4726d54335.png?from=cdnMap">
</div>
</div>
<div class="rightcontent">
右边内容
</div>
<div class="footer">
</div>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
var contentTop=$('.content').offset().top; //content区域距离窗口的高度
var rightContentHeight=$('.rightcontent').offset().top; //右边内容的高度距离窗口的高度
var heightDifference=rightContentHeight-contentTop; //高度差，右边内容的高度距离窗口的高度减去content区域位于窗口的高度
var pingjun=heightDifference/8; //因为要移动8次，所以高度差÷8获取每次移动的平均高度触发值
var img=$('.left img').width()/2; //获取图片一半的宽度
var i=(img-140)/8; //要移动140px,获取平均移动距离
$(window).scroll(function() {
var scroll=$(window).scrollTop(); //滚动的高度
if(scroll>=contentTop){ //判断content到达窗口顶部了
$('.left').css({top:0,position:'fixed',background:'#eee'}); //把左边设置成固定定位
if (scroll<=rightContentHeight){ //判断滚动的高度小于右边内容到窗口的高度
if (contentTop<=scroll&&contentTop+pingjun>=scroll){
$('.left img').css('right',-(img-i)+'px');
}else if (contentTop+pingjun<=scroll&&contentTop+pingjun*2>=scroll){
$('.left img').css('right',-(img-i*2)+'px');
}else if (contentTop+pingjun*2<=scroll&&contentTop+pingjun*3>=scroll) {
$('.left img').css('right',-(img-i*3)+'px');
}else if (contentTop+pingjun*3<=scroll&&contentTop+pingjun*4>=scroll) {
$('.left img').css('right',-(img-i*4)+'px');
}else if (contentTop+pingjun*4<=scroll&&contentTop+pingjun*5>=scroll) {
$('.left img').css('right',-(img-i*5)+'px');
}else if (contentTop+pingjun*5<=scroll&&contentTop+pingjun*6>=scroll) {
$('.left img').css('right',-(img-i*6)+'px');
}else if (contentTop+pingjun*6<=scroll&&contentTop+pingjun*7>=scroll) {
$('.left img').css('right',-(img-i*7)+'px');
}else if (contentTop+pingjun*7<=scroll&&contentTop+pingjun*8>=scroll) {
$('.left img').css('right',-(img-i*8)+'px');
}
}else {
$('.left img').css('right',-(img-i*8)+'px');
}
}else{
$('.left').removeAttr('style');
$('.left img').removeAttr('style');
}
});
</script>
</body>
</html>
网友评论