简单视觉差效果
2016-06-13 本文已影响148人
云香水识
来自 http://sports.qq.com/isocce/2016eurocup/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单视觉差效果</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>鼠标移动查看效果</h2>
<p>
图片素材均来自
<a href="http://sports.qq.com/isocce/2016eurocup/" 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');
/**
* 每日一题
* 根据鼠标在window窗口的相对位置关系修改重叠图片的定位，实现视觉差效果
*/
document.addEventListener('mousemove', function (e) {
var left = e.clientX; // 鼠标位置横坐标
var top = e.clientX; // 鼠标位置纵坐标
var width = window.innerWidth; // 屏幕宽度
var height = window.innerHeight;// 屏幕高度
// TODO
// 同时修改两个图片的位置偏移, 实现偏移不一致, 从而实现视觉差
star.style.cssText = ''; // 修改star 的位置
football.style.cssText = ''; // 修改football 位置
});
</script>
</body>
</html>
