您的位置：首页 > Web前端 > JQuery

javascript与jQuery对比之淡入

2016-05-03 15:20 447 查看
用原生的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>




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航