<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>silder</title> <style> #slider{ 300px; position: fixed; background-color: #cccccc; top: 0; bottom: 0; right:-300px; transition: right 0.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='0'; } 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:0},500) }) bbb.on('mouseleave', function () { slider.animate({right:-300},500) }) }) </script>--> </body> </html>