js进阶 13-8 jquery如何实现侧边栏
js进阶 13-8 jquery如何实现侧边栏
一、总结
一句话总结：先是把侧边栏设置为left为-100px，隐藏起来，jquery自定义动画animate里面的改变元素的距左边的宽度left，slide系列动画是改变元素的高；$(this).animate({left:'0px'})；$(this).animate({left:'-100px'})；
二、如何实现侧边栏
1、相关知识
案例描述：具有滑动隐藏显示效果的侧边栏。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
.nav{
width: 100px;height: 300px;border-radius: 0 15px 15px 0;background: #eee;position: absolute; top: 50px;left: -100px;
}
.nav span{display: block; background: orange;width: 30px;height: 90px;border-radius: 0 4px 4px 0;font-size: 20px;line-height: 30px;position: relative;left: 100px;top:100px;}
</style>
</head>
<body>
<div class="nav">
<span>分享到</span>
<ul>
<li>QQ</li>
<li>微信</li>
<li>微博</li>
<li>......</li>
</ul>
</div>
<script>
$('.nav').mouseenter(function(){
$(this).animate({left:'0px'})
})
$('.nav').mouseleave(function(){
$(this).animate({left:'-100px'})
})
</script>
</body>
</html>
js进阶 13-8 jquery如何实现侧边栏的更多相关文章
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
随机推荐
- Scrapy发送POST请求
一.发送post请求需要将start_urls注释,然后重写start_requests方法二.使用yield scrapy.FormRequest(url=post_url, formdata=fo ...
- Logback自定义日志输出内容
场景 一般情况下,日志打印的内容都是根据配置文件中配置的pattern格式指定好的.在我们调用logger.info(), logger.debug()等日志打印方法时,打印的内容格式与配置文件中的p ...
- Python Web框架Tornado的异步处理代码演示样例
1. What is Tornado Tornado是一个轻量级但高性能的Python web框架,与还有一个流行的Python web框架Django相比.tornado不提供操作数据库的ORM接口 ...
- 数据持久化(六)之Using CoreData with MagicalRecord
第五节里面,我介绍了CoreData的配置和主要的增删改查,可能非常多人会认为用它真繁琐.这里,我再介绍网上大神对它进行了人性化封装的第三方MagicalRecord,正如FMDB对sqlite进行了 ...
- C#结构函数
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- js--- 堆栈 于拷贝
1.栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放:而heap则是动态分配的内存,大小不定也不会自动释放. 2.基本类型和引用类型 基本类型:存放在栈内存中的简单数 ...
- 高阶函数sort
排序中我们经常会用sort这个高阶函数,我们今天就来讲讲这个sort的比较机制,对于数字来说我们只需要比较他们的大小就可以了 但是 var arr =[15,81,9,4,3]; alert(arr. ...
- 怎么成为合格的WEB前端开发工程师
web前端开发工程师目前来讲是一个热门职位,但是要成为一个合格的web前端开发工程师,需要掌握的知识可不少,零度就简单的为大家讲讲. 大致的来讲,web前端开发工程师需要掌握的知识有:HTML.CSS ...
- 洛谷P1439 最长公共子序列（LCS问题）
题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最长公共子 ...
- Kinect开发 —— 基础知识
转自:http://www.cnblogs.com/yangecnu/archive/2012/04/02/KinectSDK_Application_Fundamentals_Part2.html ...