xZhe 手风琴效果

css样式

.xZhe{border:0; margin:0px auto;overflow:hidden; position:relative;}

.tabs{ position:absolute;left:0px;top:0px; height:300px;width:500px;}

.tabs2{ position:absolute;left:0px;top:0px; height:300px;width:300px;}

javascript

$("#xZhe").xZhe();

手风琴效果说明：效果简单实现，但基本功能是完善的，兼容各种浏览器。如需美化请自行修改样式，本效果只为开发方便而实现的！

更多参数配置点击查看demo

点击这里下载源码

原文地址 http://haiqiancun.com/bbs/bbsPage/0/detail/297e9e7946a599780146a5a38dde0003/1/20140904144958

时间： 2024-08-06 19:46:07

xZhe 手风琴效果的相关文章

纯css3实现美化复选框和手风琴效果（详细）

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用before模拟选框的框,用after来模拟选框的填充 通过 .magic-checkbox:checked + label:after {/*选框被选中时 显示after填充*/ display: block; } 来确定是否选中复选框,如果checked就把after的显示. 先贴出html的代码 <

CSS3实现手风琴效果-------Day88

所谓的手风琴效果,就是像手风琴一样拉开关上,至于手风琴啥样,貌似那是我好久之前的回忆了. 不扯那些没用的,说说这个坑人的手风琴效果,先来看下效果图: 这个效果不错吧,也比较常用吧,可怜的我最开始的时候以为自己可以做到这个效果,就用display:none/block写了一排的div,你别说,还真出来那个感觉啦,哈哈,这里当然不会这么做,但是在我看明白之后,发现是一样简单到要吐血,这样的应用当初自己怎么就想不到. 实现过程中的第一个让我没想到,却感觉确实这样才对的地方: <div id="h

jQuery插件实例四：手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,

手风琴效果

功能描述: 鼠标移到每一个图片上,显示当前图片,其余图片变成宽度为原来的6%,同时图片透明度为1,0.5s后显示图片说明.鼠标移除后,每张照片宽度变为16%的宽度.其中图片说明,没有设计样式,有兴趣的可以自己动手. html代码: <body> <h1>手风琴效果</h1> <div id="content"> <ul> <li> <a href="#"> <h2>图片名

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

JS制作图片手风琴效果

使用JS写出 图片的手风琴效果 第一种:浮动版本的手风琴效果,并不推荐,因为会使图片出现抖动的现象 样式则是div中包含ul <script src="animate.js"></script> <script> //1. 找出页面中需要的对象 var box = document.getElementById("box"); var ul = box.children[0]; var lis = ul.children; //2

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

用jquery实现手风琴效果

<style type="text/css"> ul li{ list-style: none; width:200px; height:30px; text-align: center; line-height:30px; background-color:deepskyblue; } ul{ display:none; margin:0; padding:0; } h3{ width:200px; height:30px; margin:0; padding:0; te

js实现手风琴效果

之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> <li class="pic1"><a href="javascript:;">床头明月光</a></li> <li class="pic2"><a href="javascr