• jQuery 的动画效果图片----隐藏打开方法


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.2.1.js"></script>
    
    </head>
    <body>
        <img src="22.jpg" style="display: none">
        <div>
            <input id="show" type="button" value="出现美女">
            <input id="hide" type="button" value="藏起美女">
            <input id="toggle" type="button" value="点击美女">
        </div>
    <script>
        $("#show").click(function () {
            $("img").show(5000);
        })
        $("#hide").click(function () {
            $("img").hide(2000);
        })
        $("#toggle").click(function () {
            $("img").toggle(800);
        })
    
    </script>
    </body>
    </html>

    此代码中我们首先做了个img标签,放了一张美女图,并先设置display:none

    随后设置了3个Input标签,并分别绑定了3个方法 

    1,show()此方法是将绑定的标签里的display:none改为dispaly:inline-block,随后从左上角起往右下角拉升放大,并且透明度由透明0逐渐恢复到1 ,并可以设置参数,1000为一秒钟完成展示整个过程

    2,hide()与上方法相反,display由inline-block改为none,并且收缩图像,透明度由1逐渐变成0.也是可以设置时间参数

    3.toggle()是上面2个方法的集合在一个键上,意思就是判断你的dispaly是什么属性,如果是none 就设置inline-block 如果非none就设置inline-block;

  • 相关阅读:
    linux 计划任务
    linux 进程管理
    PHP中global与$GLOBALS['']的区别
    php预定义变量
    linux 强制终止进程命令
    mysql取某表中数据的随机的方法
    mysql 连接 选库 查询
    Python 的异步 IO:Asyncio 简介
    并发和并行的区别
    asyncio模块中的Future和Task
  • 原文地址:https://www.cnblogs.com/laoguiaabb/p/8076380.html
走看看 - 开发者的网上家园