还没有任何记录...
jquery 横向折叠插件lateral-fold，点击横向得选项卡，产生横向折叠展开的效果，也可以当做横向切换的选项卡使用。横向折叠插件核心样式...
jquery写的右边折叠菜单点击展开兼容火狐、IE6，可以悬浮在浏览器右边随屏滚动，样式比较丑，自己写样式或者做图片美化吧，...
竖向折叠展开手风琴式的导航菜单插件menuswitch，一种点击折叠时其他菜单也折叠，一种是点击折叠时其他菜单不折叠。 JS代码与HTML表现结构完全分离，对SEO有利。...
HTML+CSS结构的竖向折叠菜单，点击展开二级菜单，结构为HTML+CSS结构，清晰明了，易修改。
废话少说上结构：...
类似QQ的竖向展开折叠菜单,HTML+CSS结构,非常易于修改。
看下面的代码片段，结构异常清晰明了，采用了做栏目标题，符合SEO优化的HTML结构语义化写法，下面的DIV层中可以书写任...
JS中的 var number=5; //定义条目数，是控制 条目数量的，这个必须和条目数量对应。
下面代码中的ShowFLT(1)和id=LM1 是对应的。...
结构采用了DL DT DD结构，配合CSS和JS实现。
结构清晰，易修改。
代码说明：
1、要设置JS文件中的 定义条目数( var number=5; )...当然你可以应用一个 IE7.JS或者IE8.js 来让IE6也具有 hover属性...利用css3做出立体折叠效果
查看: 5344|
评论: |原作者: poh-包雪|来自:
摘要: 折叠效果利用了css3里面的perspective 属性，这是一个3D画图里面的东西——透视；有了perspective这个属性的知识，再加上css3里面的渐变，我们就可一很轻易的打造各种立体效果了。 ...
原理介绍：
这种折叠效果是小编我在一个英文网站上学的，这个英文网站上的很多特效都很不错，推荐给你们进去看看，这个网站叫codrops
接下来正式简单介绍一下原理。折叠效果利用了css3里面的perspective 属性，这是一个3D画图里面的东西——透视；透视我就不具体介绍了，推荐一篇专门讲解perspective属性的文章——有了perspective这个属性的知识，再加上css3里面的渐变，我们就可一很轻易的打造各种立体效果了。
想要达到图上的折叠立体效果，我们的分析它是怎么用html布局的。从上图中可以看出，一张图片有五个部分，其中有四个部分是立起来的，呈现出立体效果。那么问题来了，要怎么样把一张图片分成五部分呢？其实这个不难，用background-postion定位就可以了，在这里我准备了五个div,每个idiv里的背景图通过定位，恰好能够拼成一张图片，而每部分的宽度都是等宽的，所以在利用background-postion属性时，X的值可以用图片的宽度除以5来确定，这里我用的图片宽度为640所以定位时，就有了如下代码：
.view .s1 {
& && &&&background-position: 0px 0
.view .s2 {
& && &&&background-position: -128px 0
.view .s3 {
& && &&&background-position: -256px 0
.view .s4 {
& && &&&background-position: -384px 0
.view .s5 {
& && &&&background-position: -512px 0
完成图片的布局之后，我们就可以给每个切片添加样式了。我选择了其中的四个切片，分别设置了translate3d和rotate3d这两个属性，设置方式可以看我贴的代码，不知道这两个属性怎么用的同学，可以深入研究一下上面推荐的文章。在这些都设置完了之后，你就可以看大折叠的立体效果了，不过有个问题，看起来不那么真实，所以，我又在每个切片的表层设置了一个span空元素，大小与一个切片一样大，并为其设置了linear-gradient线性渐变样式，使其中的一些切片具有阴影和反光效果，这样就更加真实了，具体设置方式可以参照下面的样式代码。
为了能够达到复用的效果，我将其封装成了一个插件，这样就可以直接应用到任何一张图片了。最后说一下，这是我第一次在这里发笔记，写的不是很好，望多多包涵，有问题的可以直接回复我，谢谢！
下面是图片的切割与布局
&div class="slice s1" style="background-image: url(image.jpg); "&
& && && && &&span class="overlay"&&/span&
& && && && &
& && && && &&div class="slice s2" style="background-image: url(image.jpg); "&
& && && && && & &span class="overlay"&&/span&
& && && && && &&&
& && && && && & &div class="slice s3" style="background-image: url(image.jpg); "&
& && && && && && &&&&span class="overlay"&&/span&
& && && && && && && &
& && && && && && &&&&div class="slice s4" style="background-image: url(image.jpg); "&
& && && && && && && && &&span class="overlay"&&/span&
& && && && && && && && &
& && && && && && && && &&div class="slice s5" style="background-image: url(image.jpg); "&
& && && && && && && && && & &span class="overlay"&&/span&
& && && && && && && && &&/div&
& && && && && && && &
& && && && && && & &/div&
& && && && && && && && &
& && && && && &&/div&
& && && && && && && &
& && && &&&&/div&
& && && && && &&&
& && & &/div&复制代码
jQuery3D折叠插件代码
$.fn.hoverfold = function( args ) {
& & this.each( function() {
& && &&&$( this ).children( '.view' ).each( function() {
& && && && &var $item& &= $( this ),
& && && && && & img& &&&= $item.children( 'img' ).attr( 'src' ),
& && && && && & struct&&= '&div class="slice s1"&';
& && && && && && &&&struct&&+='&div class="slice s2"&';
& && && && && && && && &struct&&+='&div class="slice s3"&';
& && && && && && && && && & struct&&+='&div class="slice s4"&';
& && && && && && && && && && &&&struct&&+='&div class="slice s5"&';
& && && && && && && && && && &&&struct&&+='&/div&';
& && && && && && && && && & struct&&+='&/div&';
& && && && && && && && &struct&&+='&/div&';
& && && && && && &&&struct&&+='&/div&';
& && && && && & struct&&+='&/div&';
& && && && && &&&
& && && && &var $struct = $( struct );
& && && && &
& && && && &$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '&span class="overlay" &&/span&' ) );
& && && & });
& && & });
& & };复制代码
&!doctype html&
&meta charset="utf-8"&
&title&Show me the Furry Friend of the Day&/title&
&script&&type="text/javascript" src="/jquery-1.8.2.min.js"&&/script&
&style type="text/css"&
*{padding:0;margin:0}
.header{width:100%;background:#000;height:50margin-bottom:20min-width:1000px}
/*图片折叠效果样式*/
.view{margin:20display:width:640height:400border: 8px solid #background-color: #EEE;background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));-webkit-perspective: 800-moz-perspective: 800-o-perspective: 800-ms-perspective: 800perspective: 800position:box-shadow: inset 0 0 0 .2em hsla(0,0%,0%,.1),
inset 0 0 2em hsla(0,0%,0%,.05),0 .2em .25em hsla(0,0%,0%,.5);}
.view .slice{
& && &&&width:128
& && &&&height: 100%;
& && &&&z-index: 100;
& && &&&-webkit-transform-style: preserve-3d;
& && &&&-moz-transform-style: preserve-3d;
& && &&&-o-transform-style: preserve-3d;
& && &&&-ms-transform-style: preserve-3d;
& && &&&transform-style: preserve-3d;
& && &&&-webkit-transform-origin:
& && &&&-moz-transform-origin:
& && &&&-o-transform-origin:
& && &&&-ms-transform-origin:
& && &&&transform-origin:
& && &&&-webkit-transition: -webkit-transform 150ms ease-in-
& && &&&-moz-transition: -moz-transform 150ms ease-in-
& && &&&-o-transition: -o-transform 150ms ease-in-
& && &&&-ms-transition: -ms-transform 150ms ease-in-
& && &&&transition: transform 150ms ease-in-}
.view-back{
& && &&&width: 50%;
& && &&&height: 100%;
& && &&&position:
& && &&&right: 0;
& && &&&background-color: rgb(0,255,255);
& && &&&background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));
& && &&&z-index: 0;
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
& && &&&-webkit-transform: translate3d(128px,0,0);
& && &&&-moz-transform: translate3d(128px,0,0);
& && &&&-o-transform: translate3d(128px,0,0);
& && &&&-ms-transform: translate3d(128px,0,0);
& && &&&transform: translate3d(128px,0,0);
/*为每个切片设置背景图片位置*/
.view .s1 {
& && &&&background-position: 0px 0
.view .s2 {
& && &&&background-position: -128px 0
.view .s3 {
& && &&&background-position: -256px 0
.view .s4 {
& && &&&background-position: -384px 0
.view .s5 {
& && &&&background-position: -512px 0
.view .overlay {
& && &&&width: 128
& && &&&height: 100%;
& && &&&opacity: 0;
& && &&&position:
& && &&&-webkit-transition: opacity 150ms ease-in-
& && &&&-moz-transition: opacity 150ms ease-in-
& && &&&-o-transition: opacity 150ms ease-in-
& && &&&-ms-transition: opacity 150ms ease-in-
& && &&&transition: opacity 150ms ease-in-
.view:hover .overlay {
& && &&&opacity: 1;
.view img {
& && &&&position:
& && &&&z-index: 0;
& && &&&-webkit-transition: left 0.3s ease-in-
& && &&&-o-transition: left 0.3s ease-in-
& && &&&-moz-transition: left 0.3s ease-in-
& && &&&-ms-transition: left 0.3s ease-in-
& && &&&transition: left 0.3s ease-in-
.view:hover .s2{
& && &&&-webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
& && &&&-moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
& && &&&-o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
& && &&&-ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
& && &&&transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
.view:hover .s3,
.view:hover .s5{
& && &&&-webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
& && &&&-moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
& && &&&-o-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
& && &&&-ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
& && &&&transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
.view:hover .s4{
& && &&&-webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
& && &&&-moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
& && &&&-o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
& && &&&-ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
& && &&&transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
/*为每个切片创建渐变效果*/
.view .s1 & .overlay {
& && &&&background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
& && &&&background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
& && &&&background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
& && &&&background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
& && &&&background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
.view .s2 & .overlay {
& && &&&background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
& && &&&background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
& && &&&background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
& && &&&background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
& && &&&background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
.view .s3 & .overlay {
& && &&&background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
& && &&&background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
& && &&&background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
& && &&&background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
& && &&&background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
.view .s4 & .overlay {
& && &&&background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
& && &&&background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
& && &&&background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
& && &&&background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
& && &&&background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
.view .s5 & .overlay {
& && &&&background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
& && &&&background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
& && &&&background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
& && &&&background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
& && &&&background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
&body&&style="background:url(data/attachment/album//dzgtxt2stq27d7.jpg);min-width:1000px"&
&header class="header"&&/header&
&div id="grid"&
& & &div class="view"&
& && &&&&div class="view-back"&
& && && && &&span style="font:32px 'Microsoft YaHei';position:right:20text-shadow: 2px 2px .3em rgba(255, 255, 255, .6);color:#FFF"&HIT FM&/span&
& && && && &&span style="font:18px 'Microsoft YaHei';position:right:5top:50text-shadow: 1px 1px .3em rgba(0, 0, 0, .8);"&NEVER &br/&STOP THE BEAT!&/span&
& && &&&&/div&
& && &&&&img src="data/attachment/album//205406wfuvvuowv1yhdvdv.jpg" /&
& & &/div&
&script type="text/javascript"&
//jquery插件代码& && && && && &&&
$.fn.hoverfold = function( args ) {
& & this.each( function() {
& && &&&$( this ).children( '.view' ).each( function() {
& && && && &var $item& &= $( this ),
& && && && && & img& &&&= $item.children( 'img' ).attr( 'src' ),
& && && && && & struct&&= '&div class="slice s1"&';
& && && && && && &&&struct&&+='&div class="slice s2"&';
& && && && && && && && &struct&&+='&div class="slice s3"&';
& && && && && && && && && & struct&&+='&div class="slice s4"&';
& && && && && && && && && && &&&struct&&+='&div class="slice s5"&';
& && && && && && && && && && &&&struct&&+='&/div&';
& && && && && && && && && & struct&&+='&/div&';
& && && && && && && && &struct&&+='&/div&';
& && && && && && &&&struct&&+='&/div&';
& && && && && & struct&&+='&/div&';
& && && && && &&&
& && && && &var $struct = $( struct );
& && && && &
& && && && &$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '&span class="overlay" &&/span&' ) );
& && && & });
& && & });
//调用插件
$( '#grid' ).hoverfold();
&/html&复制代码
Powered by您的位置：
本文网址：
············jQuery结合CSS3实现风琴折叠图片效果广告代码 - 为程序员服务
jQuery结合CSS3实现风琴折叠图片效果广告代码
jQuery结合CSS3实现风琴折叠图片效果广告代码
部分jq代码
$(function() {
$('#accordion & li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
的在线效果
注重前端开发
原文地址：, 感谢原作者分享。
您可能感兴趣的代码