Jquery 实现动画效果（一）

最近正在学习Jquery，跟着教程自己写了个动画效果，最基本的，都不要见笑哟（o(∩_∩)o 哈哈）。

 

首先，我们准备几张素材图片用来显示。

接着添加个按钮来实现图片的还原效果。

事例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jqury 动画之-简单动画入门</title>
    <!-- 引入Jqury 库 -->
    <script type="text/javascript" src="Script/jquery-1.3.2.min.js"></script>

    <!-- 样式 -->
    <style type="text/css">
        ul li{ list-style:none; float:left;}
    </style>
</head>
<body>
      <div>
            <ul>
            	<li><img  src="Image/01.jpg" alt="01"/></li>
                <li><img  src="Image/02.jpg" alt="02"/></li>
                <li><img  src="Image/03.jpg" alt="03"/></li>
                <li><img  src="Image/04.jpg" alt="04"/></li>
                <li><img  src="Image/05.jpg" alt="05"/></li>                 
            </ul>
            <input type="button" value="还 原"  id="btnShow"  />
            <script language="javascript" type="text/javascript">
                //设定动画速度
                var speed = 600;
                //给图片添加点击事件，点击后图片隐藏。如果嫌图片麻烦，可以替换为div也行
                $("img").bind("click", function (event) {
                    $(this).hide(speed);
                });
                //还原显示所有图片。
                $("#btnShow").bind("click", function (event) {
                    $(":img").show(speed);
                });
            </script>
      </div>
</body>
</html>

 

效果预览：

 

2、

3、

 

真像教程里面所说的，有了Jquery，天天喝茶水。

 

posted @ 2011-01-07 13:21  序猿·徐  阅读(562)  评论(2)    收藏  举报