來自 http://sports.qq.com/isocce/2016eurocup/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單視覺差效果</title>
<style>
body {
text-align: center;
background: url(http://mat1.gtimg.com/sports/2016ouzhoubei/images/mainbg.jpg) center top no-repeat;
}
.parallax-wrapper {
position: relative;
width: 1240px;
height: 200px;
margin: 0 auto;
}
.parallax-wrapper img {
position: absolute;
}
</style>
</head>
<body>
<div class="parallax-wrapper">
< img id="parallax-star" src="http://mat1.gtimg.com/sports/2016ouzhoubei/images/star1.png" alt="" style="top: 30px; left: 660px;">
< img id="parallax-football" src="http://mat1.gtimg.com/sports/2016ouzhoubei/images/football1.png" alt="" style="top: 30px; left: 690px;">
</div>
<h2>鼠標(biāo)移動(dòng)查看效果</h2>
<p>
圖片素材均來自
<a target="_blank">http://sports.qq.com/isocce/2016eurocup/</a>
</p>
<script>
var $ = function (id) {
return document.getElementById(id);
};
var star = $('parallax-star');
var football = $('parallax-football');
/**
* 每日一題
* 根據(jù)鼠標(biāo)在window窗口的相對(duì)位置關(guān)系修改重疊圖片的定位，實(shí)現(xiàn)視覺差效果
*/
document.addEventListener('mousemove', function (e) {
var left = e.clientX; // 鼠標(biāo)位置橫坐標(biāo)
var top = e.clientX; // 鼠標(biāo)位置縱坐標(biāo)
var width = window.innerWidth; // 屏幕寬度
var height = window.innerHeight;// 屏幕高度
// TODO
// 同時(shí)修改兩個(gè)圖片的位置偏移, 實(shí)現(xiàn)偏移不一致, 從而實(shí)現(xiàn)視覺差
star.style.cssText = ''; // 修改star 的位置
football.style.cssText = ''; // 修改football 位置
});
</script>
</body>
</html>
