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>

  • 相关阅读:
    [Angularjs]ng-switch用法
    [Asp.net Mvc]通过UrlHelper扩展为js,css静态文件添加版本号
    [转]支持高并发的IIS Web服务器常用设置
    [Redis]c# redis缓存辅助类
    [asp.net mvc]自定义filter
    [C#]exchange发送,收件箱操作类
    [bug]The file ‘/xxx/xxx.aspx’ has not been pre-compiled, and cannot be requested
    [Angularjs]自定义指令
    mycat介绍
    fdLocalSql使用方法
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3024358.html
Copyright © 2011-2022 走看看