<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.nav{
width: 100px;height: 300px;border-radius: 0 15px 15px 0;background: #82FCB8;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> </body>
</html>
JS的jQuery代码

26   <script>
27 $('.nav').mouseenter(function(){
28 $(this).animate({left:'0px'})
29 })
30 $('.nav').mouseleave(function(){
31 $(this).animate({left:'-100px'})
32 })
33 </script>

侧边栏功能实现图片:

JS侧边栏实现的更多相关文章

  1. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  2. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  3. js实现侧边栏信息展示效果

    目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...

  4. js进阶 13-8 jquery如何实现侧边栏

    js进阶 13-8 jquery如何实现侧边栏 一.总结 一句话总结:先是把侧边栏设置为left为-100px,隐藏起来,jquery自定义动画animate里面的改变元素的距左边的宽度left,sl ...

  5. 代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)

    博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...

  6. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  7. js实现上下滑动侧边栏

    给一个原先的电子商务网站做修改,客户说想将原先上下滑动侧边栏改的更加人性化,希望将原先匀速滑动的侧边栏改成变速运动的侧边栏,在到达目的地之前速度越变越慢. 原先一开始的时候,,这个图片是硬生生地到达可 ...

  8. js动画实现侧边栏分享

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

    javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { ...

随机推荐

  1. Tensorflow原理通用

    使用 TensorFlow, 你必须明白 TensorFlow: 使用图 (graph) 来表示计算任务.在被称之为 会话 (Session) 的上下文 (context) 中执行图.使用 tenso ...

  2. 获取DATA的数据

    num=DataTable("参数名",dtGlobalSheet) 'systemutil.Run "C:\Program Files (x86)\HP\QuickTe ...

  3. 警告: The APR based Apache Tomcat Native library failed to load.

    警告: The APR based Apache Tomcat Native library failed to load. The error reported was [C:\apache-tom ...

  4. POJ 2133

    类似于DP一样做,但这题有个大坑,自己看DIS吧.... #include <iostream> #include <cstdio> #include <cstring& ...

  5. thrift java示例

    thrift java示例 使用IntelliJ IDEA作为开发工具: 增加proto文件夹,里面写上sayHello.proto syntax = "proto3"; opti ...

  6. ios假设写一个提示带动画的View,能够来引导用户行为

    先上图: 这个UIView能够这样写: -(id)initWithFrame:(CGRect)frame backImage:(UIImage*)image msgStr:(NSString*)txt ...

  7. 1、libgdx简单介绍

    Libgdx 是一个跨平台和可视化的的开发框架.它当前支持Windows.Linux,Mac OS X.Android,IOS和HTML5作为目标平台. Libgdx同意你一次编写代码不经改动部署到多 ...

  8. Django -&gt; debug模式下的静态文件服务(/media/)

    正式公布django项目的时候,假设存在静态文件(通常会统一放在名称为media或static的文件夹下),则须要建立url到文件系统的映射,比如.使用nginx的时候我们须要进行这种配置. # Dj ...

  9. MySql悲观锁总结与实践

    mysql(for update)悲观锁总结与实践 https://blog.csdn.net/zmx729618/article/details/52701972 悲观锁,正如其名,它指的是对数据被 ...

  10. java1.8对集合中对象的特有属性进行排序

    每天学习一点点,知识财富涨点点 1.创建对象user12 2.编写测试类 3.输出结果 加油!!!!