水平垂直的原理是一样的，它这个主要是增加了鼠标滚轮事件，其他的没啥特别。
<!doctype html><html>
<head>
<meta charset="utf-8" />
<title>视差滚动</title>
<style>
*{margin: 0padding: 0}
body{ }
#bg{width: 100%background-image: url(trim.jpg)background-size: coverheight: 768pxposition: fixed}
#img1{position: fixedtop: 650pxborder: 1px solid #aaapadding: 4pxbackground-color: #fff}
#img2{position: fixedtop: -500pxright: 0pxwidth: 600pxheight: 300pxborder: 1px solid #aaapadding: 4pxbackground-color: #fff}
#txt1{top: 400px position: fixedfont-family: '黑体'font-size: 36pxcolor: #ffffont-weight: boldtext-shadow: 2px 2px 12px #fffleft: -400px}
</style>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="bg"></div>
<img id="img1" src="thumb.jpg">
<img id="img2" src="535032.jpg">
<div id="txt1">纳米尖兵巴德尔</div>
<div style="height:3000px"></div>
<script>
window.onscroll=function(){
var ht=document.documentElement.scrollTop || document.body.scrollTop
$("#bg").css({"background-position":'0px -'+ht/20+'px'})
$("#img1").css({"top":650-ht/2+'px'})
$("#img2").css({"top":-500+ht/2+'px'})
$("#txt1").css({"left":-300+ht/2+'px','opacity':500/ht})
}
</script>
</body>
</html>
首先跳转页面需要向跳转页传递参数，不然页面二是无法得知这个是哪个链接跳转而来的，也没办法判断及添加类名。btn1.onclick=function(){
//打开b页面的同时向b的页面传递参数
window.location.href = "b.html?id=btn1"
}
然后在b页面判断获得url
var s=window.location.search
其他的就是添加个class，设置document.body.scrollTop了也就没有难度了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）