<!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. 题解 P1731 【生日蛋糕】

    题面传送门 如果不懂DFS,请自觉睡觉: 如果不懂剪枝,请自觉睡觉: 啊哈,大家的思路一定和我一样--DFS,找个数组存储半径和高,可是如单单使用DFS不加剪枝的话,10分--20分. 所以,我们来想 ...

  2. Numpy 创建数组2

    Numpy数组除了可以使用底层 ndarray 构造器来创建外,也可以同伙一下集中方式来创建. numpty.empty numpy.empty方法用来创建一个指定形状(shaoe).数据类型(dty ...

  3. SAS->关联分析实践

    SAS系统被誉为国际上的标准软件系统,本文将详细介绍如何在SAS/EM模块中进行关联规则数据挖掘,使用的软件版本是SAS 9.1.3下的Enterprise Miner 4.3: 从SAS顶端的[解决 ...

  4. python的强制转换（当出现 not supported between instances of 'str' and 'int' 的错误时）

    当我们编程时,有时会出现如下错误:TypeError: '>' not supported between instances of 'str' and 'int' 如下图: 这是因为input ...

  5. numpy 基本使用1

    Numpy是一个非常强大的库,具有大量线性代数以及大规模科学计算的方法. #-*- coding:utf-8 -*- import numpy as np #Numpy生成一维数组 a=np.arra ...

  6. 在CentOS上装Redis

    Redis官网 $ wget http://download.redis.io/releases/redis-3.2.5.tar.gz $ tar xzf redis-.tar.gz $ cd red ...

  7. 如何使用Android Studio提高App质量

    Android Studio作为现在谷歌主推的Android开发功能,除了提供了大量的功能帮助快速开发Android代码之外,在代码质量控制方面也提供了很多工具,这些工具都放在Analyze菜单下, ...

  8. Python -- 网络编程 -- Socket简单网络通信

    Qt如果多线程的话,似乎会出BUG 1.服务端(server.py) import sys, socket, threading import binascii from PyQt4 import Q ...

  9. 《垃圾回收的算法与实现》——GC标记-清除算法

    基本算法 标记-清除算法由 ==标记阶段== 和 ==清除阶段== 构成. 标记即将所有活动的对象打上标记. 清除即将那些没有标记的对象进行回收. 标记与清除 遍历GC root引用,递归标记(设置对 ...

  10. Beta阶段——Scrum 冲刺博客第五天

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 完成部分answer界面的制作,将题目与用户输入的答案.正确答案依次列出来 ...