以下是 jquery多层视觉鼠标跟随效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>abc</title>
<style>
<!--
* {margin: 0;padding:0;}
img{border:none;}
body {margin:0 auto;text-align:center; position:relative;}
h2{padding:20px;}
#parallax{position:relative; overflow:hidden; width:60em; height:20em; margin:0 auto;}
p {color:#B3B3B3;font-size:10px;}
-->
</style>
<script type="text/javascript" src="js/jquery.1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.jparallax.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('#parallax').jparallax({triggerExposesEdges: true}, {xtravel:0.2, ytravel:0.2}, {xtravel:0.6, ytravel:0.6});
});
//-->
</script>
</head>
<body>
<div id="content">
<h2>jParallax </h2>
<div id="parallax" class="clear">
<div style="width:860px; height:273px;">
<img src="images/0_sun.png" alt="" width="80" height="79" / style="position:absolute;left:300px;top:-12px;"></div>
<div style="width:920px; height:274px;">
<img src="images/1_mountains.png" alt="" /></div>
<div style="width:1100px; height:284px;">
<img src="images/2_hill.png" alt="" style="position:absolute; top:40px; left:0;" /></div>
<div style="width:1360px; height:320px;">
<img src="images/3_wood.png" alt="" style="position:absolute; top:96px; left:0;" /></div>
</div>
</div>
</body>
</html>
JS代码(jquery.jparallax.js):
// jquery.jparallax.js// 0.9.1// Stephen Band//// Dependencies:// jQuery 1.2.6 (jquery.com)//// Project and documentation site:// http://webdev.stephband.info/parallax.html// CLOSURE(function(jQuery){
// PRIVATE FUNCTIONSfunction stripFiletype(ref){
var x=ref.replace('.html','');
return x.replace('#','');
}
function initOrigin(l){
if (l.xorigin=='left'){
l.xorigin=0;
}
else if (l.xorigin=='middle' || l.xorigin=='centre' || l.xorigin=='center'){
l.xorigin=0.5;
}
else if (l.xorigin=='right'){
l.xorigin=1;
}
if (l.yorigin=='top'){
l.yorigin=0;
}
else if (l.yorigin=='middle' || l.yorigin=='centre' || l.yorigin=='center'){
l.yorigin=0.5;
}
else if (l.yorigin=='bottom'){
l.yorigin=1;
}
}
function positionMouse(mouseport,localmouse,virtualmouse){
var difference ={
x:0,y:0,sum:0}
;
// Set where the virtual mouse is,if not on target if (!mouseport.ontarget){
// Calculate difference difference.x = virtualmouse.x - localmouse.x;
difference.y = virtualmouse.y - localmouse.y;
difference.sum = Math.sqrt(difference.x*difference.x + difference.y*difference.y);
// Reset virtualmouse virtualmouse.x = localmouse.x + difference.x * mouseport.takeoverFactor;
virtualmouse.y = localmouse.y + difference.y * mouseport.takeoverFactor;
// If mouse is inside the takeoverThresh set ontarget to true if (difference.sum < mouseport.takeoverThresh && difference.sum > mouseport.takeoverThresh*-1){
mouseport.ontarget=true;
}
}
// Set where the layer is if on target else{
virtualmouse.x = localmouse.x;
virtualmouse.y = localmouse.y;
}
}
function setupPorts(viewport,mouseport){
var offset = mouseport.element.offset();
jQuery.extend(viewport,{
width:viewport.element.width(),height:viewport.element.height()}
);
jQuery.extend(mouseport,{
width:mouseport.element.width(),height:mouseport.element.height(),top:offset.top,left:offset.left}
);
}
function parseTravel(travel,origin,dimension){
var offset;
var cssPos;
if (typeof(travel) === 'string'){
if (travel.search(/^\d+\s?px$/) != -1){
travel = travel.replace('px','');
travel = parseInt(travel,10);
// Set offset constant used in moveLayers() offset = origin * (dimension-travel);
// Set origin now because it won't get altered in moveLayers() cssPos = origin * 100 + '%';
return{
travel:travel,travelpx:true,offset:offset,cssPos:cssPos}
;
}
else if (travel.search(/^\d+\s?%$/) != -1){
travel.replace('%','');
travel = parseInt(travel,10) / 100;
}
else{
travel=1;
}
}
// Set offset constant used in moveLayers() offset = origin * (1 - travel);
return{
travel:travel,travelpx:false,offset:offset}
}
function setupLayer(layer,i,mouseport){
var xStuff;
var yStuff;
var cssObject ={
}
;
layer[i]=jQuery.extend({
}
,{
width:layer[i].element.width(),height:layer[i].element.height()}
,layer[i]);
xStuff = parseTravel(layer[i].xtravel,layer[i].xorigin,layer[i].width);
yStuff = parseTravel(layer[i].ytravel,layer[i].yorigin,layer[i].height);
jQuery.extend(layer[i],{
// Used in triggerResponsediffxrat:mouseport.width / (layer[i].width - mouseport.width),diffyrat:mouseport.height / (layer[i].height - mouseport.height),// Used in moveLayersxtravel:xStuff.travel,ytravel:yStuff.travel,xtravelpx:xStuff.travelpx,ytravelpx:yStuff.travelpx,xoffset:xStuff.offset,yoffset:yStuff.offset}
);
// Set origin now if it won't be altered in moveLayers() if (xStuff.travelpx){
cssObject.left = xStuff.cssPos;
}
if (yStuff.travelpx){
cssObject.top = yStuff.cssPos;
}
if (xStuff.travelpx || yStuff.travelpx){
layer[i].element.css(cssObject);
}
}
function setupLayerContents(layer,i,viewportOffset){
var contentOffset;
// Give layer a content object jQuery.extend(layer[i],{
content:[]}
);
// Layer content:get positions,dimensions and calculate element offsets for centering children of layers for (var n=0;
n<layer[i].element.children().length;
n++){
if (!layer[i].content[n]) layer[i].content[n] ={
}
;
if (!layer[i].content[n].element) layer[i].content[n]['element'] = layer[i].element.children().eq(n);
// Store the anchor name if one has not already been specified. You can specify anchors in Layer Options rather than html if you want. if(!layer[i].content[n].anchor && layer[i].content[n].element.children('a').attr('name')){
layer[i].content[n]['anchor'] = layer[i].content[n].element.children('a').attr('name');
}
// Only bother to store child's dimensions if child has an anchor. What's the point otherwise? if(layer[i].content[n].anchor){
contentOffset = layer[i].content[n].element.offset();
jQuery.extend(layer[i].content[n],{
width:layer[i].content[n].element.width(),height:layer[i].content[n].element.height(),x:contentOffset.left - viewportOffset.left,y:contentOffset.top - viewportOffset.top}
);
jQuery.extend(layer[i].content[n],{
posxrat:(layer[i].content[n].x + layer[i].content[n].width/2) / layer[i].width,posyrat:(layer[i].content[n].y + layer[i].content[n].height/2) / layer[i].height}
);
}
}
}
function moveLayers(layer,xratio,yratio){
var xpos;
var ypos;
var cssObject;
for (var i=0;
i<layer.length;
i++){
// Calculate the moving factorxpos = layer[i].xtravel * xratio + layer[i].xoffset;
ypos = layer[i].ytravel * yratio + layer[i].yoffset;
cssObject ={
}
;
// Do the moving by pixels or by ratio depending on travelpx if (layer[i].xparallax){
if (layer[i].xtravelpx){
cssObject.marginLeft = xpos * -1 + 'px';
}
else{
cssObject.left = xpos * 100 + '%';
cssObject.marginLeft = xpos * layer[i].width *-1 + 'px';
}
}
if (layer[i].yparallax){
if (layer[i].ytravelpx){
cssObject.marginTop = ypos * -1 + 'px';
}
else{
cssObject.top = ypos * 100 + '%';
cssObject.marginTop = ypos * layer[i].height * -1 + 'px';
}
}
layer[i].element.css(cssObject);
}
}
// PLUGIN DEFINITION **********************************************************************jQuery.fn.jparallax = function(options){
// Organise settings into objects (Is this a bit of a mess,or is it efficient?)var settings = jQuery().extend({
}
,jQuery.fn.jparallax.settings,options);
var settingsLayer ={
xparallax:settings.xparallax,yparallax:settings.yparallax,xorigin:settings.xorigin,yorigin:settings.yorigin,xtravel:settings.xtravel,ytravel:settings.ytravel}
;
var settingsMouseport ={
element:settings.mouseport,takeoverFactor:settings.takeoverFactor,takeoverThresh:settings.takeoverThresh}
;
if (settings.mouseport) settingsMouseport['element'] = settings.mouseport;
// Populate layer array with default settingsvar layersettings = [];
for(var a=1;
a<arguments.length;
a++){
layersettings.push( jQuery.extend({
}
,settingsLayer,arguments[a]) );
}
// Iterate matched elementsreturn this.each(function(){
// VARvar localmouse ={
x:0.5,y:0.5}
;
var virtualmouse ={
x:0.5,y:0.5}
;
var timer ={
running:false,frame:settings.frameDuration,fire:function(x,y){
positionMouse(mouseport,localmouse,virtualmouse);
moveLayers(layer,virtualmouse.x,virtualmouse.y);
this.running = setTimeout(function(){
if ( localmouse.x!=x || localmouse.y!=y || !mouseport.ontarget ){
timer.fire(localmouse.x,localmouse.y);
}
else if (timer.running){
timer.running=false;
}
}
,timer.frame);
}
}
;
var viewport={
element:jQuery(this)}
;
var mouseport = jQuery.extend({
}
,{
element:viewport.element}
,settingsMouseport,{
xinside:false,// is the mouse inside the mouseport's dimensions?yinside:false,active:false,// are the mouse coordinates still being read?ontarget:false// is the top layer inside the takeoverThresh?}
);
var layer= [];
// FUNCTIONS function matrixSearch(layer,ref,callback){
for (var i=0;
i<layer.length;
i++){
var gotcha=false;
for (var n=0;
n<layer[i].content.length;
n++){
if (layer[i].content[n].anchor==ref){
callback(i,n);
return [i,n];
}
}
}
return false;
}
// RUN setupPorts(viewport,mouseport);
// Cycle through and create layers for (var i=0;
i<viewport.element.children().length;
i++){
// Create layer from settings if it doesn't existlayer[i]=jQuery.extend({
}
,settingsLayer,layersettings[i],{
element:viewport.element.children('*:eq('+i+')')}
);
setupLayer(layer,i,mouseport);
if (settings.triggerResponse){
setupLayerContents(layer,i,viewport.element.offset());
}
}
// Set up layers CSS and initial position viewport.element.children().css('position','absolute');
moveLayers(layer,0.5,0.5);
// Mouse Responseif (settings.mouseResponse){
jQuery().mousemove(function(mouse){
// Is mouse inside?mouseport.xinside = (mouse.pageX >= mouseport.left && mouse.pageX < mouseport.width+mouseport.left) ? true:false;
mouseport.yinside = (mouse.pageY >= mouseport.top && mouse.pageY < mouseport.height+mouseport.top) ? true:false;
// Then switch active on.if (mouseport.xinside && mouseport.yinside && !mouseport.active){
mouseport.ontarget = false;
mouseport.active = true;
}
// If active is on give localmouse coordinatesif (mouseport.active){
if (mouseport.xinside){
localmouse.x = (mouse.pageX - mouseport.left) / mouseport.width;
}
else{
localmouse.x = (mouse.pageX < mouseport.left) ? 0:1;
}
if (mouseport.yinside){
localmouse.y = (mouse.pageY - mouseport.top) / mouseport.height;
}
else{
localmouse.y = (mouse.pageY < mouseport.top) ? 0:1;
}
}
// If mouse is inside,fire timerif (mouseport.xinside && mouseport.yinside){
if (!timer.running) timer.fire(localmouse.x,localmouse.y);
}
else if (mouseport.active){
mouseport.active = false;
}
}
);
}
// Trigger Responseif (settings.triggerResponse){
viewport.element.bind("jparallax",function(event,ref){
ref = stripFiletype(ref);
matrixSearch(layer,ref,function(i,n){
localmouse.x = layer[i].content[n].posxrat * (layer[i].diffxrat + 1) - (0.5 * layer[i].diffxrat);
localmouse.y = layer[i].content[n].posyrat * (layer[i].diffyrat + 1) - (0.5 * layer[i].diffyrat);
if (!settings.triggerExposesEdges){
if (localmouse.x < 0) localmouse.x = 0;
if (localmouse.x > 1) localmouse.x = 1;
if (localmouse.y < 0) localmouse.y = 0;
if (localmouse.y > 1) localmouse.y = 1;
}
mouseport.ontarget = false;
if (!timer.running) timer.fire(localmouse.x,localmouse.y);
}
);
}
);
}
// Window Resize ResponsejQuery(window).resize(function(){
setupPorts(viewport,mouseport);
for (var i=0;
i<layer.length;
i++){
setupLayer(layer,i,mouseport);
}
}
);
}
);
}
;
// END OF PLUGIN DEFINITION **********************************************************************/
/ PLUGIN DEFAULTSjQuery.fn.jparallax.settings ={
mouseResponse:true,// Sets mouse responsemouseActiveOutside:false,// Makes mouse affect layers from outside of the mouseport.triggerResponse:true,// Sets trigger response triggerExposesEdges:false,// Sets whether the trigger pulls layer edges into view in trying to centre layer content.xparallax:true,// Sets directions to move inyparallax:true,//xorigin:0.5,// Sets default alignment - only comes into play when travel is not 1yorigin:0.5,//xtravel:1,// Factor by which travel is amplifiedytravel:1,//takeoverFactor:0.65,// Sets rate of decay curve for catching up with target mouse positiontakeoverThresh:0.002,// Sets the distance within which virtualmouse is considered to be on target,as a multiple of mouseport width.frameDuration:25// In milliseconds}
;
// RUNinitOrigin(jQuery.fn.jparallax.settings);
jQuery(function(){
}
);
// END CLOSURE}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
