JQ动态粒子效果

最新推荐文章于 2024-07-08 10:04:44 发布
最新推荐文章于 2024-07-08 10:04:44 发布
阅读量290 收藏
点赞数
文章标签： javascript html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_alin/article/details/131014605
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <!-- 注意：style和script都包含在body内部，否则会导致代码无样式效果以及js事件无法实现 -->
    <body>
        <div id="jsi-particle-container" class="container">
            <!-- 创建画布 -->
            <canvas width="100%" height="100%" style="align:center;"></canvas><!--canvas标签定义图形，必须使用脚本来绘制图形-->
        </div>
        
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden; 
                /*overflow属性指定如果内容溢出一个元素的框，会发生什么  其属性值hidden表示内容会被修建，并且其余内容是不可见的*/
                /* overflow属性值:
                    visible  默认值，内容不会被修剪，会呈现在元素框之外
                    hidden 内容会被修剪，并且其余内容是不可见的
                    scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其他内容
                    auto  若内容被修剪，则浏览器会显示滚动条
                    inherit  规定应该从父元素继承overflow属性的值
                    
                    注意：overflow属性只工作于指定高度的块元素上
                 */
            }
            .container{
                width: 100％;
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: #000000;
            }
        </style>
        
        <script>
            //绘制图形
            var RENDERER = {
                PARTICLE_COUNT : 1000,
                PARTICLE_RADIUS : 1,
                MAX_ROTATION_ANGLE : Math.PI / 60,
                TRANSLATION_COUNT : 10000,
                
                //函数体汇总
                init : function(strategy){
                    this.setParameters(strategy);
                    this.createParticles();
                    this.setupFigure();
                    this.reconstructMethod();
                    this.bindEvent();
                    this.drawFigure();
                },
                //窗口响应事件，图形大小控制
                setParameters : function(strategy){
                    this.$window = $(window);
                    
                    //调用html中的样式
                    this.$container = $('#jsi-particle-container');
                    this.width = this.$container.width();
                    this.height = this.$container.height();
                    
                    this.$canvas = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container);
                    this.context = this.$canvas.get(0).getContext('2d');//2D动画
                    
                    th

最低0.47元/天 解锁文章
s_alin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs + mapboxgl 实现粒子上升效果
jiegiser博客
09-12 2053
前言 这个也是我们实现的第一个特效，粒子上升图层；本例子是基于前面文章搭建的私库进行开发。 在三维渲染中，有可能会遇到需要在地图上展示一个粒子上升的效果来表达出，比较炫酷的效果，比如可以将粒子的图片设计成 xxx 产量，在地图上进行展示； 接下来我们实现一个自己的粒子上升效果； 粒子上升图层开发 新建一个FlyPatrial 图层，代码如下： import { BufferGeometry, Clock, Color, DoubleSide, Float32BufferAttribute, Mesh, S
jq22网站资源分享
热门推荐
11-22 1万+
jq22网站背景粒子效果图地址1 地址：http://www.jq22.com/code682 jq22网站粒子海浪背景 地址：http://www.jq22.com/code2210 jq22网站粒子连线背景效果 地址：http://www.jq22.com/code2555 jq22网站粒子背景动画效果 地址：http://www.jq22.com/code1448 ...
jq实现动态粒子效果
weixin_34004576的博客
06-02 221
在线上看到别人做的动态粒子，哇，太炫了，我也来试一试。 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动态粒子效果</title> <style>html,body { width: 100%; height: 100%; ...
jQuery 动态粒子效果
jack_rose_me的博客
10-13 540
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <style> html,body{ width:100%; height:100%; margin:0; padding:0; overflow:hidden; } .container{ width:100％; height:100%; ...
jQuery动态粒子效果
Code Writers
07-26 74
【代码】jQuery动态粒子效果。
jQuery 实现动态粒子特效，太美了！！！
爪白白的个人博客
07-31 5811
啥也不说了，先上图 太美了，有没有！！ //html <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <div id="jsi-particle-container" class="container"></div> //css ...
Jquery实现简单的粒子效果
weixin_42362393的博客
03-07 556
——Jquery实现简单的五彩纸屑效果 废话不多说，直接贴代码 body部分只用定义一个简单的div &amp;amp;lt;div class=&amp;quot;textcontainer&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&amp;quot;particletext confetti&amp;quot;&amp;amp;gt;Confetti&amp;amp;l
html5超炫酷粒子效果,HTML5超炫酷粒子效果的进度条的实现示例
weixin_36330387的博客
06-03 659
分享几种极具创意的HTML5/CSS3进度条特效20% 40% 60% 80% 100% 从HTML结构中我们可以看出，类名为progress的div是整个进度条的父容器，里面的span则是当前进度，通过width来定义不同的进度值，同时定义不同的颜色类，比如orange，以便待会在CSS中进行样式渲染。 CSS代码： .progress {首先，我们制作的这个进度条并没有后台数据作为支撑，所以是...
Jquery-canvas动态粒子背景动画-适用于登陆注册页面背景
weixin_42566336的博客
09-05 711
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>粒子动画背景</title> <link rel="stylesheet" media="screen" href="css/css.css"> </head> <body> <div id="particles-js">
jQuery 动态粒子效果示例代码
11-19
效果图 1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy...
jQuery粒子特效特效代码
03-20
jQuery粒子特效是一种常见的网页动态效果，它通过JavaScript库jQuery实现，为用户界面添加视觉吸引力。在本案例中，我们关注的是一个特别的粒子特效——"粒子星空鼠标移动特效"。这个特效使得网页背景如同星空般闪烁...
【JavaScript源代码】jQuery实现动态粒子效果.docx
12-29
jQuery实现动态粒子效果 　本文实例为大家分享了jQuery实现动态粒子效果的具体代码，供大家参考，具体内容如下　效果图　代码　<!DOCTYPE html>　　<html lang="en">　　 <head>　<meta charset="UTF-8">　...
火圈粒子旋转Canvas特效特效代码
03-20
火圈粒子旋转Canvas特效是一种基于HTML5 Canvas技术的动态视觉效果，它通过编程方式创造出一种火焰粒子在屏幕上旋转扩散的视觉艺术。Canvas是HTML5的一个重要特性，它允许开发者在网页上绘制图形，实现丰富的交互性...
jq_snowjquery特效背景飘雪
03-26
【jq_snowjquery特效背景飘雪】是一种使用jQuery库实现的网页动态效果，它为网页背景添加了模拟飘雪的视觉效果，增强了用户体验，尤其在冬季或者节日氛围中，这种特效能够营造出温馨浪漫的环境。jQuery是一个轻量级...
基于springboot+vue+uniapp的贵工程寝室快修小程序
老卓爱爪哇 的博客
07-08 953
贵工程寝室快修小程序使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理贵工程寝室快修小程序信息，查看贵工程寝室快修小程序信息，管理贵工程寝室快修小程序。 总之，贵工程寝室快修小程序集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
ES6 新特性有哪些
weixin_64684095的博客
07-06 1270
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
vue-使用Worker实现多标签页共享一个WebSocket
最新发布
qq_43548590的博客
07-08 1085
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 419
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
jq 动态style
02-24
jQuery（简称为jq）是一个快速、简洁的JavaScript，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互等操作。在jQuery中，可以使用动态样式来修改元素的样式。 要使用jQuery来动态修改元素的样式，可以使用`css()`方法。该方法可以接受一个或多个参数，用于设置元素的CSS属性和值。例如，要将一个元素的背景颜色设置为红色，可以使用以下代码： ```javascript $("#elementId").css("background-color", "red"); ``` 上述代码中，`$("#elementId")`表示通过元素的ID选择器获取到对应的元素，然后使用`.css()`方法来设置其背景颜色为红色。 除了单个属性的设置，还可以通过传递一个包含多个属性和值的对象来一次性设置多个样式。例如： ```javascript $("#elementId").css({ "background-color": "red", "font-size": "20px", "color": "blue" }); ``` 上述代码中，通过传递一个包含多个属性和值的对象，可以同时设置背景颜色、字体大小和文字颜色。 另外，还可以使用`.addClass()`和`.removeClass()`方法来添加和移除CSS类，从而改变元素的样式。例如： ```javascript $("#elementId").addClass("highlight"); ``` 上述代码中，`addClass("highlight")`将会给指定的元素添加一个名为"highlight"的CSS类，从而改变元素的样式。 希望以上内容能够帮助到你！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值