点击小图切换背景图片加雪花特效js代码

最新推荐文章于 2024-07-18 14:14:43 发布

羊咩咩和喵呜

最新推荐文章于 2024-07-18 14:14:43 发布

阅读量539

点赞数

分类专栏： HTML js CSS 文章标签： html5 js css

本文链接：https://blog.csdn.net/qq_42853707/article/details/84573847

版权

CSS 同时被 3 个专栏收录

11 篇文章 1 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

tab的切换

利用js的点击事件从而做到：点击小图切换背景大图
之后利用js写出雪花特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击小图切换背景大图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-image: url("img/18-05-27-1.jpg");
            position: relative;
        }
        #mask {
            background-color: rgba(255,255,255,0.3);
            /*height: 200px;*/
            text-align: center;

        }
        #mask img {
            width: 250px;
            height: 180px;
            cursor: pointer;
        }
        .masthead {
            display:block;
            width:100%;
            height:500px;
            position: absolute;
        }
    </style>
</head>
<body id="bd">
<div id="mask">
    <img src="img/17-12-30-1.jpg" alt="">
    <img src="img/17-12-31-2.jpg" alt="">
    <img src="img/18-05-27-1.jpg" alt="">
</div>
<p class="masthead"></p>
<script src="common.js"></script>

<script>
    //雪花特效代码
    (function () {
        var COUNT = 800;//屏幕中出现的小雪花的个数
        var masthead = document.querySelector('.masthead');//
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');//平面
        var width = masthead.clientWidth;//设置雪花范围宽
        var height = masthead.clientHeight;//设置雪花范围高
        var i = 0;
        var active = false;
        function onResize() {
            width = masthead.clientWidth;
            height = masthead.clientHeight;
            canvas.width = width;
            canvas.height = height;
            ctx.fillStyle = '#FFF';//白色的小雪花
            var wasActive = active;
            active = width > 600;//宽度最小为600px，小于600px特效消失
            if (!wasActive && active)
                requestAnimFrame(update);
        }
        var Snowflake = function () {//定义小雪花的位置
            this.x = 0;
            this.y = 0;
            this.vy = 0;
            this.vx = 0;
            this.r = 0;
            this.reset();
        };
        Snowflake.prototype.reset = function() {//定义小雪花的属性
            this.x = Math.random() * width;
            this.y = Math.random() * -height;
            this.vy = 1 + Math.random() * 3;//飘落的角度
            this.vx = 0.5 - Math.random();
            this.r = 1 + Math.random() * 2;//小雪花的大小
            this.o = 0.5 + Math.random() * 0.5;
        };
        canvas.style.position = 'absolute';//小雪花的位置是绝对
        canvas.style.left = canvas.style.top = '0';
        var snowflakes = [], snowflake;
        for (i = 0; i < COUNT; i++) {
            snowflake = new Snowflake();
            snowflakes.push(snowflake);
        }
        function update() {//宽度变小
            ctx.clearRect(0, 0, width, height);
            if (!active)
                return
            for (i = 0; i < COUNT; i++) {//使每一个小雪花重新飘落
                snowflake = snowflakes[i];
                snowflake.y += snowflake.vy;
                snowflake.x += snowflake.vx
                ctx.globalAlpha = snowflake.o;
                ctx.beginPath();
                ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();
                if (snowflake.y > height) {
                    snowflake.reset();
                }
            }
            requestAnimFrame(update);
        }
        // shim layer with setTimeout fallback
        window.requestAnimFrame = (function(){
            return window.requestAnimationFrame    ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame  ||
                function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
        onResize();
        window.addEventListener('resize', onResize, false);
        masthead.appendChild(canvas);
    })();
</script>
<script>//点击切换背景图片
    var imgObjs=my$("mask").children;//获取所有的子元素
    for (var i=0;i<imgObjs.length;i++){
        imgObjs[i].onclick=function () {
            document.body.style.backgroundImage="url("+this.src+")"
        };
    }
</script>
</body>
</html>