jQuery鼠标滚动手风琴特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标滚动手风琴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jQuery鼠标滚动手风琴</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Style for the demo page -->
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		<!-- Style of the component -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
		</noscript>
		<!--<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&v2' rel='stylesheet' type='text/css'>-->
    </head>
    <body>
		<div class="container">
			<div id="va-accordion" class="va-container">
				<div class="va-nav">
					<span class="va-nav-prev">Previous</span>
					<span class="va-nav-next">Next</span>
				</div>
				<div class="va-wrapper">
					<div class="va-slice va-slice-1">
						<h3 class="va-title">Marketing</h3>
						<div class="va-content">
							<p>Henry Watson</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
					</div>
					<div class="va-slice va-slice-2">
						<h3 class="va-title">Management</h3>
						<div class="va-content">
							<p>Keith Johnson</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
					<div class="va-slice va-slice-3">
						<h3 class="va-title">Visual Design</h3>
						<div class="va-content">
							<p>Andrew Alaniz</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
					<div class="va-slice va-slice-4">
						<h3 class="va-title">Quality Control</h3>
						<div class="va-content">
							<p>Ben Freeman</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
					<div class="va-slice va-slice-5">
						<h3 class="va-title">Web development</h3>
						<div class="va-content">
							<p>Alex Schuman</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
					<div class="va-slice va-slice-6">
						<h3 class="va-title">Customer Support</h3>
						<div class="va-content">
							<p>Maria Wales</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
					<div class="va-slice va-slice-7">
						<h3 class="va-title">Server Administration</h3>
						<div class="va-content">
							<p>Paul White</p>
							<ul>
								<li><a href="#">About</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
				</div>
			</div>
			<div class="more">
				<ul>
					<li>More examples:</li>
					<li class="selected"><a href="index.html">Example 1</a></li>
					<li><a href="example2.html">Example 2</a></li>
					<li><a href="example3.html">Example 3</a></li>
					<li><a href="example4.html">Example 4</a></li>
					<li><a href="example5.html">Example 5</a></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/jquery.vaccordion.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#va-accordion').vaccordion();
			});
		</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代码(demo.css):

@import url('reset.css');body{background:#f9e830 url(../images/pattern.png) repeat top left;color:#fff;font-family:'PT Sans Narrow',Arial,sans-serif;font-size:12px;}
a{color:#000;text-decoration:none;}
.clr{clear:both;}
.container{width:100%;position:relative;z-index:100;margin:40px auto;}
.content{width:1000px;margin:0 auto;}
h1{margin:10px 0 0px 20px;font-size:34px;color:#000;text-shadow:1px 1px 1px #fef7a9;text-transform:uppercase;}
h1 span{font-size:18px;text-transform:none;}
.more ul{text-transform:uppercase;font-size:13px;padding:50px 0px 30px 0px;height:30px;clear:both;width:1000px;margin:10px auto 0 auto;color:#000;}
.more ul li{float:left;margin:0px 2px;}
.more ul li.selected a,.more ul li.selected a:hover{background:#000;color:#fff;text-shadow:none;}
.more ul li a{text-shadow:1px 1px 1px #fff;color:#555;background:#f7f7f7;padding:3px 6px;-moz-box-shadow:1px 1px 2px #aaa;-webkit-box-shadow:1px 1px 2px #aaa;box-shadow:1px 1px 2px #aaa;}
.more ul li a:hover{background:#000;color:#fff;text-shadow:none;}
.content{width:100%;position:relative;}
/* Footer Style */
.header{position:absolute;width:100%;height:25px;line-height:24px;top:0;font-size:13px;background:#000;opacity:0.9;text-transform:uppercase;z-index:4;}
.header a{padding:5px 10px;letter-spacing:1px;text-shadow:1px 1px 1px #000;color:#ddd;text-align:right;}
.header a:hover{color:#fff;}
.header a span{font-weight:bold;}
.header span.right_ab{position:absolute;right:4px;}

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;}
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):

/* Vertical Accordion Style */
.va-container{position:relative;margin:40px auto 0 auto;}
.va-wrapper{width:100%;height:100%;position:relative;overflow:hidden;background:#000;}
.va-slice{cursor:pointer;position:absolute;width:100%;left:0px;overflow:hidden;}
.va-slice-1{background:#000 url(../images/1.jpg) no-repeat center center;}
.va-slice-2{background:#000 url(../images/2.jpg) no-repeat center center;}
.va-slice-3{background:#000 url(../images/3.jpg) no-repeat center center;}
.va-slice-4{background:#000 url(../images/4.jpg) no-repeat center center;}
.va-slice-5{background:#000 url(../images/5.jpg) no-repeat center center;}
.va-slice-6{background:#000 url(../images/6.jpg) no-repeat center center;}
.va-slice-7{background:#000 url(../images/7.jpg) no-repeat center center;}
.va-slice-color-1{background-color:#97c5eb;}
.va-slice-color-2{background-color:#68ace5;}
.va-slice-color-3{background-color:#0072cf;}
.va-slice-color-4{background-color:#0039a6;}
.va-slice-color-5{background-color:#00338e;}
.va-slice-color-6{background-color:#002c76;}
.va-slice-color-7{background-color:#002144;}
.va-title{font-family:'Open Sans Condensed',sans-serif;text-transform:uppercase;font-size:60px;margin-left:20px;color:#fff;text-shadow:0px 0px 1px white;}
.va-content{display:none;margin-left:25px;}
.va-slice p{font-size:22px;font-style:italic;font-family:Georgia,serif;}
.va-slice ul{margin-top:20px;}
.va-slice ul li{float:left;margin:0px 2px;}
.va-slice ul li a{color:#000;background:#eede2f;padding:3px 6px;font-size:14px;font-family:'PT Sans',sans-serif;text-transform:uppercase;}
.va-slice ul li a:hover{background:#000;color:#fff;text-shadow:none;}
.va-nav span{width:40px;height:25px;background:transparent url(../images/prev.png) no-repeat center center;position:absolute;top:-35px;left:50%;margin-left:-20px;text-indent:-9000px;opacity:0.7;cursor:pointer;display:none;z-index:100;}
.va-nav span.va-nav-next{background-image:url(../images/next.png);top:auto;bottom:-35px;}
.va-nav span:hover{opacity:1.0;}

CSS代码(styleNoJS.css):

/* Vertical Accordion Style */
.va-container{position:relative;width:1000px;margin:40px auto 0 auto;}
.va-wrapper{width:100%;height:100%;position:relative;overflow:hidden;background:#000;}
.va-slice{cursor:pointer;position:relative;top:auto;left:auto;width:100%;height:250px;overflow:hidden;}
.va-slice-1{background:#000 url(../images/1.jpg) no-repeat center center;}
.va-slice-2{background:#000 url(../images/2.jpg) no-repeat center center;}
.va-slice-3{background:#000 url(../images/3.jpg) no-repeat center center;}
.va-slice-4{background:#000 url(../images/4.jpg) no-repeat center center;}
.va-slice-5{background:#000 url(../images/5.jpg) no-repeat center center;}
.va-slice-6{background:#000 url(../images/6.jpg) no-repeat center center;}
.va-slice-7{background:#000 url(../images/7.jpg) no-repeat center center;}
.va-title{font-family:'Open Sans Condensed',sans-serif;text-transform:uppercase;font-size:60px;margin-left:20px;color:#fff;text-shadow:0px 0px 1px white;}
.va-content{margin-left:25px;display:block;}
.va-slice p{font-size:22px;font-style:italic;font-family:Georgia,serif;}
.va-slice ul{margin-top:20px;}
.va-slice ul li{float:left;margin:0px 2px;}
.va-slice ul li a{color:#000;background:#eede2f;padding:3px 6px;font-size:14px;font-family:'PT Sans',sans-serif;text-transform:uppercase;}
.va-slice ul li a:hover{background:#000;color:#fff;text-shadow:none;}
.va-nav span{width:40px;height:25px;background:transparent url(../images/prev.png) no-repeat center center;position:absolute;top:-37px;left:50%;margin-left:-20px;text-indent:-9000px;opacity:0.7;cursor:pointer;display:none;}
.va-nav span.va-nav-next{background-image:url(../images/next.png);top:auto;bottom:-37px;}
.va-nav span:hover{opacity:1.0;}

附件:下载该文件资源,减少时间成本(增值服务)