网页特效源码分析----标签云

喜欢ヅ旅行 2022-07-13 10:17 163阅读 0赞

先看效果：

![这里写图片描述][SouthEast]

静态html部分代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" >
        <title>3D标签云</title>
        <style type="text/css"> .tagBall{ width:500px; height: 500px; margin: 50px auto; position: relative; border: 1px solid red; } .tag{ display:block; position: absolute; left:0; top:0px; color: #000; text-decoration: none; font-size:15px; font-family: "微软雅黑"; font-weight: bold; } .tag:hover{ border:1px solid #666; } </style>
    </head>
    <body>
    
        <div class="tagBall">
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">WAXES</a>
            <a class="tag" href="#">3D标签云</a>
        </div>

接下来是动态js部分：

### 主要分为三个部分： ###

**分别是：**

*  画标签：innit() , tag对象
 *  写标签动画 animate(),rotateX(),rotateY()
 *  标签跟随鼠标移动变化事件 mousemove事件

<script> var canvas = document.getElementById("cas"), ctx = canvas.getContext("2d"), vpx = canvas.width/2, vpy = canvas.height/2, Radius = 150, balls = [], angleX = Math.PI/100, angleY = Math.PI/100; window.addEventListener("mousemove" , function(event){ var x = event.clientX - canvas.offsetLeft - vpx - document.body.scrollLeft - document.documentElement.scrollLeft; var y = event.clientY - canvas.offsetTop - vpy - document.body.scrollTop - document.documentElement.scrollTop; angleY = -x*0.0001; angleX = -y*0.0001; }); var Animation = function(){ this.init(); }; Animation.prototype = { isrunning:false, init:function(){ balls = []; var num = 1000; for(var i=0;i<=num;i++){ var k = -1+(2*(i+1)-1)/num; var a = Math.acos(k); var b = a*Math.sqrt(num*Math.PI); var x = Radius*Math.sin(a)*Math.cos(b); var y = Radius*Math.sin(a)*Math.sin(b); var z = Radius*Math.cos(a); var b = new ball(x , y , z , 1.5); balls.push(b); b.paint(); } }, start:function(){ this.isrunning = true; animate(); }, stop:function(){ this.isrunning = false; } } function animate(){ ctx.clearRect(0,0,canvas.width , canvas.height); rotateX(); rotateY(); balls.sort(function(a , b){ return b.z-a.z; }) for(var i=0;i<balls.length;i++){ balls[i].paint(); } if(animation.isrunning) { if("requestAnimationFrame" in window){ requestAnimationFrame(animate); } else if("webkitRequestAnimationFrame" in window){ webkitRequestAnimationFrame(animate); } else if("msRequestAnimationFrame" in window){ msRequestAnimationFrame(animate); } else if("mozRequestAnimationFrame" in window){ mozRequestAnimationFrame(animate); } } } function rotateX(){ var cos = Math.cos(angleX); var sin = Math.sin(angleX); for(var i=0;i<balls.length;i++){ var y1 = balls[i].y * cos - balls[i].z * sin; var z1 = balls[i].z * cos + balls[i].y * sin; balls[i].y = y1; balls[i].z = z1; } } function rotateY(){ var cos = Math.cos(angleY); var sin = Math.sin(angleY); for(var i=0;i<balls.length;i++){ var x1 = balls[i].x * cos - balls[i].z * sin; var z1 = balls[i].z * cos + balls[i].x * sin; balls[i].x = x1; balls[i].z = z1; } } var ball = function(x , y , z , r){ this.x = x; this.y = y; this.z = z; this.r = r; this.width = 2*r; } ball.prototype = { paint:function(){ var fl = 450 //焦距 ctx.save(); ctx.beginPath(); var scale = fl / (fl - this.z); var alpha = (this.z+Radius)/(2*Radius); ctx.arc(vpx + this.x, vpy + this.y, this.r*scale , 0 , 2*Math.PI , true); ctx.fillStyle = "rgba(255,255,255,"+(alpha+0.5)+")" ctx.fill(); ctx.restore(); } } var animation = new Animation(); animation.start(); document.getElementById("controlBtn").onclick = function(){ this.innerText === "开始" ? this.innerText="停止" : this.innerText="开始"; this.innerText === "开始" ? animation.stop() : animation.start();; } </script>

[SouthEast]: /images/20220713/139ce5cc65224019948f7327a72943ef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关（Spring源码分析）默认标签的解析

上一节[XmlBeanFactory容器分析][XmlBeanFactory]中，在`parseDefaultElement`方法中是对默认的标签进行解析的 * ...

秒速五厘米/ 2024年04月18日 21:18/ 0 赞/ 84 阅读

相关（源码分析）HashSet源码分析

目录 * * 成员变量 * 构造方法 * * HashSet()：无参构造 * HashSet(int ini...

ゞ浴缸里的玫瑰/ 2024年04月17日 18:51/ 0 赞/ 123 阅读

相关（源码分析）StringBuilder源码分析

目录 * * 成员变量 * 构造方法 * * StringBuilder()：无参构造 * StringBui...

川长思鸟来/ 2024年04月17日 18:39/ 0 赞/ 107 阅读

相关（源码分析）StringBuffer源码分析

目录 * * 成员变量 * 构造方法 * * StringBuffer()：无参构造 * StringBuff...

小鱼儿/ 2024年04月17日 18:29/ 0 赞/ 116 阅读

相关表白网页源码

这是一份表白网页的源代码： <html> <head> <title>表白</title> </head> <body>

分手后的思念是犯贱/ 2024年03月26日 08:36/ 0 赞/ 60 阅读

相关手风琴JS特效源码

HTML和CSS部分 <!DOCTYPE html> <head> <meta charset="UTF-8">

妖狐艹你老母/ 2022年08月04日 05:09/ 0 赞/ 137 阅读

相关网页特效源码分析----标签云

先看效果： ![这里写图片描述][SouthEast] 静态html部分代码： <!DOCTYPE html> <html> <head>

喜欢ヅ旅行/ 2022年07月13日 10:17/ 0 赞/ 164 阅读

相关网页特效

告诉你一个应有尽有的网页特效网址：[http://js.alixixi.com][http_js.alixixi.com] [http_js.alixixi.com]: h

雨点打透心脏的1/2处/ 2022年04月22日 09:38/ 0 赞/ 281 阅读

相关 404网页源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

迷南。/ 2022年02月27日 10:22/ 0 赞/ 300 阅读

相关下载网页源码

include "pch.h" include<windows.h> include<Wininet.h> include<

ゝ一世哀愁。/ 2021年11月01日 09:50/ 0 赞/ 429 阅读