<!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk">
<title>test</title>
<style>
div,h6,body{padding:0;margin:0;}
div,h6{font:bold 12px/24px 'Tahoma';text-indent:15px;}
.car-mod{position:relative;width:200px;}
.car-menu{width:200px;background:#c06;cursor:pointer;color:#fff;}
.car-box{border:2px solid #c06;width:300px;display:none;}
.car-box h6{background-color:#f5f5f5;background-image:-moz-linear-gradient(#f5f5f5,#fff);}
.things{border-top:1px solid #ccc;padding:50px 15px;}
</style>
</head>
<body>
<div>
<div>购物车</div>
<div>
<h6>我的购物车</h6>
<div></div>
</div>
</div>
<script src="https://www.jb51.net/animation.source.js"></script>
<script>
(function(){
//线上调用这个插件的时候直接调用animation.js这个是压缩了的
var D = document,carMod = D.getElementById("J_car_mod"),carBox = D.getElementById("J_car_box"),carControl=true;
//移入显示
carMod.onmouseover = function(even){
var even = even || window.event,target = even.target || even.srcElement;
if(target.className=="car-menu"){
!!carControl&&(carObj = new ani(carBox,{maxVal:1,sty:"opacity"},function(){carControl=false;}));
carObj = null;
}
//移出隐藏
this.onmouseout = function(even){
var e = even || window.event,
reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != this){reltg = reltg.parentNode;}
if(reltg != this){
!carControl&&(carObj1 = new ani(carBox,{maxVal:0,sty:"opacity"},function(){carControl=true;}));
carObj1 = null;
}
}
}
})()
</script>
</body>
</html>
这个是基于前面的那个弹出层的demo版本的效果，这个效果必须复制前面的弹出层的js哦部分代码如下
[html]
复制代码 代码如下: