JS代码,多张图片的渐变。可展开,可缩小。

来源:互联网 发布:faces照相软件 编辑:程序博客网 时间:2024/04/30 02:01
<head>
    <title></title>
    <style type="text/css">
    .imgclass
    {
        width:200px; height:200px;
        }
        table tr td
        {
            width:300px; height:300px;
            }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Button1').click(function () {
                //获取的是所有类型(tagname)为img的元素
                //$('img').hide(3000);
                //$('img').show(3000);


                //获取的是所有class属性的值为“imgclass”的元素
                $('.imgclass').hide(3000);
                $('.imgclass').show(3000);
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                <img id="img1" src="images/1.jpg" class="imgclass" />
            </td>
            <td>
                <img id="img2" src="images/2.jpg" class="imgclass" />
            </td>
        </tr>
        <tr>
            <td>
                <img id="img3" src="images/3.jpg" class="imgclass" />
            </td>
            <td>
                <img id="img4" src="images/4.jpg" class="imgclass" />
            </td>
        </tr>
    </table>
    <input id="Button1" type="button" value="玩儿" /><br />
 
</body>