<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>silder</title>

    <style>

        #slider{

            width: 300px;

            position: fixed;

            background-color: #cccccc;

            top: ;

            bottom: ;

            right:-300px;

            transition: right .4s;

        }

        #bbb{

            text-align: right;

            float: left;

        }

    </style>

</head>

<body>

    <div id="slider"></div>

    <div id="bbb">show/hide</div>

    <script>

        function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值

            if(obj.currentStyle){   //针对ie获取非行间样式

                return obj.currentStyle[attr];

            }else{

                return getComputedStyle(obj,false)[attr];   //针对非ie

            };

        };

        var EventUtil={

            //根据情况分别使用dom2 || IE || dom0方式 来添加事件

            addHandler:function(ele,evet,handler){

                if(ele.addEventListener){

                    ele.addEventListener(evet,handler,false);

                }else if(ele.attachEvent){

                    ele.attachEvent("on"+evet,handler);

                }else{

                    ele["on"+evet]=handler;

                }

            },

            //根据情况分别使用dom2 || IE || dom0方式 来删除事件

            removeHandler: function (ele, evet, handler) {

                if(ele.removeEventListener){

                    ele.removeEventListener(evet,handler,false);

                }else if(ele.detachEvent){

                    ele.detachEvent("on"+evet,handler);

                }else{

                    ele["on"+evet]=null;

                }

            }

        };

        var slider=document.getElementById("slider"),

            bbb=document.getElementById("bbb");

        EventUtil.addHandler(bbb,'mouseover',hand)

        EventUtil.addHandler(bbb,'mouseout',hand2)

        function hand(){

            slider.style.right='';

        }

        function hand2(){

            slider.style.right= "-" + getStyle(slider,"width");

        }

    </script>

    <!--<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
　　　　//jqurey方法；

    <script>

        $(document).ready(function () {

            var bbb=$('#bbb');

            var slider=$('#slider');

            bbb.on('mouseenter', function () {

                slider.animate({right:},)

            })

            bbb.on('mouseleave', function () {

                slider.animate({right:-},)

            })

        })

    </script>-->

</body>

</html>

简单侧边栏js效果的更多相关文章

  1. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. javascript学习-原生javascript的小特效（简单的运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

  4. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  6. Jquery简单的placeholder效果

    Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...

  7. 第107天：Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

  8. js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝

    一.一个简单的js方法实现集合拷贝 做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举 ...

  9. 前端动画 wow.js 效果

    让花里胡哨的特效变简单 wow.js动画class介绍 引入css样式以及js插件 <link rel="stylesheet" type="text/css&qu ...

随机推荐

  1. 怎么在Win7系统清除DNS缓存和刷新DHCP列表

    如何清除DNS缓存?开始-运行,如下图所示: 2 在谈出的对话框中输入“cmd”,如下图所示: 3 在出现的DOS命令窗口输入“ipconfig /flushdns”,然后就清除DNS缓存了,在我们遇 ...

  2. java中无参，有参，默认构造方法的应用及举例

    类的构造方法: (1)构造方法的名字和类名相同,并且没有返回值. (2)构造方法主要用于为类的对象定义初始化状态. (3)不能直接调用构造方法,必修通过new关键字来自动调用,从而创建类的实例. ne ...

  3. 用 TensorFlow 实现 k-means 聚类代码解析

    k-means 是聚类中比较简单的一种.用这个例子说一下感受一下 TensorFlow 的强大功能和语法. 一. TensorFlow 的安装 按照官网上的步骤一步一步来即可,我使用的是 virtua ...

  4. iOS-构建自己的代码块【提高编码效率-Xcode代码块】

    前言 2018年3月1日 农历正月十四 星期四 不知怎么地,一大早上班就想写博客: Xcode代码块 开发中,都不想写过多代码,然后就会用这种方法,去简化代码,包括MVVM框架,它也体现出来了去简化C ...

  5. POJ 2350

    #include<iostream> #include<stdio.h> #include<iomanip> using namespace std; int ma ...

  6. 用汇编语言（ARM 32位）编写TCP Bind Shell的菜鸟教程

    用汇编语言(ARM 32位)编写TCP Bind Shell的菜鸟教程 来源 https://www.4hou.com/info/news/9959.html Change 新闻 2018年1月19日 ...

  7. reCaptcha for ASP.NET

    使用reCaptcha for asp.net library,以前一直工作正常,最近发现运行不正常了,google到了一个解决方案,不适用control而直接使用api,代码如下: markup: ...

  8. Jsp页面用ajax传输json数组的方法

    详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...

  9. linux 编译安装amqp

    背景: 下面的内容是我根据网上博客小松的文章 https://www.phpsong.com/2223.html 做的修改,因为我走到make 编译amqp这步报错 最开始报下面的这个错误,是因为要安 ...

  10. Android4.0 Launcher 源码分析3——WorkSpace结构（滑动）

    3.WorkSpace结构(滑动) 桌面的左右滑动功能主要是在PagedView类中实现的,而WorkSpace是PagedView类的子类,所以会继承PagedView中的方法.当我们的手指点击Wo ...