javascript与jQuery对比之淡入

最新推荐文章于 2023-12-14 19:51:15 发布

Shellerine

最新推荐文章于 2023-12-14 19:51:15 发布

阅读量396

点赞数

分类专栏： JS 文章标签：淡入原生js jQuery

本文链接：https://blog.csdn.net/Shellerine/article/details/51304858

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用原生的js写淡入淡出才会发现jQuery帮助做了多少事，例如浏览器的兼容问题，并且不用组织多个DOM属性方法复杂的实现一个功能。用jQuery只需使用fadeIn()方法，参数可以控制透明度，切换效果及回调函数，很方便。

<pre name="code" class="html"><style>
.box{
width:100px;
height:100px;
border:1px solid black;
}
</style>
<body>
 <button id="jQuery">jQuery</button>
    <div class="box" id="box1" style="background-color: blue;display:none;"></div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script>
 $("#jQuery").click(function () {
            $("#box1").fadeIn();
        });
</script>
</body>

<pre name="code" class="html"><pre name="code" class="html"><style>
.box {
        width:100px;
        height:100px;
        border:1px solid black;
    }
</style>
<body>
 <button id="js">原生js</button>
    <div class="box" id="box1" style="background-color: blue;display:none;"></div>
<script>
//解决浏览器兼容问题
function setOpacity(ele, opacity) {
            if (ele.style.opacity != undefined) {
                ele.style.opacity = opacity / 100;
            }
            else {
                ele.style.filter = "alpha(opacity=" + opacity + ")";
            }
        }
//淡入方法的具体实现
function fadeIn(ele, opacity, speed) {
            if (ele)
            {
                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;
                v < 1 && (v = v * 100);
                var count = speed / 500;
                var avg = count < 2 ? (opacity / count) : (opacity / count - 1);
                ele.style.display = 'block';
                setOpacity(ele, 0);
                var timer = null;
                timer = setInterval(function () {
                    if (v < opacity) {
                        v += avg;
                        setOpacity(ele, v);
                    }
                    else {
                        clearInterval(timer);
                    }
                }, 100);
            }
        }
        window.onload = function () {
            document.getElementById("js").onclick = function () {
                fadeIn(document.getElementById("box1"), 100, 3000);
            }
        }
</script>
</body>

Shellerine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript与jQuery对比之淡入

用原生的js写淡入淡出才会发现jQuery帮助做了多少事，例如浏览器的兼容问题，并且不用组织多个DOM属性方法复杂的实现一个功能。用jQuery只需使用fadeIn()方法，参数可以控制透明度，切换效果及回调函数，很方便。 jQuery $("#jQuery").click(function () { $("#box1").fadeIn();
复制链接

扫一扫

专栏目录