夺命雷公狗jquery---33高仿hao123左侧导航栏
2015-10-29 11:02
691 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body { margin:0; padding:0; height:100%; } div.menu { width:46px; height:100%; background-color:#E6E6E6; position:absolute; left:0; } ul,li { margin:0; padding:0; padding:10px 2px; list-style:none; } div#arrow { position:absolute; left:0; bottom:50px; z-index:2; } </style> <script src="js/jquery.js"></script> <script> //用jquery1.8.3能用,别2.几没作用 $(function(){ $('#arrow img').toggle(function(){ $('div.menu').animate({ left:-46 },3000); $('#arrow img').attr('src','images/hao123/right.jpg'); },function(){ $('div.menu').animate({ left:0 },3000); $('#arrow img').attr('src','images/hao123/left.jpg'); }); }); </script> </head> <body> <div class="menu"> <ul> <li><img src="images/hao123/dongman.png" /></li> <li><img src="images/hao123/lol.png" /></li> <li><img src="images/hao123/meng.png" /></li> <li><img src="images/hao123/retie.png" /></li> </ul> </div> <div id="arrow"> <img src="images/hao123/left.jpg" /> </div> </body> </html>
在jquery1.8.3正常使用,2.X版本不行,原因是toggle函数的问题
相关文章推荐
- jquery实现的伪分页效果代码
- 支持手机和电脑拖拽代码 【简单版jquery】
- 牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作
- jquery实现模拟百分比进度条渐变效果代码
- Jquery 将表单序列化为Json对象
- JqueryMobile- 搭建主模板
- Eclipse通过Spket增加JQuery提示的方法
- jQuery中的$(window).load()与$(document).ready()
- js立即执行函数,jqueryReady和Onload执行顺序比较
- 夺命雷公狗jquery---32小案例鼠标放上图片点亮
- 地图json jquery
- jquery日期控件My97DatePickerBeta
- jquery Datatable参数及使用方法
- IIS配置jquery ajax、 json,mp4文件支持
- 学习笔记之JQuery 的$("#nav > li")中>的意思
- 【jQuery】jQuery操作<input>的聚焦与全选其内容
- jquery实现模拟百分比进度条渐变效果代码
- 牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作
- jquery实现的伪分页效果代码
- jQuery实现彩带延伸效果的网页加载条loading动画