仿京東專題的圖追蹤鼠標動的效果
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,