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

图片透明渐变效果

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2014-6-20   阅读次数: 17   查看权限: 游客查看

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

本方法比较简单,主要原理是全部图片叠起来,同时容器里把最后一张图片当成背景图片。因为图片是从最后一张(默认的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);
        });
    })();
});

关键词: jquery,图片动画,图片渐变   编辑时间: 2014-6-20 21:27:20

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程