<!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. 向 webview 添加 userScript

    添加前,网页代码如下: <!DOCTYPE html> <html> <!--<script type="text/javascript"> ...

  2. 【洛谷十月月测】 P3927 SAC E#1 - 一道中档题 Factorial

    题目传送门:https://www.luogu.org/problemnew/show/P3927 题目大意:给你两个正整数n,k,求n!在k进制下末尾零的数量. 我们通过简单的数学分析,便可以发现, ...

  3. Seqlist L 与 Seqlist *L的区别

     Seqlist L结构体变量,SeqlistInsert之后不可以带回新的插入数据.  Seqlist *L 是传结构体指针 用SeqlistInsert之后可以有新的插入.

  4. zabbix 调用python脚本监控 磁盘剩余空间（创建模版，创建监控项，创建触发器）

    主要 记录一下  使用zabbix 自己创建模版.监控项.触发器,并调用python脚本. 需求: 监控备份机磁盘剩余空间(windows系统) 一.安装zabbix_agent 比较简单 修改配置文 ...

  5. tomcat启动(一)startup.bat|catalina.bat分析

    环境:windows X64位 Tomcat8.0.47 bootstrap.jar是tomcat的内核 开始位置 startup.bat 查看文本 具体的批处理脚本语法可以查看我整理的文章 http ...

  6. elasticsearch（三） 之 elasticsearch目录介绍和配置文件详解

    目录 elasticsearch 配置 目录详情 (config) 配置文件 elasticsearch.yml 配置集群名称(cluster.name) 配置 network.host 更改数据和储 ...

  7. JAVA 图像操作辅助类

    package util; import java.awt.Component; import java.awt.Image; import java.awt.MediaTracker; import ...

  8. MCS锁和CLH锁

    CLH锁:自旋锁,在上一个节点上等待,先上代码: public class CLHLock { /** * 保证原子性操作 * */ private AtomicReference<Node&g ...

  9. 用Shell编写项目发布脚本

    1.首先在github上创建一个测试用的仓库 2.本地编写一个可以运行的测试项目,上传至github 3.链接服务器,编写脚本如下:注意:编写前需要在服务器上安装git和maven 执行build_c ...

  10. 在懒加载的Ionic工程中使用 ionic2-auto-complete 组件：Can't bind to 'dataProvider' since it isn't a known property of 'ion-auto-complete'

    问题描述: 在基于懒加载的Ionic工程中,使用ionic2-auto-complete组件(GitHub地址:https://github.com/kadoshms/ionic2-autocompl ...