以下是 jQuery响应式动画片头效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/jquery.jparallax.0.9.1.js" ></script>
<title>jQuery动画片头效果</title>
<style>
body { font-family:arial; font-size:14px; background-image:url('http://www.jquery4u.com/demos/backgrounds/lightwood-vertical.jpg'); background-repeat:repeat; }
#page-wrap { background-color:#B8E3F5; width:950px; min-height:600px; margin-left:auto; margin-right:auto; border:2px solid #AFC2F0; }
#header { height:85px; width:950px; margin-top:20px; text-align:center; }
#content { background-color:#B8E3F5; width:950px; min-height:600px; text-align:left; }
h1 { padding:20px 10px 20px 10px; background-color:gray; color:white; margin:0; text-shadow: #9E9B9B 2px 2px 2px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E1E1', endColorstr='#CCCACA'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */
background: -moz-linear-gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */
}
.large { font-size:22px; }
.orange { color:orange; }
.italic { font-style:italic }
.textmiddle {vertical-align:middle;}
.padout { padding-left:25px; padding-right:25px; }
.rounded-corners {
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
}
.rounded-corners-top {
-moz-border-top-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
}
h2 { color:blue; font-size:22px; color:white; background-color:gray; padding:10px 10px 10px 20px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
text-shadow: #9E9B9B 2px 2px 2px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E3E1E1', endColorstr='#CCCACA'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#E3E1E1), to(#CCCACA)); /* for webkit browsers */
background: -moz-linear-gradient(top, #E3E1E1, #CCCACA); /* for firefox 3.6+ */
}
.scrolldown { padding-left:20px; color:#EDECE8; font-size:40px; font-weight:bold; vertical-align:middle;
text-shadow: #6374AB 2px 2px 2px;
}
#page-content { padding:20px; }
#parallax-header { height:200px; background-color:gray; }
#parallax {position:relative; overflow:hidden; width:950px; height:250px;
background-image:url('image/background.jpg');
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
//alert("hi");
jQuery('#parallax').jparallax();
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="header" >
<h1 class="rounded-corners">jQuery动画片头效果</h1>
</div>
<div id="content">
<!--
<div id="parallax">
<img src="parallax_drops/0.png" alt="" style="width:978px; height:325px;"/>
<img src="parallax_drops/1.png" alt="" style="width:987px; height:328px;"/>
<img src="parallax_drops/2.png" alt="" style="width:1001px; height:333px;"/>
<img src="parallax_drops/3.png" alt="" style="width:1031px; height:343px;"/>
<img src="parallax_drops/4.png" alt="" style="width:1067px; height:355px;"/>
<img src="parallax_drops/5.png" alt="" style="width:1120px; height:373px;"/>
<img src="parallax_drops/6.png" alt="" style="width:1200px; height:400px;"/>
</div>
-->
<div id="parallax">
<img src="image/grass.png" alt="" style="width:1200px; height:250px;"/>
<img src="image/frog2.png" alt="" style="width:500px; height:250px;"/>
<img src="image/butterflies3.png" alt="" style="width:1200px; height:300px;"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae sapien ac nulla vehicula luctus. Ut ut tortor ut quam interdum faucibus. Morbi sit amet pellentesque libero. Phasellus sed velit leo. Ut faucibus, massa in auctor ultrices, urna tortor condimentum dui, ac dictum mauris augue et neque. Quisque vehicula lobortis odio lacinia semper. Quisque pellentesque diam non sem pellentesque tempor. Vivamus luctus, nisl ac porta fringilla, enim eros ullamcorper justo, ac pellentesque quam velit quis nulla. Nulla varius justo id metus eleifend sed gravida nisl tempus. In hac habitasse platea dictumst. Nulla sed odio massa, sit amet vestibulum nulla. Mauris at justo nulla. Curabitur vel risus lacus.
</p>
<p>
Aenean suscipit felis sit amet tortor tincidunt ac ullamcorper neque fringilla. Vestibulum a neque elit, ac vestibulum dui. Maecenas et lectus vitae lorem adipiscing interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris euismod elit mi, eu tempor eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu facilisis dolor. In hac habitasse platea dictumst. Sed ac lectus vehicula arcu interdum adipiscing eget eget mi. Maecenas pharetra orci ut enim gravida egestas pulvinar eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eleifend tellus at augue consectetur faucibus nec vel tellus. Pellentesque pulvinar mi sit amet felis tristique vel volutpat eros elementum. Phasellus auctor metus tincidunt purus commodo placerat. Vestibulum nec aliquam nisi. Donec nec nisl urna. Integer fringilla tellus et felis adipiscing sit amet aliquam libero sodales. Duis laoreet placerat purus, nec vehicula justo pharetra eu. Etiam velit risus, consectetur eget viverra eu, tincidunt ut libero.
</p>
</div>
</div> <!-- end page wrap -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11577561-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
JS代码(jquery.jparallax.0.9.1.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
分享到微博
微信扫一扫
