<!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. (转)ReentrantLock可重入锁的使用场景

    原文: http://my.oschina.net/noahxiao/blog/101558

  2. Python小白学习之路（七）—【字典】【字典的功能】【布尔值】

    字典(dict) 基本结构: d = {key1 : value1, key2 : value2 } dict = {'} key : value称为字典的键值对. 每个键 key和值value 之间 ...

  3. HTML基本标记1.1

    HTML头部标记head 在HTML语言的头部元素中,一般包括标题,基础信息和元信息等.HTML的头部元素以<head>为开始标记,以</head>为结束标记 语法: < ...

  4. 【xsy1120】 支援(assist) dp+卡常

    妙啊算错时间复杂度了 题目大意:给你一棵$n$个节点的二叉树,每个节点要么是叶子节点,要么拥有恰好两个儿子. 令$m$为叶子节点个数,你需要在这棵二叉树中选择$i$个叶子节点染色,叶节点染色需要一定的 ...

  5. GDOI2018滚粗记

    day-50: 高中全体成员去了北京训练,我被虐成傻逼(貌似总分全校倒数第2). day-20: 回广州了,间断式略微考好55555..... day0: 早上起床好像有点晚qwq 然后简单打了个FF ...

  6. 为了用python计算一个汉字的中心点，差点没绞尽脑汁活活累死

    为了用python计算一个汉字的中心点,差点没绞尽脑汁活活累死

  7. 在 Vuejs 项目中如何定义全局变量 全局函数

    在 Vuejs 项目中如何定义全局变量 全局函数 在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录 token, 用户的地址信息等,这时候就需要设置一波全局变量和 ...

  8. ES6-Set and Map

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...

  9. 【Express系列】第2篇——主程序的改造

    上一篇对项目的目录结构和 app.js 等一些文件做了一些改造,然而那只是开始. 接下来将做进一步的改造和完善. 我们先看看几个主要的脚本文件,下面的代码是我稍微修改过并添加注释的,方便理解每句代码的 ...

  10. crontab的用法

    转载于:点击打开链接   cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业. 由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务: / ...