<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>silder</title>
<style>
#slider{
width: 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>
