版头跟随鼠标移动效果
2017-06-14 本文已影响0人
谢小逸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标动版头</title>
<style>
.userDefinedArea {
width: 1920px;
margin: 0 auto
}
.user-yh-top {
width: 990px;
height: 565px;
position: relative;
margin: 0 auto;
margin: 0 auto;
}
.user-yh-top p {
position: absolute;
top: 0;
left: 50%;
}
.user-yh-top p.p1 {
margin-left: -960px;
width: 1920px;
height: 100%;
}
.user-yh-top p.p2 {
margin-left: -495px;
width: 990px;
height: 278px;
z-index: 9999;
}
.user-yh-top p.p3 {
margin-left: -495px;
width: 990px;
height: 284px;
bottom: 0;
top: auto;
}
.user-yh-top p.p4 {
margin-left: -524px;
width: 210px;
height: 344px;
top: 160px;
}
</style>
</head>
<body>
<div class="mc" style=" min-height:0px;">
<div class="j-module" module-function="autoCenter" module-param="{}">
<div class="userDefinedArea">
<div class="user-yh-top">
<p class="p1"></p>
<p class="p2" ></p>
<p class="p3"></p>
<p class="p4"></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://t.moonbasa.com/Scripts/jquery-1.7.1.min.js?id=20141128"></script>
<script>
(function() {
$.fn.mouseMove = function() {
var container = $(this),
height = container.offset().top,
middle = $(window).width() / 2;
container.find('p.p2').each(function() {
var s = $(this);
s.attr('offset-left', s.css('left') || 0);
s.attr('offset-top', s.css('top') || 0);
s.attr('offset-speed-x', Math.random() * 0.08);
s.attr('offset-speed-y', Math.random() * 0.06);
});
$(document).mousemove(function(e) {
if ($(document).scrollTop() <= height) {
var myMouseX = e.pageX - middle,
myMouseY = e.pageY - height / 2;
container.find('p.p2').each(function() {
var s = $(this);
s.css('left', parseInt(s.attr('offset-left')) + myMouseX * parseFloat(s.attr('offset-speed-x')));
s.css('top', parseInt(s.attr('offset-top')) + myMouseY * parseFloat(s.attr('offset-speed-y')));
});
}
});
}
$('.user-yh-top').mouseMove();
})(jQuery);
</script>
</body>
</html>
