以下是 jquery滑动手风琴特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>jquery滑动手风琴</title>
<style>
html {
background: #f3f3f3 url(images/resize.png) bottom right no-repeat;
height: 100%;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/unleash.1.2.css" />
<script src="js/jquery-css-transform.js" type="text/javascript"></script>
<script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script src="js/jquery.unleash.min.1.2.js" type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function() {
$('#outer').unleash({
duration: 700,
childClassName: '.box',
captionClassName: '.caption_1',
SliderWidth: '940px',
OpenFirstOnload: true,
SliderHeight: '300px',
width: 0.63,
Event: "hover",
easing: "easeOutQuad",
captionEasing: "easeInOutBack",
CollapseOnMouseLeave: true,
CaptionAnimation: "pop-up"
});
});
</script>
</head>
<body>
<div style="width:70%; margin:auto; margin-top:10%;">
<div id="outer">
<div class="box"> <img src="images/p1.jpg" />
<div class="caption_1"> <a href="#">
<h1>Caption title</h1>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="box"> <img src="images/p2.jpg" />
<div class="caption_1"> <a href="#">
<h1>Caption title</h1>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
</div>
</div>
<div class="box"> <img src="images/p3.jpg" />
<div class="caption_1"> <a href="#">
<h1>Caption title</h1>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
</div>
</div>
<div class="box"> <img src="images/p4.jpg" />
<div class="caption_1"> <a href="#">
<h1>Caption title</h1>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh ultrices adipiscing. In fringilla auctor mauris ac mollis, Sed pharetra consectetur risus eu blandit. Fusce volutpat adipiscing eleifend. Aliquam gravida mollis odio, a consequat urna dictum quis.</p>
</div>
</div>
<div class="box"> <img src="images/p5.jpg" />
<div class="caption_1"> <a href="#">
<h1>Caption title</h1>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
</div>
</div>
<div class="box"> <img src="images/p6.jpg" />
<div class="caption_1"> <a href="#">
<h1>Caption title</h1>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lorem vitae nibh ultrices adipiscing. In fringilla auctor mauris ac mollis.</p>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(jquery-animate-css-rotate-scale.js):
(function ($){
// Monkey patch jQuery 1.3.1+ to add support for setting or animating CSS // scale and rotation independently. // 2009-2010 Zachary Johnson www.zachstronaut.com // Updated 2010.11.06 var rotateUnits = 'deg';
$.fn.rotate = function (val){
var style = $(this).css('transform') || 'none';
if (typeof val == 'undefined'){
if (style){
var m = style.match(/rotate\(([^)]+)\)/);
if (m && m[1]){
return m[1];
}
}
return 0;
}
var m = val.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/);
if (m){
if (m[3]){
rotateUnits = m[3];
}
$(this).css( 'transform',style.replace(/none|rotate\([^)]*\)/,'') + 'rotate(' + m[1] + rotateUnits + ')' );
}
return this;
}
// Note that scale is unitless. $.fn.scale = function (val,duration,options){
var style = $(this).css('transform');
if (typeof val == 'undefined'){
if (style){
var m = style.match(/scale\(([^)]+)\)/);
if (m && m[1]){
return m[1];
}
}
return 1;
}
$(this).css( 'transform',style.replace(/none|scale\([^)]*\)/,'') + 'scale(' + val + ')' );
return this;
}
// fx.cur() must be monkey patched because otherwise it would always // return 0 for current rotate and scale values var curProxied = $.fx.prototype.cur;
$.fx.prototype.cur = function (){
if (this.prop == 'rotate'){
return parseFloat($(this.elem).rotate());
}
else if (this.prop == 'scale'){
return parseFloat($(this.elem).scale());
}
return curProxied.apply(this,arguments);
}
$.fx.step.rotate = function (fx){
$(fx.elem).rotate(fx.now + rotateUnits);
}
$.fx.step.scale = function (fx){
$(fx.elem).scale(fx.now);
}
/* Starting on line 3905 of jquery-1.3.2.js we have this code:// We need to compute starting value if ( unit != "px" ){
self.style[ name ] = (end || 1) + unit;
start = ((end || 1) / e.cur(true)) * start;
self.style[ name ] = start + unit;
}
This creates a problem where we cannot give units to our custom animation because if we do then this code will execute and because self.style[name] does not exist where name is our custom animation's name then e.cur(true) will likely return zero and create a divide by zero bug which will set start to NaN. The following monkey patch for animate() gets around this by storing the units used in the rotation definition and then stripping the units off. */
var animateProxied = $.fn.animate;
$.fn.animate = function (prop){
if (typeof prop['rotate'] != 'undefined'){
var m = prop['rotate'].toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);
if (m && m[5]){
rotateUnits = m[5];
}
prop['rotate'] = m[1];
}
return animateProxied.apply(this,arguments);
}
}
)(jQuery);
JS代码(jquery-css-transform.js):
(function ($){
// Monkey patch jQuery 1.3.1+ css() method to support CSS 'transform' // property uniformly across Safari/Chrome/Webkit,Firefox 3.5+,IE 9+,and Opera 11+. // 2009-2011 Zachary Johnson www.zachstronaut.com // Updated 2011.05.04 (May the fourth be with you!) function getTransformProperty(element){
// Try transform first for forward compatibility // In some versions of IE9,it is critical for msTransform to be in // this list before MozTranform. var properties = ['transform','WebkitTransform','MozTransform','OTransform'];
var p;
while (p = properties.shift()){
if (typeof element.style[p] != 'undefined'){
return p;
}
}
// Default to transform also return 'transform';
}
var _propsObj = null;
var proxied = $.fn.css;
$.fn.css = function (arg,val){
// Temporary solution for current 1.6.x incompatibility,while // preserving 1.3.x compatibility,until I can rewrite using CSS Hooks if (_propsObj === null){
if (typeof $.cssProps != 'undefined'){
_propsObj = $.cssProps;
}
else if (typeof $.props != 'undefined'){
_propsObj = $.props;
}
else{
_propsObj ={
}
}
}
// Find the correct browser specific property and setup the mapping using // $.props which is used internally by jQuery.attr() when setting CSS // properties via either the css(name,value) or css(properties) method. // The problem with doing this once outside of css() method is that you // need a DOM node to find the right CSS property,and there is some risk // that somebody would call the css() method before body has loaded or any // DOM-is-ready events have fired. if ( typeof _propsObj['transform'] == 'undefined' && ( arg == 'transform' || ( typeof arg == 'object' && typeof arg['transform'] != 'undefined' ) ) ){
_propsObj['transform'] = getTransformProperty(this.get(0));
}
// We force the property mapping here because jQuery.attr() does // property mapping with jQuery.props when setting a CSS property,// but curCSS() does *not* do property mapping when *getting* a // CSS property. (It probably should since it manually does it // for 'float' now anyway... but that'd require more testing.) // // But,only do the forced mapping if the correct CSS property // is not 'transform' and is something else. if (_propsObj['transform'] != 'transform'){
// Call in form of css('transform' ...) if (arg == 'transform'){
arg = _propsObj['transform'];
// User wants to GET the transform CSS,and in jQuery 1.4.3 // calls to css() for transforms return a matrix rather than // the actual string specified by the user... avoid that // behavior and return the string by calling jQuery.style() // directly if (typeof val == 'undefined' && jQuery.style){
return jQuery.style(this.get(0),arg);
}
}
// Call in form of css({
'transform':...}
) else if ( typeof arg == 'object' && typeof arg['transform'] != 'undefined' ){
arg[_propsObj['transform']] = arg['transform'];
delete arg['transform'];
}
}
return proxied.apply(this,arguments);
}
;
}
)(jQuery);
CSS代码(unleash.1.2.css):
@charset "utf-8";/* CSS Document */
#outer,#outer2,#outer3,#outer4,#outer5,#outer6{overflow:hidden;display:block;position:relative;}
.box{overflow:hidden;display:block;-moz-box-shadow:-5px 0px 5px rgba(1,1,1,0.3);-webkit-box-shadow:-5px 0px 5px rgba(1,1,1,0.3);box-shadow:-5px 0px 5px rgba(1,1,1,0.3);position:absolute;cursor:pointer;float:left;display:inline-block;zoom:1;}
.box img{position:relative;}
.caption{position:absolute;background:rgba(1,1,1,0.4);padding:20px;left:0;overflow:scroll;}
.caption p{color:#FFF;font-family:Arial,Helvetica,sans-serif;margin:0px;font-size:12px;line-height:1.6;}
.caption h1{color:#CCC;font-size:16px;font-weight:normal;font-family:Arial,Helvetica,sans-serif;margin:0px;margin-bottom:5px;}
.caption a{text-decoration:none;}
.caption_1{position:absolute;padding:20px;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf');background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;text-shadow:1px 1px 0px #ffffff;margin:0px 20px 20px 20px;left:0;overflow-y:auto;}
.caption_1 p{color:#999;font-family:Arial,Helvetica,sans-serif;margin:0px;font-size:12px;line-height:1.6;}
.caption_1 h1{color:#666;font-size:16px;font-weight:normal;font-family:Arial,Helvetica,sans-serif;margin:0px;margin-bottom:5px;}
.caption_1 a{text-decoration:none;}
.caption_2{position:absolute;background:#F03;padding:20px;left:0;margin:0px 20px 20px 20px;border-right:1px solid #FF8080;border-bottom:1px solid #FF8080;overflow-y:auto;}
.caption_2 p{color:#FFF;font-family:Arial,Helvetica,sans-serif;margin:0px;font-size:12px;line-height:1.6;}
.caption_2 h1{color:#EFEFEF;font-size:16px;font-family:Arial,Helvetica,sans-serif;margin:0px;margin-bottom:5px;}
.caption_2 a{text-decoration:none;}
.caption_3{position:absolute;background:rgba(255,255,255,0.7);padding:20px;left:0;margin:0px 20px 20px 20px;border:1px solid #fff;overflow-y:auto;}
.caption_3 p{color:#666;font-family:Arial,Helvetica,sans-serif;margin:0px;font-size:12px;line-height:1.6;}
.caption_3 h1{color:#333;font-size:16px;font-family:Arial,Helvetica,sans-serif;margin:0px;margin-bottom:5px;}
.caption_3 a{text-decoration:none;}
.caption_4{position:absolute;background:#111725 url(../images/top_2.png) top repeat-x;padding:20px;left:0;margin:0px 20px 20px 20px;overflow-y:auto;}
.caption_4 p{color:#FFF;font-family:Arial,Helvetica,sans-serif;margin:0px;font-size:12px;line-height:1.6;}
.caption_4 h1{color:#CCC;font-size:16px;font-family:Arial,Helvetica,sans-serif;margin:0px;margin-bottom:5px;}
.caption_4 a{text-decoration:none;}
div.caption_1::-webkit-scrollbar,div.caption_2::-webkit-scrollbar,div.caption_3::-webkit-scrollbar,div.caption_4::-webkit-scrollbar{width:8px;}
div.caption_1::-webkit-scrollbar-track,div.caption_2::-webkit-scrollbar-track,div.caption_3::-webkit-scrollbar-track,div.caption_4::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;}
div.caption_1::-webkit-scrollbar-thumb,div.caption_2::-webkit-scrollbar-thumb,div.caption_3::-webkit-scrollbar-thumb,div.caption_4::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.5);}
分享到QQ
分享到微博
微信扫一扫
