- 浏览: 331609 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
框架制作两种非常简单的jquery手风琴菜单特效,鼠标滑过手风琴与鼠标点击触发手风琴
2、实现原理
手风琴的效果一个是点击事件的效果一个触碰效果,都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现,当再次点击获得点击其他,和触及消失获得触及其他后当前的就会自动滑动消失,在删除掉展示的类
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
框架制作两种非常简单的jquery手风琴菜单特效,鼠标滑过手风琴与鼠标点击触发手风琴
2、实现原理
手风琴的效果一个是点击事件的效果一个触碰效果,都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现,当再次点击获得点击其他,和触及消失获得触及其他后当前的就会自动滑动消失,在删除掉展示的类
主要的方法
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); //添加类,后查询每一个元素的下一个元素div.menu_body开展然后定义一个滑动效果里面包含显示和隐藏,在查询当前里面包裹的其他元素,让他们全部通过滑动效果隐藏起来
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //定义方法 $("#firstpane .menu_body:eq(0)").show(); //获得显出方法 $("#firstpane p.menu_head").click(function(){ //定义点击事件 $(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); //点击当前添加一个current类 查找每个段落的下一个同胞元素名为div.menu_body滑动效果带有隐藏和显示功能 查找所有类名为div.menu_body的元素获得滑动方式隐藏 $(this).siblings().removeClass("current"); //当前的互动额 查找所有类名 删除类名为current }); $("#secondpane .menu_body:eq(0)").show(); //获得显出方法 $("#secondpane p.menu_head").mouseover(function(){ //定义鼠标触及方法 $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow"); //当鼠标触及到当前添加一个current类 查找每个段落的下一个同胞元素名为div.menu_body滑动效果带有隐藏和显示功能 查找所有类名为div.menu_body的元素获得滑动方式隐藏 $(this).siblings().removeClass("current"); //当前的互动额 查找所有类名 删除类名为current }); }); </script> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} body{margin:10px auto;font:75%/120% Verdana,Arial, Helvetica, sans-serif;} .demo{width:400px;margin:0 auto;} .demo h2{font-size:14px;height:24px;line-height:24px;margin:30px 0 10px 0;padding:0 10px;} .menu_head{padding:5px 10px;cursor:pointer;position:relative;margin:1px;font-weight:bold;background:#eef4d3 url(images/left.png) center right no-repeat;} .menu_list .current{background:#eef4d3 url(images/down.png) center right no-repeat;} .menu_body{display:none;} .menu_body a{display:block;color:#006699;background-color:#EFEFEF;padding-left:10px;font-weight:bold;text-decoration:none;height:24px;line-height:24px;} .menu_body a:hover{color:#000000;text-decoration:underline;} </style> </head> <body> <div class="demo"> <h2>点击触发事件</h2> <div id="firstpane" class="menu_list"> <p class="menu_head current">jquery图片特效</p> <div class="menu_body"> <a href="http://www.17sucai.com/" target="_blank" title="jquery图片切换">jquery图片切换</a> <a href="http://www.17sucai.com/" target="_blank" title="jquery幻灯片">jquery幻灯片</a> <a href="http://www.17sucai.com/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a> </div> <p class="menu_head">jquery导航菜单</p> <div class="menu_body"> <a href="http://www.17sucai.com/" target="_blank" title="jquery动画菜单">jquery动画菜单</a> <a href="http://www.17sucai.com/" target="_blank" title="jquery树形菜单">jquery树形菜单</a> <a href="http://www.17sucai.com/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a> </div> <p class="menu_head">jquery选项卡特效</p> <div class="menu_body"> <a href="http://www.17sucai.com/" target="_blank" title="jquery选项卡切换">jquery选项卡切换</a> <a href="http://www.17sucai.com/" target="_blank" title="jquery滑动选项卡">jquery滑动选项卡</a> <a href="http://www.17sucai.com/" target="_blank" title="jquery更多特效">jquery更多特效</a> </div> </div><!--firstpane end--> <h2>滑过触发事件</h2> <div id="secondpane" class="menu_list"> <p class="menu_head current">js图片特效</p> <div class="menu_body"> <a href="http://www.17sucai.com/" target="_blank" title="js图片切换">js图片切换</a> <a href="http://www.17sucai.com/" target="_blank" title="js幻灯片">js幻灯片</a> <a href="http://www.17sucai.com/" target="_blank" title="js图片放大镜">js图片放大镜</a> </div> <p class="menu_head">js导航菜单</p> <div class="menu_body"> <a href="http://www.17sucai.com/" target="_blank" title="js动画菜单">js动画菜单</a> <a href="http://www.17sucai.com/" target="_blank" title="js树形菜单">js树形菜单</a> <a href="http://www.17sucai.com/" target="_blank" title="js下拉菜单">js下拉菜单</a> </div> <p class="menu_head">js选项卡特效</p> <div class="menu_body"> <a href="http://www.17sucai.com/" target="_blank" title="js选项卡切换">js选项卡切换</a> <a href="http://www.17sucai.com/" target="_blank" title="js滑动选项卡">js滑动选项卡</a> <a href="http://www.17sucai.com/" target="_blank" title="js更多特效">js更多特效</a> </div> </div><!--secondpane end--> </div><!--demo end--> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1204Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 733//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 536Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 479Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 854首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2710Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 685特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14712流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6212首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1345通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 654一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 884<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7291. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 717一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 514看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 827最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 603最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 406做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 664在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 732<object width="940&qu ...
相关推荐
jquery竖直手风琴菜单收缩展示下拉菜单
jquery竖直手风琴导航菜单点击单个展示收缩效果
jquery竖直手风琴导航菜单是一款鼠标点击单个展示收缩效果的竖直手风琴菜单。
jQuery竖直手风琴下拉操作步骤代码 jQuery竖直手风琴下拉操作步骤代码
下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉菜单。 HTML代码 由于使用了bootstrap框架,因此其HTML结构也需要一致,代码如下: <div class="col-md-offset-3 col-md-6"> ...
手风琴菜单效果,导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效
jQuery左侧手风琴菜单代码是一款手风琴式收缩展示导航菜单代码。 jQuery左侧手风琴菜单代码截图
jQuery手风琴下拉菜单收缩展开特效
一款扁平简约的jQuery垂直手风琴展开收缩多级菜单代码,支持二级、三级、多级下拉菜单列表伸缩效果。
jQuery手风琴滑动下拉菜单代码是一款手风琴下拉菜单展开收缩效果代码。
这是一款通过将不同的子菜单进行分组,制作出扁平风格多级菜单效果的jQuery垂直手风琴多级下拉菜单代码。
jQuery左侧下拉三级收缩菜单,JQuery left drop-down three-level shrink menu
jQuery手风琴下拉菜单代码是一款点击菜单收藏展开效果代码。
竖直手风琴导航菜单是一款基于jQuery实现的鼠标点击显示二级分类菜单,收缩效果,手风琴导航菜单。
代码简介:jQuery多级下拉垂直手风琴代码是一款通过将不同的子菜单进行分组,制作出多级菜单的效果。
最近我们刚刚为大家分享过一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,效果非常不错。今天我们要再为大家介绍另外一款经典的jQuery垂直手风琴二级下拉菜单,菜单的界面非常简洁,菜单项由文字和小图标组成,...
这是一款简单实用的jQuery手风琴滑动下拉菜单展开收缩代码,通常用于网站左侧导航菜单栏。