当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果

HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果

2019年05月11日  | 移动技术网IT编程  | 我要评论

现代启示录快播,忧郁罗密欧,kb974945

先来张图：

\

来一张效果图，其他就不一一展示了，代码都在下面：

\

代码如下：

html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>下午练习title>
    <script type="application/javascript" src="jquery.1.12.4.js">script>
    <script>

        $(function () {
            $("#a").click(function () {
                $("img").fadein(2000,function () {
                    alert("图片淡入了")
                });
            })
            $("#b").click(function () {
                $("img").fadeout(2000,function () {
                    alert("图片淡出了")
                })
            })
            $("#c").click(function () {
                $("img").slideup(3000,function () {
                    alert("图片收起来了，隐藏")
                })
            })
            $("#d").click(function () {
                $("img").slidedown(3000,function () {
                    alert("图片放下来了，显示")
                })
            })
            $("#e").click(function () {
                $("img").slidetoggle(3000,function () {
                    alert("显示/隐藏切换了")
                })
            })
            $("#f").click(function () {
                $("img").fadetoggle(3000,function () {
                    alert("淡出淡入切换")
                })
            })
            $("#g").click(function () {
                $("img").animate({
                    width:"120px",  /*图片的宽和高*/
                    height:"160px",
                    opacity:0.5 /*透明度*/

                },1000,function () {
                    alert("动画结束了")
                })
            })
            $("#q").click(function () {
                $("img").hide(2000,function () {
                    alert("图片隐藏了")
                });       /*图片显示、隐藏的效果  和  淡入，淡出的效果不一样*/
            })
            $("#w").click(function () {
                $("img").show(2000,function () {
                    alert("图片显示了")
                })
            })

        })
    script>
head>
<body>
<button id="a">淡入button>
<button id="b">淡出button>
<button id="c">更改大小隐藏button>
<button id="d">更改大小显示button>
<button id="e">更改大小显示隐藏切换button>
<button id="f">淡出淡入切换button>
<button id="g">自定义动画button>
<button id="q">隐藏button>
<button id="w">显示button>
<center>
<img src="a1.jpg" height="339" width="510"/>
center>
body>
html>

=================================================================================================

左右移动效果图：\

\

代码如下：

html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>左右移动title>

    <script type="application/javascript" src="jquery.1.12.4.js">script>
    <script>
    /*实现左右移动的效果*/
       $(function () {
            $("#a").click(function () {
                $("p").animate({left:'+50px'},"slow")
            })
            $("#b").click(function () {
                $("p").animate({left:'-50px'},"slow")
            })

        })

    script>
head>
<body>
<center>
    <button id="a">左移button>
    <button id="b">右移button>
    <p style="position: absolute;width:100px;">这是我的pp>
center>
body>
html>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网