<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onMouseMove</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<style>
.movebox{background:#00ddff;width:1000px;height:600px;position: relative;}
.bird{background:url(http://www.qqw21.com/article/UploadPic/2012-8/2012812234952102.jpg) no-repeat center center;position:absolute;left: 254px; top: 100px;z-index:2; width: 200px; height:200px; }
.hua{background: url(http://www.zuo3.com/images/v/r/img02/r/t/101/bao/uploaded/i2/T1UTxhXox8dJPv9vMT_011613.jpg_310x310.jpg) no-repeat center center;position: absolute;right:200px;bottom:100px;width:200px;height:200px;}
</style>
<body>
<div class="movebox">
<div class="mousemove-item bird" data-z="1"></div>
<!--必须引入类名mousemove-item 设置属性data-z-->
<div class="mousemove-item hua" data-z="2"></div>
</div>
<script>
$(function(){
// 鼠标晃动 效果
$(function(){
function getTransforms(translate3d) {
return {
'-webkit-transform': translate3d,
'-moz-transform': translate3d,
'-ms-transform': translate3d,
'transform': translate3d
};
}
function transformContainer(element, translate3d) {
element.css(getTransforms(translate3d));
}
var noAnimate = !1;
var winWidth = $(window).width(),winHeight = $(window).height();
function onMouseMove(ev) {
if (!noAnimate) {
var left = (ev.clientX - .6 * winWidth) / (.6 * winWidth),
top = (ev.clientY - .6 * winHeight) / (.6 * winWidth),
elements = $(".mousemove-item");
elements.each(function() {
var el = $(this),
pos = {
left: this.style.left,
top: this.style.top
},
rate = parseInt(el.data("z")),
max = 4 * (8 - rate),
toLeft = pos.left + left * max,
toTop = pos.top + top * max;
transformContainer(el, "translate(" + toLeft + "px, " + toTop + "px)" );
})
}
}
$('.movebox').on('mousemove',onMouseMove);
})
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onMouseMove</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<style>
.movebox{background:#00ddff;width:1000px;height:600px;position: relative;}
.bird{background:url(http://www.qqw21.com/article/UploadPic/2012-8/2012812234952102.jpg) no-repeat center center;position:absolute;left: 254px; top: 100px;z-index:2; width: 200px; height:200px; }
.hua{background: url(http://www.zuo3.com/images/v/r/img02/r/t/101/bao/uploaded/i2/T1UTxhXox8dJPv9vMT_011613.jpg_310x310.jpg) no-repeat center center;position: absolute;right:200px;bottom:100px;width:200px;height:200px;}
</style>
<body>
<div class="movebox">
<div class="mousemove-item bird" data-z="1"></div>
<!--必须引入类名mousemove-item 设置属性data-z-->
<div class="mousemove-item hua" data-z="2"></div>
</div>
<script>
$(function(){
// 鼠标晃动 效果
$(function(){
function getTransforms(translate3d) {
return {
'-webkit-transform': translate3d,
'-moz-transform': translate3d,
'-ms-transform': translate3d,
'transform': translate3d
};
}
function transformContainer(element, translate3d) {
element.css(getTransforms(translate3d));
}
var noAnimate = !1;
var winWidth = $(window).width(),winHeight = $(window).height();
function onMouseMove(ev) {
if (!noAnimate) {
var left = (ev.clientX - .6 * winWidth) / (.6 * winWidth),
top = (ev.clientY - .6 * winHeight) / (.6 * winWidth),
elements = $(".mousemove-item");
elements.each(function() {
var el = $(this),
pos = {
left: this.style.left,
top: this.style.top
},
rate = parseInt(el.data("z")),
max = 4 * (8 - rate),
toLeft = pos.left + left * max,
toTop = pos.top + top * max;
transformContainer(el, "translate(" + toLeft + "px, " + toTop + "px)" );
})
}
}
$('.movebox').on('mousemove',onMouseMove);
})
})
</script>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
