jQuery效果之简单的手风琴效果

实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp"> <div class="voice_2"> <ul> <li class="li1" id="li1"> <div class="fold" style="displa…

今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动. 效果演示插件下载 HTML 示例代码: <div id="va-accordion" class="va-container"> <div class="va-nav"> <span class=&q…

jQuery插件实例五：手风琴效果[动画效果可配置版]

昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各位的光临效果图预览插件JS accordionB.js ; (function ($, window, document, undefined) { var defaults = { 'isajax': false, //是否从ajax加载数据 'isDom': true, //是否是DOM数据…

jQuery实现手机竖直手风琴效果

效果:http://hovertree.com/texiao/jquery/65/ 效果图: 手机扫描二维码查看效果: 代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"…

使用 jQuery & CSS3 实现优雅的手风琴效果

手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外观. 效果演示插件下载 HTML示例代码: <ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading&quo…

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

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

jQuery实现的简单文字提示效果模拟title(转)

来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析:  <script src="jquery.js" type="text/javascript"></script> <style type="text/c…

Jquery实现的简单轮播效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-1.11.3.js&quo…

js实现手风琴效果

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

JS+JQ手风琴效果

最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; padding: 0px; } .leftli { float: left; width: 200px; background: #3D4444; } ul li { display: block; line-height: 25px; width: 200px; height: 25px; list-styl…