<!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. WWDC: Thread Sanitizer and Static Analysis

    Thread Sanitizer 过程 编译过程中链接了一个新的库.  也可以通过命令行来操作: $ clang -fsanitize=thread source.c -o executable $ ...

  2. Hbuilder用ajax连接eclipse中的servlet例子以及注意事项

    今天用前端神器Hbuilder连接eclipse中的servlet,真是费了九牛二虎之力,才把问题解决 Hbuilder中的代码: test.html <!DOCTYPE html> &l ...

  3. 【JXOI2018】排序问题 贪心

    我们令$sum_i$表示数字i在加完数字的数列中出现的次数,那么答案显然为$\dfrac{(n+m)!}{\sum_{i=0}^{\infty}sum_i!}$ 不难发现,当每次添加的数为$[l,r] ...

  4. POJ 1221

    #include <iostream> #define MAXN 500 using namespace std; unsigned dp[MAXN][MAXN]; int main() ...

  5. (转)pt-online-schema-change在线修改表结构

    原文:http://www.ywnds.com/?p=4442 一.背景 MySQL大字段的DDL操作:加减字段.索引.修改字段属性等,在5.1之前都是非常耗时耗力的,特别是会对MySQL服务产生影响 ...

  6. linux内核模块的安全

    linux可以动态的加载内核模块,在很多场合可能需要确保加载内核的安全性.如果被攻击者加载恶意内核模块,将会使得内核变得极其危险. 当然,稳妥的做法就是给内核模块进行签名,内核只加载能正确验证的签名. ...

  7. 初学者必知的Python中优雅的用法 分类： Python 2015-05-11 15:02 782人阅读 评论(0) 收藏

    本文由 伯乐在线 - 淘小米 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:freepythontips.wordpress.com.欢迎加入翻译小组. Hi 朋友们.由于我最近都比较忙 ...

  8. 【jQuery源码】tokenize方法

    //得到由选择器生成的token对象的数组(下面的groups) //Sizzle的Token格式如下 :{value:'匹配到的字符串', type:'对应的Token类型', matches:'正 ...

  9. 爬虫实战(二) 51job移动端数据采集

        在上一篇51job职位信息的爬取中,对岗位信息div下各式各样杂乱的标签,简单的Xpath效果不佳,加上string()函数后,也不尽如人意.因此这次我们跳过桌面web端,选择移动端进行爬取. ...

  10. C#语法之Linq查询基础二

    上篇C#语法之Linq查询基础一基本把Linq介绍了一下,这篇主要是列举下它的几个常见用法. 在用之前先准备些数据,新建了两个类Student.Score,并通过静态方法提供数据. using Sys ...