jquery动画函数

最新推荐文章于 2022-05-13 20:17:32 发布

niuguangyuan

最新推荐文章于 2022-05-13 20:17:32 发布

阅读量648

点赞数 1

分类专栏： jquery动画文章标签： jQuery 动画

本文链接：https://blog.csdn.net/niuguangyuan/article/details/8892246

版权

jquery动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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></title>
    <style type="text/css">
    .sh
    {
        width:100px;
        height:100px;
        border:2px solid Orange;
        }
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function () {
            $('#b1').click(function () {
                $('#img1').fadeOut(2000, function () {
                    $('#b1').val('变了诶！')
                })
            })
            $('#b2').click(function () {
                $('#img1').fadeIn(2000, function () {
                    $('#b2').val('变了诶')
                })
            })
            $('#b3').click(function () {
                $('#img1').fadeTo(2000, 0.3, function () {
                    $('#b3').val('介个好黑');
                })
            })
        })
    </script>
    
    <script type="text/javascript">
        $(function () {
            $('#b4').click(function () {
                $('#img1').slideUp(2000);
            })
            $('#b5').click(function () {
                $('#img1').slideDown(2000);
            })
            $('#b6').click(function () {
                $('#img1').slideToggle(2000);
            })
        })
    </script>
    
    <script type="text/javascript">
        $(function () {
            var zhi = $('#ah input:checked').val();
            $('#ah input').click(function () {
            $('#img1').fadeTo(2000, $('#ah input:checked').val())
            })
        })
    </script>
</head>
<body>
<div><input type="button" id="b1" value="淡出" /><input type="button" id="b2" value="淡入" /><input type="button" id="b3" value="淡到" /></div>
<div><input type="button" id="b4" value="收起" /><input type="button" id="b5" value="拉出来" /><input type="button" id="b6" value="多用" /></div>
<div><img src="imgs/1.jpg" id="img1" class="sh"/></div>
<div id="ah"><input type="radio" value="0" id="0" name="1" />0<input type="radio" value="0.1" id="0.1" name="1" />0.1
<input type="radio" value="0.2" id="0.2" name="1" />0.2<input type="radio" value="0.3" id="0.3" name="1" />0.3
<input type="radio" value="0.4" id="0.4" name="1" />0.4<input type="radio" value="0.5" id="0.5" name="1"/>0.5
<input type="radio" value="0.6" id="0.6" name="1"/>0.6<input type="radio" value="0.7" id="0.7" name="1" />0.7
<input type="radio" value="0.1" id="0.8" name="1"/>0.8<input type="radio" value="0.9" id="0.9" name="1"/>0.9

</div>
</body>
</html>

niuguangyuan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery动画函数

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> .sh { width:100px; height:100px; border:2px solid Orange;
复制链接

扫一扫

专栏目录