JS写下雨特效，樱花落特效，滑块成功效果

最新推荐文章于 2024-06-25 09:41:51 发布
最新推荐文章于 2024-06-25 09:41:51 发布
阅读量2.2k 收藏 21
点赞数 7
分类专栏： JavaScript 文章标签： javascript css html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/124634676
版权

一、下雨特效

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下雨特效</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #rainBox{
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgb(71, 78, 77);
            /* 不阻挡其他元素事件触发 */
            pointer-events: none;
        }
        .rain{
            position: absolute;
            width: 2px;
            height: 50px;
            background: linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.6));
        }
     
    </style>
</head>
 
<body>
    <div id="rainBox"></div>
    <script>
        const box=document.getElementById('rainBox');
        let boxHeight=box.clientHeight;
        let boxWidth=box.clientWidth;
        // 页面大小发生变化时，改变盒子大小
        window.onresize=function(){
            boxHeight=box.clientHeight;
            boxWidth=box.clientWidth;
        }
        // 每隔一段时间,添加雨滴
        setInterval(()=>{
        const rain=document.createElement('div');
        rain.classList.add('rain');
        rain.style.top=0;
        // 随机刷新雨点位置
        rain.style.left=Math.random()*boxWidth+'px';
        // 随机雨点透明度
        rain.style.opacity=Math.random();
        box.appendChild(rain);
        // 每隔一段时间,雨水下落
        let race=1;
        const timer=setInterval(()=>{
            if(parseInt(rain.style.top)>boxHeight){
                clearInterval(timer);
                box.removeChild(rain);
            }
            race++;
            rain.style.top=parseInt(rain.style.top)+race+'px'
        },20)
       },50)
    </script>
</body>
 
</html>

二、滑块成功

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://cloud.tencent.com/developer/article/1695880?from=15425</title>
    <script>
        (function () {
            var root = (typeof self == 'object' && self.self == self && self) ||
                (typeof global == 'object' && global.global == global && global) ||
                this || {};
            var util = {
                extend: function (target) {
                    for (var i = 1, len = arguments.length; i < len; i++) {
                        for (var prop in arguments[i]) {
                            if (arguments[i].hasOwnProperty(prop)) {
                                target[prop] = arguments[i][prop]
                            }
                        }
                    }
                    return target
                },
                setClassName(selector, className) {
                    selector.className = className;
                },
                addClass(selector, className) {
                    selector.classList.add(className);
                },
                setInlineStyle(selector, attr, content) {
                    let length = selector.length;
                    for (let i = 0; i < length; i++) {
                        selector[i].style[attr] = content;
                    }
                },
                isValidListener: function (listener) {
                    if (typeof listener === 'function') {
                        return true
                    } else if (listener && typeof listener === 'object') {
                        return util.isValidListener(listener.listener)
                    } else {
                        return false
                    }
                },
                addCSS: function (cssText) {
                    var style = document.createElement('style'),  //创建一个style元素
                        head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
                    style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
                    if (style.styleSheet) { //IE
                        var func = function () {
                            try { //防止IE中stylesheet数量超过限制而发生错误
                                style.styleSheet.cssText = cssText;
                            } catch (e) {

                            }
                        }
                        //如果当前styleSheet还不能用，则放到异步中则行
                        if (style.styleSheet.disabled) {
                            setTimeout(func, 10);
                        } else {
                            func();
                        }
                    } else { //w3c
                        //w3c浏览器中只要创建文本节点插入到style元素中就行了
                        var textNode = document.createTextNode(cssText);
                        style.appendChild(textNode);
                    }
                    head.appendChild(style); //把创建的style元素插入到head中
                },
                indexOf: function (array, item) {
                    if (array.indexOf) {
                        return array.indexOf(item);
                    } else {
                        var result = -1;
                        for (var i = 0, len = array.length; i < len; i++) {
                            if (array[i] === item) {
                                result = i;
                                break;
                            }
                        }
                        return result;
                    }
                }
            }

            function EventEmitter() {
                this._events = {}
            }

            EventEmitter.prototype.on = function (eventName, listener) {
                if (!eventName || !listener) return;

                if (!util.isValidListener(listener)) {
                    throw new TypeError('listener must be a function');
                }

                var events = this._events;
                var listeners = events[eventName] = events[eventName] || [];
                var listenerIsWrapped = typeof listener === 'object';

                // 不重复添加事件
                if (util.indexOf(listeners, listener) === -1) {
                    listeners.push(listenerIsWrapped ? listener : {
                        listener: listener,
                        once: false
                    });
                }

                return this;
            };
            EventEmitter.prototype.once = function (eventName, listener) {
                return this.on(eventName, {
                    listener: listener,
                    once: true
                })
            };
            EventEmitter.prototype.off = function (eventName, listener) {
                var listeners = this._events[eventName];
                if (!listeners) return;

                var index;
                for (var i = 0, len = listeners.length; i < len; i++) {
                    if (listeners[i] && listeners[i].listener === listener) {
                        index = i;
                        break;
                    }
                }

                if (typeof index !== 'undefined') {
                    listeners.splice(index, 1, null)
                }

                return this;
            };
            EventEmitter.prototype.emit = function (eventName, args) {
                var listeners = this._events[eventName];
                if (!listeners) return;

                for (var i = 0; i < listeners.length; i++) {
                    var listener = listeners[i];
                    if (listener) {
                        listener.listener.apply(this, args || []);
                        if (listener.once) {
                            this.off(eventName, listener.listener)
                        }
                    }
                }
                return this;
            };

            function SliderTools(options) {
                this.options = util.extend({}, this.constructor.defaultOptions, options)
                this.init();
                this.bindEvents();
                this.diffX = 0;
                this.flag = false;
            }

            SliderTools.VERSION = '1.0.0';

            SliderTools.defaultOptions = {
                el: document.body
            };

            var proto = SliderTools.prototype = new EventEmitter();

            proto.constructor = SliderTools;

            proto.init = function () {
                this.createSlider();
                this.getElements();
            }

            proto.createSlider = function () {
                this.options.el.innerHTML = '<div id="slider"><div class="drag_bg"></div><div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div><div class="handler handler_bg"></div></div>';
                util.addCSS('ul, li {    list-style: none;    }    a {    text-decoration: none;    }    .wrap {    width: 300px;    height: 350px;    text-align: center;    margin: 150px auto;    }    .inner {    padding: 15px;    }    .clearfix {    overflow: hidden;    _zoom: 1;    }    .none {    display: none;    }    #slider {    position: relative;    background-color: #e8e8e8;    width: 300px;    height: 34px;    line-height: 34px;    text-align: center;    }    #slider .handler {    position: absolute;    top: 0px;    left: 0px;    width: 40px;    height: 32px;    border: 1px solid #ccc;    cursor: move;}    .handler_bg {    background: #fff    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKy
最低0.47元/天 解锁文章
琪公子呀
关注
专栏目录
用javascript实现在HTML网页上添加樱花雨3D相册
日常笔记/总结/系列知识梳理
01-30 3852
JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展成为一种功能强大且广泛使用的语言。CSS与HTML结合使用，用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。JavaScript是一种功能强大且灵活的编程语言，用于为网页添加交互和动态性，并且已经成为Web开发的基础之一。这只是HTML的一些基本概念，HTML有很多其他的标签和功能，可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念，CSS还有更多的属性和功能，可以根据需要进一步学习和掌握。
javascript实现下雨效果
10-20
本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
**探索樱花飘落的魔法 - Sakura.js**
最新发布
gitblog_00023的博客
06-25 356
探索樱花飘落的魔法 - Sakura.js sakura???? A javascript plugin to Make it rain sakura petals using CSS animations and requestAnimationFrame (vanilla JS and improved version of jQuery-Sakura).项目地址:https://gitcode....
js模拟下雨js特效代码
ICode联盟
08-22 214
js模拟下雨特效代码，雨水落地激起水花。
JS特效
weixin_45722135的博客
08-24 344
一：DOM 《1文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。 《2 DOM又称文档树模型。 《3 DOM 常用操作：获取文档元素；对文档元素经行增删改查操作；事件操作。 《4 window和document两者， document可以帮助我们拿到页面里面任何东西，比如它的常用属性： console.log(document===window.document); console.log(document); // console.log(doc...
HTML+JS樱花飘落特效+鼠标点击特效（源码）
03-27
1. **定时器（setTimeout或setInterval）**：JavaScript可以使用定时器函数来周期性地执行某个函数，模拟樱花持续飘落的效果。 2. **CSS操作**：JavaScript可以动态改变HTML元素的CSS属性，例如更改樱花图片的位置、...
HTML5樱花飘落背景动画特效
02-27
在这个特效中，`<canvas>`元素作为樱花飘落的舞台，通过JavaScript控制每一朵樱花的运动轨迹和速度，模拟出自然飘落的效果。 CSS3则用来处理页面布局和样式，例如设置背景颜色、透明度等，使樱花飘落的背景更为和谐...
HTML5樱花掉落背景动画特效
04-25
总的来说，HTML5樱花掉落背景动画特效结合了HTML5的`<canvas>`元素、JavaScript的动态控制和颜色设计，提供了一种优雅的网页美化方案。通过学习并实践这样的例子，开发者可以提升自己在HTML5动态效果制作方面的技能...
网页特效代码：樱花飘落、下雪、花瓣飞舞等
02-13
本主题聚焦于"樱花飘落"、"下雪"和"花瓣飞舞"等特效，这些都是通过JavaScript、CSS或者HTML5技术实现的动态视觉效果。 首先，我们要了解JavaScript在这些特效中的作用。JavaScript是一种强大的客户端脚本语言，常...
JS特效合集
09-11
超全的JS特效合集 例如：jTip的jQuery的工具提示、JTree2.0 目录树_、Lightbox JS V2.0代码、Mini Tabbed Pages雅虎TAB效、MSN频道4屏新闻广告效果、MSN左上角flash伸缩广告
JS实现特效JS实现特效
05-18
JS实现波浪文字特效 - JS实现特效 - JS特效代码网 网页特效代码应有尽有！.
Rainyday.js – 傻眼了！竟然有如此逼真的雨滴效果
10-30
Rainyday.js – 傻眼了！竟然有如此逼真的雨滴效果
js动态特效：雨滴效果
05-29
动态雨滴效果，滑过玻璃的效果，可以有多种背景效果。
js的特效
m0_46420078的博客
12-01 1771
一、js的特效 1、offsset：偏移量，通过offset的属性可以动态的获得元素的大小、位置 offsetLeft：相对于父元素左边框的偏移量 offsetTop：相对于父元素上边框的偏移量 offsetWidth：返回元素自身的宽度（padding、边框、内容区域)，不带单位 offsetHeight：返回元素自身的高度（padding、边框、内容区域)，不带单位 offsetParent：返回元素的父元素 ...
JavaScript下雨效果
m0_58889266的博客
12-02 750
以下是HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> <script src="下雨.js"></script> </head> <body> &lt.
樱花雨html,樱花雨
weixin_42356378的博客
06-16 959
又是樱花盛开的季节，我在等风，风是否也在等我?我听说樱花本来只有白色，而那些壮志未酬的武士选择在他们喜爱的樱花树下了结自己的生命，鲜红的血缓缓的渗进泥土里，把樱花的花瓣渐渐染成了红色，樱花的花瓣越红，说明树下的亡魂就越多。校园这棵桃红色的樱花树下会是哪个武士的亡魂呢?我喜欢松隆子的那首《何时会有樱花雨》，那就是一首纪念某个武士的歌曲吧，我熟记的歌词：春光拥抱我独自一人隐隐啜泣没有一句告别的话不知怎...
python写一个樱花特效程序
05-27
以下是一个使用 Python 和 Pygame 库实现樱花特效的示例程序： ```python import pygame import random # 初始化 Pygame 库 pygame.init() # 设置窗口大小和标题 WINDOW_SIZE = (800, 600) screen = pygame....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值