您的位置：首页 > 其它

仿京东专题的图追踪鼠标动的效果

2018-01-24 19:58 183 查看

<!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>



<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航