技术文章分类(180)

技术随笔(11)

js模糊图渐变至清晰大图,提升用户体验度

 

1、很简单的实现,代码有详细注释。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="http://121.199.20.86/dw/res/js/jquery-1.7.1.min.js"></script>
    <title>title</title>
</head>
<body>
<img src="http://121.199.20.86/dw/file/download/aa200680-6b65-4481-a00b-0dcaee068778.thumbs.png" class="dishImg" id="dishImg"/>
</body>
<style>
   img{width:80%;margin-left:10%;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        setlazyload();
    });
    //模糊图片渐变至清晰大图,提升体验度
    function setlazyload(){
        var img = new Image();
        img.src = "http://121.199.20.86/dw/file/download/aa200680-6b65-4481-a00b-0dcaee068778.png";//大图
        img.onload = function() {
            document.getElementById('dishImg').src = this.src;
        }
    }
</script>
</html>

 

若在你电脑上不能显示该效果,可能是以下两个原因:

1、自己重新导入jquery.js库

2、自己重新导入一大一小两张网络图片,宽高等比例。

 

 

posted @ 2014-04-15 14:54  坤哥MartinLi  阅读(573)  评论(0编辑  收藏  举报