不知名的大神写的divs

最新推荐文章于 2021-08-03 20:48:17 发布

milijiangjun

最新推荐文章于 2021-08-03 20:48:17 发布

阅读量638

点赞数

分类专栏：声明

本文链接：https://blog.csdn.net/milijiangjun/article/details/79254199

版权

声明专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<body>
    <span>目标宽度：</span><input id='id_width' type='input' value='300'/></br>
    <span>目标高度：</span><input id='id_height' type='input' value='300'/></br>
    <input id='id_BtnEnlarge' type='button' value='DIV尺寸渐变' style="margin-bottom:10px;"/>
    <div id='id_DivTest' style='width:100px;height:100px;background-color:red;overflow:hidden;border-radius: 150px;'></div>

    <script type="text/javascript">
        function enlargeDiv (size) {
            var div = document.getElementById('id_DivTest');
            var step = 2; //定义单次尺寸变化量
            
            //计算当前尺寸和目标尺寸的差
            var wDiff = size.width - parseInt(div.style.width);
            var hDiff = size.height - parseInt(div.style.height);

            //记录尺寸变化方向
            var wDirec = wDiff > 0 ? 1 : -1;
            var hDirec = hDiff > 0 ? 1 : -1;
            
            wDiff = Math.abs(wDiff);
            hDiff = Math.abs(hDiff);
            
            //计算本次尺寸变化量
            var wAdd, hAdd;
            
            if (wDiff == 0) {
                wAdd = 0;
                hAdd = step < hDiff ? step : hDiff;
            }
            else if (hDiff == 0) {
                hAdd = 0;
                wAdd = step < wDiff ? step : wDiff;
            }
            else if (wDiff > hDiff) {
                wAdd = step < wDiff ? step : wDiff;
                hAdd = Math.floor(wAdd*hDiff/wDiff);
    
                if(wAdd == wDiff) hAdd = hDiff;
            }
            else {
                hAdd = step < hDiff ? step : hDiff;
                wAdd = Math.floor(hAdd*wDiff/hDiff);
                
                if(hAdd == hDiff) wAdd = wDiff;    
            }
            
            div.style.width = parseInt(div.style.width) + wAdd*wDirec + "px";
            div.style.height = parseInt(div.style.height) + hAdd*hDirec + "px";
            
            if(wAdd == wDiff && hAdd == hDiff) div.enlargeTimer = clearInterval(div.enlargeTimer);
                
        }
    
        document.getElementById('id_BtnEnlarge').onclick = function() {
            var w = parseInt(document.getElementById('id_width').value);
            var h = parseInt(document.getElementById('id_height').value);
            
            if(w >= 0 && h >= 0) {
                var size = {width:w, height:h};
                var div = document.getElementById('id_DivTest');
                
                if(div.enlargeTimer) return; //防止重复点击产生多个渐变过程
                div.enlargeTimer = setInterval(function(){enlargeDiv(size);}, 20);
            }
            
        };
            
        
    </script>
</body>
</html>

本人百度上找的不知哪位写的

下侧是本人写的滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div容器的滑出效果-jquery</title>
  
    <script type="text/javascript" src="Script/jquery-1.7.min.js" ></script>
    <style>
        *{margin: 0px;padding:0px;}
        /*为整体的容器*/
         #Nav{width: 300px;height: 300px;margin-top: 100px;border:1px solid red;}
        /*功能模块*/
        #Ner
        {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            top:-100px;
        }
       

    </style>
    <script type="text/javascript">
        //默认显示
        var CheckBtnStart = true;
        function Show() {

            $("div").animate({
                top: "0px"
            });


        }
        function hiden() {
            $("div").animate({
                top: "-100px"
            });
        }
        function SAndH()  {
            if(CheckBtnStart){
                alert("显示");
                Show();
                CheckBtnStart = false;

            }else{
                  alert("隐藏");
                  hiden();
                  CheckBtnStart = true;}
            
        }
    </script>
</head>
<body>
    <input type="button" value="点我滑出" οnclick="Show();">
    <input type="button" value="点我隐藏" οnclick="hiden();">
    <input type="button" value="显示隐藏" οnclick="SAndH();" >
    <div id="Nav" >
        <div id="Ner" ></div>
    </div>
</body>
</html>

milijiangjun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不知名的大神写的divs

目标宽度：目标高度： function enlargeDiv (size) { var div = document.getElementById('id_DivTest'); var step = 2; //定义单次尺寸变化量 //计算当前尺
复制链接

扫一扫