zoukankan      html  css  js  c++  java
  • JQuery笔记(二) animate支持的属性

    以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1-1</title>
    <!-- 引入 jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function(){
        $("#aa").toggle(function(){
           $("img").animate({top:"330px"},200);
        },
        function(){
           $("img").animate({top:"0px"},200);
        }
        );
        $("#bb").toggle(function(){
           $("#div2").animate({background-position:"0 330px"},200);
        },
        function(){
           $("#div2").animate({background-position:"0 0px"},200);
        }
        )
    });
    </script>
    </head>
    <body>
    <a id=aa href="#">外部DIV设置为Relative,内部img设置为absolute,对top动画</a> <br><br><br>
    <div style="position:relative;display:block;403px;height:330px;border:1px solid red;overflow:hidden;"><img src="3.jpg" style="position:absolute;top:0px;" width="403" height="330"  /></div>

    <p>&nbsp;</p>
    <p><a id=bb href="#">背景图片位置动画</a><br>
      <br>
    </p>
    <div id=div2 style="display:block;403px;height:330px;border:1px solid red;background-image:url(3.jpg);background-repeat:no-repeat;background-position:0 0px;"></div>
    </body>
    </html>

    3
  • 相关阅读:
    android点滴 之 进度条
    android点滴(26)之让线程拥有自己的消息循环
    Python property
    MD5加密
    哈希表加载xml文件
    .NET自定义控件制作
    如何用Treeview树加载xml
    xml的属性
    FFT实现——有趣的移位寄存流水线形式
    频率选择滤波器 线性时不变系统
  • 原文地址:https://www.cnblogs.com/jetz/p/1696738.html
Copyright © 2011-2022 走看看