以下是 jquery元素跟随鼠标移动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery元素跟随鼠标移动</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
float: left;
}
.clear {
clear: both;
}
html, body {
color: #737373;
background: url(images/bg.jpg) #E4E7E8 no-repeat center center;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute
}
#container {
width: 100%;
position: absolute
}
#indexgs {
width: 1128px;
height: 508px;
position: relative;
}
#indexgs img {
position: absolute;
}
#indexg2 {
left: 1000px;
top: 1000px;
}
#indexg1 {
left: -1000px;
top: 1000px;
position: absolute
}
#indexg1 a {
width: 244px;
height: 51px;
display: block;
background: url(images/indexlogo.png);
position: relative;
top: 107px;
left: 109px;
}
#indexg1 a:hover {
width: 244px;
height: 51px;
display: block;
background: url(images/indexlogo2.png);
}
#indexg0 {
left: 0;
top: 1000px;
position: absolute;
}
#indexg0 a {
width: 54px;
height: 54px;
display: block;
background: url(images/blog2.png);
position: relative;
top: 263px;
left: 800px;
}
#indexg0 a:hover {
background: url(images/blog1.png)
}
#indexmask {
background: url(images/bjd.png);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none
}
</style>
<script type="text/javascript" src="js/packed_jquery.min6301986802.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function () {
var index_div_pro = [{
sx: 0,
sy: 0,
mw: 3,
mh: 1,
bx: 8.4,
by: 10.4,
rx: -0.6
},
{
sx: 35,
sy: 0,
mw: 3,
mh: 0.5,
bx: 6.4,
by: 8.4,
rx: -0.1
},
{
sx: 785,
sy: 90,
mw: 0.3,
mh: 0.1,
bx: 6.5,
by: 7.4,
rx: -0.1
}];
var ePageX = null;
var ePageY = null;
function getMousePos(expression) {
if (ePageX == null || ePageY == null) return null;
var _x = $(expression).position().left;
_x += ePageX - $(expression).parent().position().left;
var _y = $(expression).position().top;
_y += ePageY - $(expression).parent().position().top;
return {
x: _x,
y: _y
}
};
var index_xh = setInterval(function () {
for (var i = 0; i < 3; i++) {
var mousepos = getMousePos("#indexg" + i);
if (mousepos != null) {
var left = parseInt($("#indexg" + i).css("left"));
var l = left + (index_div_pro[i].sx + index_div_pro[i].mw - (mousepos.x - 100) / index_div_pro[i].bx * index_div_pro[i].rx - left) * 0.2;
var top = parseInt($("#indexg" + i).css("top"));
var t = top + (index_div_pro[i].sy + index_div_pro[i].mh - (mousepos.y - 100) / index_div_pro[i].by - top) * 0.2;
$("#indexg" + i).css({
left: l,
top: t
})
}
}
},
15);
$("body").mousemove(function (event) {
event = event || window.event;
ePageX = event.pageX;
ePageY = event.pageY;
});
});
</script>
</head>
<body>
<div id="indexgs"> <img id="indexg2" src="images/g3.png" width="364" height="308"/>
<div id="indexg0"> <img src="images/g1.png" width="918" height="508"/> <a href="#"></a> </div>
<div id="indexg1"> <img src="images/g2.png" width="353" height="538"/> <a href="#"></a> </div>
</div>
</body>
</html>
JS代码(jquery.mousewheel.js):
/* Copyright (c) 2006 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * Thanks to:http://adomas.org/javascript-mouse-wheel/ for some pointers. * Thanks to:Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. * Download by http://www.jb51.net * $LastChangedDate:2007-12-20 09:02:08 -0600 (Thu,20 Dec 2007) $ * $Rev:4265 $ * * Version:3.0 * * Requires:$ 1.2.2+ */
(function($){
$.event.special.mousewheel ={
setup:function(){
var handler = $.event.special.mousewheel.handler;
// Fix pageX,pageY,clientX and clientY for mozillaif ( $.browser.mozilla )$(this).bind('mousemove.mousewheel',function(event){
$.data(this,'mwcursorposdata',{
pageX:event.pageX,pageY:event.pageY,clientX:event.clientX,clientY:event.clientY}
);
}
);
if ( this.addEventListener )this.addEventListener( ($.browser.mozilla ? 'DOMMouseScroll':'mousewheel'),handler,false);
elsethis.onmousewheel = handler;
}
,teardown:function(){
var handler = $.event.special.mousewheel.handler;
$(this).unbind('mousemove.mousewheel');
if ( this.removeEventListener )this.removeEventListener( ($.browser.mozilla ? 'DOMMouseScroll':'mousewheel'),handler,false);
elsethis.onmousewheel = function(){
}
;
$.removeData(this,'mwcursorposdata');
}
,handler:function(event){
var args = Array.prototype.slice.call( arguments,1 );
event = $.event.fix(event || window.event);
// Get correct pageX,pageY,clientX and clientY for mozilla$.extend( event,$.data(this,'mwcursorposdata') ||{
}
);
var delta = 0,returnValue = true;
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
//if ( $.browser.opera ) delta = -event.wheelDelta;
event.data = event.data ||{
}
;
event.type = "mousewheel";
// Add delta to the front of the argumentsargs.unshift(delta);
// Add event to the front of the argumentsargs.unshift(event);
return $.event.handle.apply(this,args);
}
}
;
$.fn.extend({
mousewheel:function(fn){
return fn ? this.bind("mousewheel",fn):this.trigger("mousewheel");
}
,unmousewheel:function(fn){
return this.unbind("mousewheel",fn);
}
}
);
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
