<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器右侧内容点击收缩展开实现</title>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var divShow = true;
$(function(){
$("#navImg").click(function(){
var thisObj = $("#rightNav");
if (divShow) {
thisObj.each(function() {
$(this).animate({right : "-500"}, 300);
});
divShow = false;
} else {
thisObj.each(function() {
$(this).animate({right : "0"}, 300);
});
divShow = true;
}
});
});
</script>
</head>
<body>
<!-- 右侧导航 -->
<div id="rightNav" style="position:fixed; right:0; margin-top:200px;">
<div style="float: left;">
<img id="navImg" style="cursor:pointer;" src="image/arrow.png">
</div>
<div style="height:40px; width:500px; float:left; background:red;">
显示内容
</div>
</div>
</body>
</html>
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
