图片效果

最新推荐文章于 2022-07-06 17:05:48 发布

yvi312082007

最新推荐文章于 2022-07-06 17:05:48 发布

阅读量367

点赞数

文章标签： input function button class border float

本文链接：https://blog.csdn.net/yvi312082007/article/details/7358670

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
          #divFrame
        {
            width: 500px;
            height: 400px;
            border: solid 1px #eee;
        }
        img
        {
            width: 280px;
            height: 300px;
        }
        #divright
        {
            float: right;
            width:280px;
        }
        #divleft
        {
            width:210px;
            float:left;
        }
        .imgclass{border:2px solid green;}
        .btnclass{ margin:10px;}

    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('input:eq(1)').bind('click', function () {
                $('img').toggle();
            })

            $('input:eq(2)').bind('click', function () {
                $('img').toggle(true);
            })

            $('input:eq(3)').bind('click', function () {
                $('img').toggle(2000);
            })
            $('input:eq(4)').bind('click', function () {
                $('img').slideUp();
            })
            $('input:eq(5)').bind('click', function () {
                $('img').slideDown();
            })
            $('input:eq(6)').bind('click', function () {
                $('img').fadeOut(3000);
            })
            $('input:eq(7)').bind('click', function () {
                $('img').fadeIn(3000).addClass('imgclass');
            })

            $('#slelect').bind('change', function () {
                var int = $(this).val();
                $('img').fadeTo(2000, parseFloat(int));
            })
        })
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="divFrame">
    <div id="divleft">
    <input type="button" value="无参数" class="btnclass" />
    <br />
     <input type="button" value="布尔值" class="bntclass" />
    <br />
    <input type="button" value="动画效果" class="btnclass" />
    <br />
    <input type="button" value="slideUp" class="btnclass" />
    <br />
    <input type="button" value="slideDown" class="btnclass" />
    <br />
    <input type="button" value="fadeOut" class="btnclass" />
     <br />
    <input type="button" value="fadeIn" class="btnclass" />
    <br />
    <select id="slelect">
    <option value="0">0</option>
    <option value="0.2">0.2</option>
        <option value="0.4">0.4</option>
            <option value="0.8">0.8</option>
                <option></option>
    </select>
    </div>
    <div id="divright"><img src="images/sdf.jpg" /></div>
    </div>
    </form>
</body>
</html>