zoukankan      html  css  js  c++  java
  • 1.1 控制div属性

    中心主题:通过分别点击“变宽”、“变高”、“变色”、“隐藏”、“重置”按钮对div的相关css属性进行操作。

    一、HTML结构

    <div class="cont-wrap">
        <div> <input type="button" value="变宽" class="changeWidth"/>
            <input type="button" value="变高" class="changeHeight"/>
            <input type="button" value="变色" class="changeColor"/>
            <input type="button" value="隐藏" class="changeNone"/>
            <input type="button" value="重置" class="changeReset"/>
        </div>
    
        <div class="cont"></div>
    </div>

    二、CSS样式

       .cont-wrap{
                width:340px;
                margin:0px auto;
            }
            .cont-wrap>div{
                float: left;
            }
            input{
                width:14%;
            }
            input:not(:last-of-type){
                margin-right: 10px;
            }
            .cont,.cont1{
                width:200px;
                height:200px;
                background-color: deeppink;
                margin-left:10%;
                margin-top:10%;
                display:block;
            }

    三、jquery代码

     $(document).ready(function (){
            var $cont=$(".cont");
            var $changeWidth=$(".changeWidth");
            var $changeHeight=$(".changeHeight");
            var $changeColor=$(".changeColor");
            var $changeNone=$(".changeNone");
            var $changeReset=$(".changeReset");
            $changeWidth.click(function(){
            $cont.animate({"500px"},2500);
         });
            $changeHeight.click(function(){
                $cont.animate({height:"500px"},2500);
            });
            $changeColor.click(function(){
                $cont.css("background-color","pink");
            });
            $changeNone.click(function(){
                $cont.css("display","none");
            });
            $changeReset.click(function(){
                $cont.css({display:"block","200px",height:"200px",backgroundColor:"deeppink"});
            });
    
    
        });

    四、实际效果

    初始状态:

    变宽:

    变高:

    隐藏:

    重置:

  • 相关阅读:
    android studio gradle plugin 用户指南 选择性翻译
    c++ 遍历多维数组的10种方式
    cocos2dx FixedPriority和SceneGraphPriority
    cocos2dx 坐标转换
    MySQL删除表
    MySQL修改表
    MySQL创建表
    MySQL的删除语句
    MySQL的更新语句
    MySQL的插入语句
  • 原文地址:https://www.cnblogs.com/wuliwuli/p/5718100.html
Copyright © 2011-2022 走看看