以下是 jquery滑动组合相册效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>����FLASH����Ч���˵���ȫ����ʾjQuery���ģ��</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Astloch:regular,bold' rel='stylesheet' type='text/css' />-->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
</head>
<body>
<div id="mb_background" class="mb_background">
<img class="mb_bgimage" src="images/default.jpg" alt="Background"/>
<div class="mb_overlay"></div>
<div class="mb_loading"></div>
</div>
<div id="mb_pattern" class="mb_pattern"></div>
<div class="mb_heading">
<h1>Lack of Color</h1>
</div>
<div id="mb_menu" class="mb_menu">
<a href="#" data-speed="1000" data-easing="easeOutBack">About</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Work</a>
<a href="#" data-speed="1000" data-easing="easeOutBack">Media</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Contact</a>
</div>
<div id="mb_content_wrapper" class="mb_content_wrapper">
<span class="mb_close"></span>
<div class="mb_content">
<h2>About</h2>
<div class="mb_content_inner">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human</p>
</div>
</div>
<div class="mb_content">
<h2>Work</h2>
<div class="mb_content_inner">
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
<ul id="mb_imagelist" class="mb_imagelist">
<li><img src="images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li>
<li><img src="images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li>
<li><img src="images/small/3.jpg" alt="image3" data-bgimg="images/image3.jpg"/></li>
<li><img src="images/small/4.jpg" alt="image4" data-bgimg="images/image4.jpg"/></li>
<li><img src="images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li>
<li><img src="images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li>
<li><img src="images/small/4.jpg" alt="image4" data-bgimg="images/image4.jpg"/></li>
<li><img src="images/small/3.jpg" alt="image3" data-bgimg="images/image3.jpg"/></li>
</ul>
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
<p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
<p>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</p>
</div>
</div>
<div class="mb_content">
<h2>Media</h2>
<div class="mb_content_inner">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
<p>The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human</p>
</div>
</div>
<div class="mb_content">
<h2>Contact</h2>
<div class="mb_content_inner">
<form>
<div><label>Name:</label><input type="text" /></div>
<div><label>Email:</label><input type="text" /></div>
<div><label>Message:</label><textarea></textarea></div>
<div><button>Send</button></div>
</form>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('#mb_menu'),
$menuItems = $menu.children('a'),
$mbWrapper = $('#mb_content_wrapper'),
$mbClose = $mbWrapper.children('.mb_close'),
$mbContentItems = $mbWrapper.children('.mb_content'),
$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
$mbPattern = $('#mb_pattern'),
$works = $('#mb_imagelist > li'),
$mb_bgimage = $('#mb_background > img'),
Menu = (function(){
var init = function() {
preloadImages();
initPlugins();
initPattern();
initEventsHandler();
},
//preloads the images for the work area (data-bgimg attr)
preloadImages = function() {
$works.each(function(i) {
$('<img/>').attr('src' , $(this).children('img').data('bgimg'));
});
},
//initialise the jScollPane (scroll plugin)
initPlugins = function() {
$mbContentInnerItems.jScrollPane({
verticalDragMinHeight: 40,
verticalDragMaxHeight: 40
});
},
/*
draws 16 boxes on a specific area of the page.
we randomly calculate the top, left, and rotation angle for each one of them
*/
initPattern = function() {
for(var i = 0; i < 16 ; ++i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $('<div>').css({
opacity : o,
top : t + 'px',
left : l + 'px'
});
if (!$.browser.msie)
$el.transform({'rotate' : a + 'deg'});
$el.appendTo($mbPattern);
}
$mbPattern.children().draggable(); //just for fun
},
/*
when the User closes a content item, we move the boxes back to the original place,
with new random values for top, left and angle though
*/
disperse = function() {
$mbPattern.children().each(function(i) {
//random opacity, top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $(this),
param = {
width : '50px',
height : '50px',
opacity : o,
top : t + 'px',
left : l + 'px'
};
if (!$.browser.msie)
param.rotate = a + 'deg';
$el.animate(param, 1000, 'easeOutExpo');
});
},
initEventsHandler = function() {
/*
click a link in the menu
*/
$menuItems.bind('click', function(e) {
var $this = $(this),
pos = $this.index(),
speed = $this.data('speed'),
easing = $this.data('easing');
//if an item is not yet shown
if(!$menu.data('open')){
//if current animating return
if($menu.data('moving')) return false;
$menu.data('moving', true);
$.when(openItem(pos, speed, easing)).done(function(){
$menu.data({
open : true,
moving : false
});
showContentItem(pos);
$mbPattern.children().fadeOut(500);
});
}
else
showContentItem(pos);
return false;
});
/*
click close makes the boxes animate to the top of the page
*/
$mbClose.bind('click', function(e) {
$menu.data('open', false);
/*
if we would want to show the default image when we close:
changeBGImage('images/default.jpg');
*/
$mbPattern.children().fadeIn(500, function() {
$mbContentItems.hide();
$mbWrapper.hide();
});
disperse();
return false;
});
/*
click an image from "Works" content item,
displays the image on the background
*/
$works.bind('click', function(e) {
var source = $(this).children('img').data('bgimg');
changeBGImage(source);
return false;
});
},
/*
changes the background image
*/
changeBGImage = function(img) {
//if its the current one return
if($mb_bgimage.attr('src') === img || $mb_bgimage.siblings('img').length > 0)
return false;
var $itemImage = $('<img src="'+img+'" alt="Background" class="mb_bgimage" style="display:none;"/>');
$itemImage.insertBefore($mb_bgimage);
$mb_bgimage.fadeOut(1000, function() {
$(this).remove();
$mb_bgimage = $itemImage;
});
$itemImage.fadeIn(1000);
},
/*
This shows a content item when there is already one shown:
*/
showContentItem = function(pos) {
$mbContentItems.hide();
$mbWrapper.show();
$mbContentItems.eq(pos).show().children('.mb_content_inner').jScrollPane();
},
/*
moves the boxes from the top to the center of the page,
and shows the respective content item
*/
openItem = function(pos, speed, easing) {
return $.Deferred(
function(dfd) {
$mbPattern.children().each(function(i) {
var $el = $(this),
param = {
width : '100px',
height : '100px',
top : 154 + 100 * Math.floor(i/4),
left : 200 + 100 * (i%4),
opacity : 1
};
if (!$.browser.msie)
param.rotate = '0deg';
$el.animate(param, speed, easing, dfd.resolve);
});
}
).promise();
};
return {
init : init
};
})();
/*
call the init method of Menu
*/
Menu.init();
});
</script>
</body>
</html>JS代码(jquery.mousewheel.js):
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). * * 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. * Thanks to:Seamus Leahy for adding deltaX and deltaY * * Version:3.0.4 * * Requires:1.2.2+ */
(function($){
var types = ['DOMMouseScroll','mousewheel'];
$.event.special.mousewheel ={
setup:function(){
if ( this.addEventListener ){
for ( var i=types.length;
i;
){
this.addEventListener( types[--i],handler,false );
}
}
else{
this.onmousewheel = handler;
}
}
,teardown:function(){
if ( this.removeEventListener ){
for ( var i=types.length;
i;
){
this.removeEventListener( types[--i],handler,false );
}
}
else{
this.onmousewheel = null;
}
}
}
;
$.fn.extend({
mousewheel:function(fn){
return fn ? this.bind("mousewheel",fn):this.trigger("mousewheel");
}
,unmousewheel:function(fn){
return this.unbind("mousewheel",fn);
}
}
);
function handler(event){
var orgEvent = event || window.event,args = [].slice.call( arguments,1 ),delta = 0,returnValue = true,deltaX = 0,deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta if ( event.wheelDelta ){
delta = event.wheelDelta/120;
}
if ( event.detail ){
delta = -event.detail/3;
}
// New school multidimensional scroll (touchpads) deltas deltaY = delta;
// Gecko if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ){
deltaY = 0;
deltaX = -1*delta;
}
// Webkit if ( orgEvent.wheelDeltaY !== undefined ){
deltaY = orgEvent.wheelDeltaY/120;
}
if ( orgEvent.wheelDeltaX !== undefined ){
deltaX = -1*orgEvent.wheelDeltaX/120;
}
// Add event and delta to the front of the arguments args.unshift(event,delta,deltaX,deltaY);
return $.event.handle.apply(this,args);
}
}
)(jQuery);
CSS代码(reset.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
CSS代码(style.css):
@import url('reset.css');body{background:#000;color:#fff;font-family:'PT Sans Narrow',Arial,sans-serif;}
a{color:#fff;text-decoration:none;}
img.mb_bgimage{position:fixed;left:0px;top:0px;width:100%;opacity:0.8;z-index:1;}
.mb_overlay{width:100%;height:100%;position:fixed;top:0px;left:0px;background:transparent url(../images/pattern.png) repeat top left;z-index:2;}
.mb_pattern div{position:absolute;width:50px;height:50px;background:#000;z-index:10;}
.mb_heading h1{position:absolute;top:10px;left:10px;font-size:86px;color:#000;text-shadow:0px 0px 1px #fff;font-family:"Astloch",Arial,sans-serif;z-index:4;}
.mb_menu{position:absolute;top:154px;left:0px;z-index:11;}
.mb_menu a{background-color:#000;margin-bottom:2px;opacity:0.9;display:block;width:98px;height:98px;color:#fff;line-height:98px;text-align:center;text-transform:uppercase;outline:none;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;-transition:all 0.2s ease-in;}
.mb_menu a:hover{color:#000;background-color:#fff;}
.mb_content_wrapper{background:transparent url(../images/bg_menu.png) repeat top left;width:400px;height:400px;position:absolute;top:154px;left:200px;z-index:4;display:none;}
span.mb_close{position:absolute;top:10px;right:10px;width:11px;height:12px;cursor:pointer;background:transparent url(../images/close.png) no-repeat top left;opacity:0.8;}
span.mb_close:hover{opacity:1.0;}
.mb_content{padding:30px;display:none;}
.mb_content h2{font-family:"Astloch";text-shadow:0px 0px 1px #fff;font-size:42px;background:transparent url(../images/line.png) repeat-x bottom left;padding:0px 0px 5px 0px;margin-bottom:10px;}
.mb_content_inner{line-height:24px;height:268px;outline:none;}
.mb_content_inner p{padding:5px 0px;}
ul.mb_imagelist li{float:left;margin:2px;cursor:pointer;}
ul.mb_imagelist li img{display:block;opacity:0.3;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-transition:all 0.5s ease-in-out;}
ul.mb_imagelist li img:hover{opacity:1.0;}
.mb_content form label{float:left;width:100px;text-align:right;margin-right:10px;}
.mb_content form div{padding:5px 0px;}
.mb_content form input,.mb_content form textarea{border:none;background:#fff;width:200px;font-family:Arial;color:#555;padding:4px;}
.mb_content form textarea{height:140px;}
button{background:#ddd;border:none;color:#000;padding:3px 10px;font-family:'PT Sans Narrow',Arial,sans-serif;cursor:pointer;float:right;margin-right:22px;}
button:hover{background:#fff;}
.mb_footer{position:fixed;bottom:0px;left:0px;width:100%;font-size:13px;background:#000;opacity:0.9;height:20px;padding-bottom:5px;text-transform:uppercase;z-index:4;}
.mb_footer a{padding:5px 10px;letter-spacing:1px;text-shadow:1px 1px 1px #000;color:#ddd;float:right;}
.mb_footer a:hover{color:#fff;}
.mb_footer a span{font-weight:bold;}
.mb_footer a.mb_left{float:left;}
分享到QQ
分享到微博
微信扫一扫
