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  序猿·徐  阅读(546)  评论(2编辑  收藏  举报