图片透明渐变效果

搜索

您当前位置：首页 > 文章中心 > SCSCMS

【SCSCMS】

下载

新闻

文章

网站经常会使用到图片渐变效果。

本方法比较简单，主要原理是全部图片叠起来，同时容器里把最后一张图片当成背景图片。因为图片是从最后一张（默认的z-index最高）开始渐变。

当全部完成渐变就看到背景图片，同时立刻恢复所有图片的透明度为可视，这时背景图片就起了关键作用。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Image slide</title>
    <style type="text/css">
        #img_div {
            position: relative;
            width: 478px;
            height: 285px;
            overflow: hidden;
            border: 1px solid #ddd
        }
        #img_div img {
            position: absolute;
            width: 478px;
            height: 285px;
        }
    </style>
    <script type="text/javascript" language="javascript">
        var arr = ["img/p1.jpg", "img/p2.jpg", "img/p3.jpg", "img/p4.jpg"];
        window.onload = function () {
            var id = document.getElementById("img_div");
            id.innerHTML = '<img src="' + arr.join('" alt=""><img src="') + '" alt="">';
            id.style.background = "url('" + arr.pop() + "') no-repeat center";
            var img = id.getElementsByTagName("img"), l = arr.length, n = 100;
            (function () {
                var callee = arguments.callee;
                n--;
                if (n < 0) {
                    l--;
                    n = 100;
                    if (l < 0) {
                        l = arr.length;
                        for (var k = img.length; k--;) {
                            img[k].style.opacity = 1;//还原成不透明
                            img[k].style.filter = "alpha(opacity=100)";
                        }
                    }
                    setTimeout(callee, 3000);//每张图片停留3秒（自己调整）
                } else {
                    setTimeout(callee, 30);//30毫秒改变一下透明度（自己调整）
                }
                img[l].style.opacity = n / 100;
                img[l].style.filter = "alpha(opacity=" + n + ")";
            })();
        }
    </script>
</head>
<body>
<div id="img_div"></div>
</body>
</html>

同时附上jquery写法

var arr = ["img/p1.jpg", "img/p2.jpg", "img/p3.jpg", "img/p4.jpg"];
$(function(){
    var img = $('<img src="' + arr.join('" alt=""><img src="') + '" alt="">').appendTo($("#img_div")
    .css({background:"url('" + arr.pop() + "') no-repeat center"})),l = img.size()-1;
    (function () {
        var callee = arguments.callee;
        img.eq(l).animate({opacity:0},3000,function(){
            l--;
            if(l< 0){
                img.css({opacity:1});
                l = img.size()-1;
            }
            setTimeout(callee,4000);
        });
    })();
});