zoukankan      html  css  js  c++  java
  • JS张开收缩图片

    <!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"> 
        .image
        {
            400px;
            height:300px;
            border:1px solid blue;
            display:none;
            }
         .divFrame
         {
             260px; border:solid 1px  #666; font-size:10pt;
             }
         .divTitle
         {
             background-color:#eee; padding:5px;
             }
         .dicContent
         {
             padding:5px;
             display:none;
             }
         .divCurrColor
         {
             background-color:Red;
             }
        </style>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('#img1').addClass('image');
                $('#Button1').click(function () {
                    $('#img1').show(5000);
                })
                $('#Button2').click(function () {
                    $('#img1').hide(5000);
                })
                $('#Button3').click(function () {
                    $('#img1').fadeIn();
                })
                $('#Button4').click(function () {
                    $('#img1').fadeOut();
                })
                $('.divTitle').click(function () {
                    $(this).addClass('divCurrColor').next('.dicContent').css('display', 'block')
                })


            })        
        </script>
    </head>
    <body>
    <img id="img1" src="images/2.jpg" />
    <input value="展示图片" id="Button1" type="button" />
    <input value="收缩图片" id="Button2" type="button" />
    <input value="快速展示图片" id="Button3" type="button" />
    <input value="快速收缩图片" id="Button4" type="button" />
    <div class="divFrame">
    <div class="divTitle">主题</div>
    <div class="dicContent">
    <a href="#">连接一</a><br />
    <a href="#">连接二</a><br />
    <a href="#">连接三</a>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Java入门3.2---线程池
    Java入门3.1---多线程
    打开ppt报"powerpoint无法加载mathtype加载项"错误
    LATEX排版总结
    casbin 权限系统
    Go netpoll I/O 多路复用构建原生网络模型之源码深度解析
    使用winsw包装服务将nginx包装为Windows服务
    Node.js 的模块系统
    一文读懂 babel7 的配置文件加载逻辑
    vue-cli是什么?和 webpack是什么关系?
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3024358.html
Copyright © 2011-2022 走看看