用 TypeScript + Vue.js 打造一个渐现 Banner 组件

渐现 Banner,也是轮播图的一种。现在我们用 Vue.js 组件封装它,而且是 TypeScript 语法的。本组件不依赖其他库或者函数。

用法如下:

<html>
	<head>
		<meta charset="utf-8" />
		<title>DEMO</title>
		<style type="text/css">
			/* AJAXJS Base CSS */
			body,dl,dt,dd,ul,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h5{margin:0;padding:0;}
			h1,h2,h3,h4,h5{font-weight: normal;}img{border:0;}ul li{list-style-type:none}.hide{display:none}
			body {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;
				font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;}
			a{text-decoration:none;color:#666;transition:color .4s ease-in-out;}
			a:hover{color:#000;}
			button{border:none;outline:0;cursor:pointer;letter-spacing:2px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}
			input[type=password],input[type=text],select,textarea{outline:0;-moz-appearance:none;}
			
			/* 手机端浏览器所显示的网页 CSS */
			@media screen and (max-width:480px) {
				* {
					-webkit-tap-highlight-color: transparent; /* 很多 Android 浏览器的 a 链接有边框,这里取消它  */
					-webkit-touch-callout: none; /* 在 iOS 浏览器里面,假如用户长按 a 标签,都会出现默认的弹出菜单事件 */
					/* -webkit-user-select:none; */
				}
			}	
		</style> 
		<link rel="stylesheet" type="text/css" href="../common/main.css" />
		<script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
		<script src="../../dist/carousel/opacity-banner.js"></script>
	</head>
	<body>
		<div class="opacity-banner">
			<aj-opacity-banner>
				<li>
					<a href="#"> <img src="images/1.jpg" /></a>
				</li>
				<li>
					<a href="#"> <img src="images/2.jpg" /></a>
				</li>
				<li>
					<a href="#"> <img src="images/3.jpg" /></a>
				</li>
			</aj-opacity-banner>
		</div>

		<script type="text/javascript">
			new Vue({
				el: '.opacity-banner'
			});
		</script>
	</body>
</html>

<aj-opacity-banner> 包裹着的是含有图片的 <li></li> 标签。图片是 100% 宽度自适应的,见下面所用到的样式(基于 less.js)

.aj-opacity-banner{
	position: relative;
	
	li{
		position:absolute;
		top:0;
		left:0;
		opacity:0;
		width: 100%;
	}
	
	img{
		width: 100%;
	}
}

组件的属性如下。

属性 含义 类型 是否必填 默认值
delay 延时 Number n 3000
fps 帧速 Number n 25

用法如下:

<aj-opacity-banner delay="2000">
      ……
</aj-opacity-banner>

TypeScript 源码如下:

/**
 * 渐显 banner
 * 注意:定时器保存在 DOM 元素的属性上,是否会内存泄漏呢?
 */
; (() => {
    interface OpacityBanner extends Vue {
        active: number;

        timer: number;

        delay: number;

        fps: number;

        /**
         * 各帧
         */
        list: NodeListOf<HTMLLIElement>;

        states: [];

        /**
        * 内容淡出 
        */
        clear(): void;

        animate(params: number): void;

        run(): void;
    }

    Vue.component('aj-opacity-banner', {
        template: '<ul class="aj-opacity-banner"><slot></slot></ul>',
        props: {
            delay: { default: 3000 },   // 延时
            fps: { default: 25 }        // 帧速
        },
        data() {
            return {
                active: 0,  // 当前索引
            }
        },
        mounted(this: OpacityBanner): void {
            this.list = this.$el.querySelectorAll('li');
            this.list[0].style.opacity = "1";
            console.log(this.list.length);
            this.run();
        },
        methods: {
            /**
             * 播放动画
             * 
             * @param this 
             */
            run(this: OpacityBanner): void {
                this.timer = window.setInterval(() => {
                    var active: number = this.active;
                    this.clear();
                    active += 1;
                    this.active = active % this.list.length;
                    this.animate(100);
                }, this.delay);
            },

            /**
             * 下一帧
             * 
             * @param this 
             */
            per(this: OpacityBanner): void {
                var active = this.active;
                this.clear();
                active -= 1;
                active = active % this.list.length;

                if (active < 0)
                    active = this.list.length - 1;

                this.active = active;
                this.animate(100);
            },

            /**
             * 内容淡出 
             */
            clear(this: OpacityBanner): void {
                this.animate(0);
            },

            /**
             * 
             * @param this 
             * @param params 
             */
            animate(this: OpacityBanner, params: number): void {
                var el: HTMLLIElement = this.list[this.active], fps: number = 1000 / this.fps;
                window.clearTimeout(el.timer);

                window.setTimeout(function loop() {
                    var i: number = getOpacity(el);
                    var speed: number = (params - i) / 8, speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    // console.log("i=" + i + "; speed="+ speed+"; s="+s+"; k="+k);
                    i += speed;
                    el.style.opacity = String(i / 100);

                    window.clearTimeout(el.timer);
                    // params.complete && params.complete.call(elem);

                    el.timer = window.setTimeout(loop, fps);
                }, fps);
            }
        }
    });

    /**
     * 获取元首的透明度
     * 
     * @param el 
     */
    function getOpacity(el: Element): number {
        var v: number = Number(getComputedStyle(el)["opacity"]);
        v *= 100;

        return parseFloat(v + "") || 0;
    }
})();

原理上讲,就是为每张图片准备好定时器 timer,使其控制图片的透明度。当图片从透明度 0 到 100,就是渐现的过程;与此同时,另外一张图片由透明度 100 下降到 0。这两个过程是同时发生的,一个渐现一个渐隐,便会造成如此的目标效果。

上一篇:基于STM32多通道触摸手机远程监控系统设计-毕业设计


下一篇:javascript9分享到菜单,菜单在屏幕左侧的移出和收回