• jQuery中图片隐藏效果的所有方法


    <head>
        <title></title>
        <style type="text/css">
            .imgclass
            {           
                300px;
                height: 300px;
                border: solid 1px red;
                position:relative; left:100px; top:100px;
            }
            img
            {
                position:absolute;
                top:10px;
                left:10px;
                height:100px;
                100px;
                }
            td
            {
                300px;
                height:300px;
                }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('img').click(function () {
                    //$('img').css({'500px',height:'500px'});
                    //$('img').animate({'500px',height:'500px'}, 2000);
                    $(this).animate({ '500px' }, 2000).animate({ height: '500px' }, 2000).animate({ left: '+=100px' }, 2000).animate({ top: '-=100px' }, 2000);
                })


                $('#Button1').click(function () {
                    $('#spinfo').animate({ fontSize: '40px' }, 2000);
                })

                $('#Button2').click(function () {
                    $('img').stop();
                })

                $('#Button3').click(function () {
                    $('img').delay(2000).hide(2000);
                })

                $('#Button4').bind('click', function () {
                    $('img').fadeIn(2000, function () {
                        $('#Button4').val("哈哈");
                    })
                })

                $('#Button5').click(function () {
                    $('img').fadeOut(2000, function () {
                        $('#Button5').val("嗯嗯");
                    })
                })
                $('#Button6').click(function () {
                    $('img').fadeTo(2000, 0.5, function () {
                        $('#Button6').val("呵呵");
                    })
                })

                $('#Button7').click(function () {
                    $('img').slideUp(2000);
                })
                $('#Button8').click(function () {
                    $('img').slideDown(2000);
                })
                $('#Button9').click(function () {
                    $('img').slideToggle(2000)
                })
            })
        </script>
    </head>
    <body>
        <input id="Button1" type="button" value="字变大" />
        <input id="Button2" type="button" value="停止" />
        <input id="Button3" type="button" value="延迟" />
        <input id="Button4" type="button" value="fadeIn" />
        <input id="Button5" type="button" value="fadeOut" />
        <input id="Button6" type="button" value="fadeTo" />
        <input id="Button7" type="button" value="上拉" />
        <input id="Button8" type="button" value="下拉" />
        <input id="Button9" type="button" value="自动上拉下拉" />
        <span id="spinfo">好热</span>
        <br />
        <img src="images/1.jpg" class="imgclass" />
    </body>

  • 相关阅读:
    ASP.NET Interview Questions
    [上海]招聘.Net高级软件工程师&BI数据仓库工程师(急)
    访问被拒绝:“microsoft.web.ui.webcontrols”的解决办法
    上海市区广场、商场、大厦中英文对照大全
    文件夹加密码方法
    JavaScript:使用面向对象的技术创建高级 Web 应用程序(转)
    对数据类型而言运算符无效。运算符为 add,类型为 text。
    SQL行列转换
    主成分分析(Principal components analysis)最小平方误差解释
    主成分分析(Principal components analysis)最大方差解释
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3065165.html
Copyright © 2020-2023  润新知