图片缓慢放大缩小代码,Js代码库,德仔网

代码语言

代码分类

【Js】图片缓慢放大缩小

作者:小天 / 发布于2016/7/11/ 581

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片的缓慢缩放</title>
</head>
<script>
    window.onload = function(){
        var btn_big = document.getElementById("big");
        var btn_small = document.getElementById("small");
        var pic = document.getElementById("pic");
        //缓慢放大
        btn_big.onclick = function(){
            var width = parseInt(pic.style.width);
            var i = width;
            var count = 0;
            console.log(width);
            var timer = setInterval(function(){
                count++;
                i++;
                pic.style.width = i + "%";
                if(count == 10 ){
                    clearInterval(timer);
                }else if( i > 50){
                    btn_big.onclick = function(e){
                        btn_big.onclick = null;
                    };
                }
            },13);
        };
 
        //缓慢缩小
        btn_small.onclick = function(){
            var width = parseInt(pic.style.width);
            var count = 0;
            if(width == 10){
                alert("图片已最小!!");
                return false;
            }
            console.log(width);
            var timer2 = setInterval(function(){
                count++;
                width--;
                pic.style.width = width +"%";
                if(count == 10){
                    clearInterval(timer2);
                }else if( width < 10){
                    btn_small.onclick = null;
                }
            },13);
        }
    }
</script>
<style>
    #pic{
        width: 20%;
    }
</style>
<body>
    <div id="pic" style="width: 20%">
        <img src="3.pic.jpg" style="width:100%;">
    </div>
 
    <div class="scale">
        <button id="big">放大</button> <button id="small">缩小</button>
    </div>
</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　图片　

同语言下

可能有用的

小天贡献的其它代码(12)