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 ...
随机推荐
- 关于【搭建LAMP环境时，php测试页面打不开】解决
关于[搭建LAMP环境时,php测试页面打不开]解决 〇.我的测试页面是: http://172.30.124.10/index.php 用火狐打不开,如下图. 一.httpd已经启动了(system ...
- spring在web.xml中的配置
在实际项目中spring的配置文件applicationcontext.xml是通过spring提供的加载机制,自动加载的容器中去,在web项目中,配置文件加载到web容器中进行解析,目前,sprin ...
- 解决spring-boot启动中碰到的问题：Cannot determine embedded database driver class for database type NONE(转)
问题 如下: 2017-07-16 08:50:57.436 INFO 13524 --- [ main] c.p.p.web.PointshopWebApplication ...
- POJ——T 3067 Japan
http://poj.org/problem?id=3067 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 29474 ...
- servlet学习(1)
1.Servlet是sun公司提供的一门用于开发动态web资源的技术. 2.Servlet在web应用的位置: 3.创建Servlet的三种方式: (1)实现servlet的接口 (2)继承Gener ...
- POJ 3038 贪心(multiset)
题意: 思路: 1. 贪心 我们考虑肯定是走最近的最合适 想象自己是一个黑一日游的司机: 1.如果有乘客要上车,那么就让他上,收钱! 2.如果超载了,把距目的地最远的几个乘客踢下去,退钱. 3.行驶到 ...
- javafx style and cssFile
public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...
- HDU 4007 Dave（离散化）
Dave Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others)Total Submis ...
- python版 百度签到
经常玩贴吧,刚学python ,所以自己弄了一个python版的签到程序.自己的东西总是最好的. 登陆模块参考的http://www.crifan.com/emulate_login_website_ ...
- 【CS Round #39 (Div. 2 only) D】Seven-segment Display
[Link]:https://csacademy.com/contest/round-39/task/seven-segment-display/ [Description] 0..9各自有一个数字, ...