jQuery的卷帘效果

一个简单的jQuery实现的卷帘效果,用的时候可以在相应的div中添加代码

<html>
<head>
<script language="javascript" src="jquery-1.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery测试</title>

<style type="text/css">
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>


<script language = "JavaScript" type="text/javascript">
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
</script>
</head>
<body>

Click here...
<div>
<table bgcolor="#7F3F00">
<tr>2</tr>
<tr>3</tr>
<tr>4</tr>
</table>
</div>

</body>

</html>

转载自:https://blog.csdn.net/hubinliweiwei/article/details/83440002

You may also like...