<!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. EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图

    使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了. 刚刚开始很混乱,等加载完成后,就好了. 参考这篇文章http://blog.csdn.net/zheng0518/arti ...

  2. 2018年九个很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  3. 如何在GitHub部署自己的个人网站

    前段时间在B站学习了怎样做一个静态网页(up主是  表严肃 ),朋友问我他能不能访问我的这个静态网页,我说还没把它挂到网上.今天看见一篇文章说可以在GitHub部署自己的个人网站,心血来潮,想做一个玩 ...

  4. [SharePoint][SharePoint 2013从入门到精通]Chapter 1 介绍 SharePoint2013

    本章你讲学到 什么是SharePoint2013 SharePoint2013如何加强协作与共享 SharePoint2013中有什么用户权限 什么是SharePoint Online 本地部署与在线 ...

  5. 学习笔记一：关于directx sdk的安装于一些概念

    关于directx sdk开发环境的安装: 在百度搜索了directx sdk,进入了微软的官网,下载了DXSDK_Jun10.exe 百度网盘:http://pan.baidu.com/s/1o6r ...

  6. 2014.04.16,读书,读书笔记-《Matlab R2014a完全自学一本通》-第17章 图形用户界面

    界面对象分三类: 用户控件对象(uicontrol) 下拉式菜单对象(uimenu) 内容式菜单对象(uicontextmenu) 创建用户界面: 1.命令行方式 采用uicontrol来创建控件对象 ...

  7. Blur 算法 （Unity 5.0 Shader）

    一:简单 Blur 算法 一个像素的颜色值由其邻近的若干像素和自己的颜色值的平均值重新定义,以此达到模糊的效果. 如下图,红色的像素点的值将由它和它周围的24个像素的平均值重新定义.计算的范围一般由一 ...

  8. uninstall OpenJDK9

    sudo apt--jre openjdk--jdk ///要慎用auto命令,会把所有的软件包删掉 https://www.linuxidc.com/Linux/2017-11/148941.htm ...

  9. dnscat使用——整体感觉这个工具不完善，失败率很高，传文件时候没有完整性校验，我自己测试时通过域名转发失败，可能是其特征过于明显导致

    git clone https://github.com/iagox86/nbtool make 然后就可以按照下面的官方说明进行操作了. 我的感受:整体感觉这个工具不完善,失败率很高,传文件时候没有 ...

  10. 【转】小白级的CocoaPods安装和使用教程

    原文网址:http://www.jianshu.com/p/e2f65848dddc 百度有很多CocoaPods的安装教程.第一次看的时候,确实有点摸不透的感觉.经过思考,一步一步来实践,前后花了三 ...