<!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. 2、链接数据库+mongodb基础命令行+小demo

    链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...

  2. EXPLAIN sql优化方法（3）DERIVED

    派生表和视图的性能 从MySQL 4.1开始,它已经支持派生表.联机视图或者基本的FROM从句的子查询. 这些特性之间彼此相关,但是它们之间的性能比较如何呢? MySQL 5.0 中的派生表似乎和视图 ...

  3. Java泛型（一）：入门、原理、使用

    远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的代码都是类似于下面这样: List list = new ArrayList(); list.add(&q ...

  4. Python Study（02）之 Context Manager

    上下文管理器(context manager)是Python2.5开始支持的一种语法,用于规定某个对象的使用范围.一旦对象进入或者离开该使用范围,会有特殊操作被调用 (比如为对象分配或者释放内存).它 ...

  5. Scrapy系列教程（6）------怎样避免被禁

    避免被禁止(ban) 有些网站实现了特定的机制,以一定规则来避免被爬虫爬取. 与这些规则打交道并不easy,须要技巧,有时候也须要些特别的基础. 假设有疑问请考虑联系 商业支持 . 以下是些处理这些网 ...

  6. Swift开发教程--怎样自己定义TabBarItem的图片显示

    在做项目的时候,假设使用系统的UITabBarController的时候,底部的tab自己定义图片显示是蓝色和灰色的.这不是我们所想要的效果. 假设想显示自己定义的按下和弹起的图片效果.这个时候就须要 ...

  7. poj 1182 食物链 &amp;&amp; nyoj 207（种类并查集）

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 52414   Accepted: 15346 Description ...

  8. [BZOJ 3365] Distance Statistics

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3365 [算法] 点分治 [代码] #include <algorithm> ...

  9. Java-MyBatis：MyBatis 3 动态 SQL

    ylbtech-Java-MyBatis:MyBatis 3 动态 SQL 1.返回顶部 1. 动态 SQL MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其它类似框架 ...

  10. WSL初体验

    Windows10 新增加了WSL子系统, 体验了一下感觉还不错...   开启对应的功能后, 在商店里选择安装Ubuntu就可以了. 迁移文件系统 WSL 的文件系统位于 C 盘,当安装的软件越来越 ...