帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 千字文旋转动效
千字文旋转动效
浏览:887次
-
评论:0次
-
发布时间:2017-11-08
Html
Css
Js
body { background-color:red; color:#000; } h4 { font-family:sans-serif; color:red; font-size:16px; } h3 { font-family:sans-serif; color:red; } p { font-family:sans-serif; color:red; font-size:14px; } a { font-family:sans-serif; color:red; text-decoration:none; } .demo { width:500px; background:red; }
window.addEventListener("load", windowLoadHandler, false); var sphereRad = 280; var radius_sp = 1; var opt_display_dots = false; var unicodeFlakes = ['天', '地', '玄', '黄', '宇', '宙', '洪', '荒', '日', '月', '盈', '昃', '辰', '宿', '列', '张', '寒', '来', '暑', '往', '秋', '收', '冬', '藏', '闰', '余', '成', '岁', '律', '吕', '调', '阳', '云', '腾', '致', '雨', '露', '结', '为', '霜', '金', '生', '丽', '水', '玉', '出', '昆', '冈', '剑', '号', '巨', '阙', '珠', '称', '夜', '光', '果', '珍', '李', '柰', '菜', '重', '芥', '姜', '海', '咸', '河', '淡', '鳞', '潜', '羽', '翔', '龙', '师', '火', '帝', '鸟', '官', '人', '皇', '始', '制', '文', '字', '乃', '服', '衣', '裳', '推', '位', '让', '国', '有', '虞', '陶', '唐', '吊', '民', '伐', '罪', '周', '发', '殷', '汤', '坐', '朝', '问', '道', '垂', '拱', '平', '章', '爱', '育', '黎', '首', '臣', '伏', '戎', '羌', '遐', '迩', '一', '体', '率', '宾', '归', '王', '鸣', '凤', '在', '竹', '白', '驹', '食', '场', '化', '被', '草', '木', '赖', '及', '万', '方', '盖', '此', '身', '发', '四', '大', '五', '常', '恭', '惟', '鞠', '养', '岂', '敢', '毁', '伤', '女', '慕', '贞', '洁', '男', '效', '才', '良', '知', '过', '必', '改', '得', '能', '莫', '忘', '罔', '谈', '彼', '短', '靡', '恃', '己', '长', '信', '使', '可', '覆', '器', '欲', '难', '量', '墨', '悲', '丝', '染', '诗', '赞', '羔', '羊', '景', '行', '维', '贤', '克', '念', '作', '圣', '德', '建', '名', '立', '形', '端', '表', '正', '空', '谷', '传', '声', '虚', '堂', '习', '听', '祸', '因', '恶', '积', '福', '缘', '善', '庆', '尺', '璧', '非', '宝', '寸', '阴', '是', '竞', '资', '父', '事', '君', '曰', '严', '与', '敬', '孝', '当', '竭', '力', '忠', '则', '尽', '命', '临', '深', '履', '薄', '夙', '兴', '温', '?', '似', '兰', '斯', '馨', '如', '松', '之', '盛', '川', '流', '不', '息', '渊', '澄', '取', '映', '容', '止', '若', '思', '言', '辞', '安', '定', '笃', '初', '诚', '美', '慎', '终', '宜', '令', '荣', '业', '所', '基', '籍', '甚', '无', '竟', '学', '优', '登', '仕', '摄', '职', '从', '政', '存', '以', '甘', '棠', '去', '而', '益', '咏', '乐', '殊', '贵', '贱', '礼', '别', '尊', '卑', '上', '和', '下', '睦', '夫', '唱', '妇', '随', '外', '受', '傅', '训', '入', '奉', '母', '仪', '诸', '姑', '伯', '叔', '犹', '子', '比', '儿', '孔', '怀', '兄', '弟', '同', '气', '连', '枝', '交', '友', '投', '分', '切', '磨', '箴', '规', '仁', '慈', '隐', '恻', '造', '次', '弗', '离', '节', '义', '廉', '退', '颠', '沛', '匪', '亏', '性', '静', '情', '逸', '心', '动', '神', '疲', '守', '真', '志', '满', '逐', '物', '意', '移', '坚', '持', '雅', '操', '好', '爵', '自', '縻', '都', '邑', '华', '夏', '东', '西', '二', '京', '背', '邙', '面', '洛', '浮', '渭', '据', '泾', '宫', '殿', '盘', '郁', '楼', '观', '飞', '惊', '图', '写', '禽', '兽', '画', '彩', '仙', '灵', '丙', '舍', '旁', '启', '甲', '帐', '对', '楹', '肆', '筵', '设', '席', '鼓', '瑟', '吹', '笙', '升', '阶', '纳', '陛', '弁', '转', '疑', '星', '右', '通', '广', '内', '左', '达', '承', '明', '既', '集', '坟', '典', '亦', '聚', '群', '英', '杜', '稿', '钟', '隶', '漆', '书', '壁', '经', '府', '罗', '将', '相', '路', '侠', '槐', '卿', '户', '封', '八', '县', '家', '给', '千', '兵', '高', '冠', '陪', '辇', '驱', '毂', '振', '缨', '世', '禄', '侈', '富', '车', '驾', '肥', '轻', '策', '功', '茂', '实', '勒', '碑', '刻', '铭', '盘', '溪', '伊', '尹', '佐', '时', '阿', '衡', '奄', '宅', '曲', '阜', '微', '旦', '孰', '营', '桓', '公', '匡', '合', '济', '弱', '扶', '倾', '绮', '回', '汉', '惠', '说', '感', '武', '丁', '俊', '义', '密', '勿', '多', '士', '实', '宁', '晋', '楚', '更', '霸', '赵', '魏', '困', '横', '假', '途', '灭', '虢', '践', '土', '会', '盟', '何', '遵', '约', '法', '韩', '弊', '烦', '刑', '起', '翦', '颇', '牧', '用', '军', '最', '精', '宣', '威', '沙', '漠', '驰', '誉', '丹', '青', '九', '州', '禹', '迹', '百', '郡', '秦', '并', '岳', '宗', '泰', '岱', '禅', '主', '云', '亭', '雁', '门', '紫', '塞', '鸡', '田', '赤', '诚', '昆', '池', '碣', '石', '钜', '野', '洞', '庭', '旷', '远', '绵', '邈', '岩', '岫', '杳', '冥', '治', '本', '于', '农', '务', '兹', '稼', '穑', '?', '载', '南', '亩', '我', '艺', '黍', '稷', '税', '熟', '贡', '新', '劝', '赏', '黜', '陟', '孟', '轲', '敦', '素', '史', '鱼', '秉', '直', '庶', '几', '中', '庸', '劳', '谦', '谨', '敕', '聆', '音', '察', '理', '鉴', '貌', '辨', '色', '贻', '厥', '嘉', '猷', '勉', '其', '祗', '植', '省', '躬', '讥', '诫', '宠', '增', '抗', '极', '殆', '辱', '近', '耻', '林', '皋', '幸', '即', '两', '疏', '见', '机', '解', '组', '谁', '逼', '索', '居', '闲', '处', '沉', '默', '寂', '寥', '求', '古', '寻', '论', '散', '虑', '逍', '遥', '欣', '奏', '累', '遣', '戚', '谢', '欢', '招', '渠', '荷', '的', '历', '园', '莽', '抽', '条', '枇', '杷', '晚', '翠', '梧', '桐', '蚤', '凋', '陈', '根', '委', '翳', '落', '叶', '飘', '摇', '游', '?', '独', '运', '凌', '摩', '绛', '霄', '耽', '读', '玩', '市', '寓', '目', '囊', '箱', '易', '?', '攸', '畏', '属', '耳', '垣', '墙', '具', '膳', '餐', '饭', '适', '口', '充', '肠', '饱', '饫', '烹', '宰', '饥', '厌', '糟', '糠', '亲', '戚', '故', '旧', '老', '少', '异', '粮', '妾', '御', '绩', '纺', '侍', '巾', '帷', '房', '纨', '扇', '圆', '洁', '银', '烛', '炜', '煌', '昼', '眠', '夕', '寐', '蓝', '笋', '象', '床', '弦', '歌', '酒', '宴', '接', '杯', '举', '殇', '矫', '手', '顿', '足', '悦', '豫', '且', '康', '嫡', '后', '嗣', '续', '祭', '祀', '?', '尝', '稽', '颡', '再', '拜', '悚', '惧', '恐', '惶', '笺', '牒', '简', '要', '顾', '答', '审', '详', '骸', '垢', '想', '浴', '执', '热', '愿', '凉', '驴', '骡', '犊', '特', '骇', '跃', '超', '骧', '诛', '斩', '贼', '盗', '捕', '获', '叛', '亡', '布', '射', '僚', '丸', '嵇', '琴', '阮', '箫', '恬', '笔', '伦', '纸', '钧', '巧', '任', '钓', '释', '纷', '利', '俗', '并', '皆', '佳', '妙', '毛', '施', '淑', '姿', '工', '颦', '妍', '笑', '年', '矢', '每', '催', '曦', '晖', '朗', '曜', '璇', '玑', '悬', '斡', '晦', '魄', '环', '照', '指', '薪', '修', '祜', '永', '绥', '吉', '劭', '矩', '步', '引', '领', '俯', '仰', '廊', '庙', '束', '带', '矜', '庄', '徘', '徊', '瞻', '眺', '孤', '陋', '寡', '闻', '愚', '蒙', '等', '诮', '谓', '语', '助', '者', '焉', '哉', '乎', '也']; //for debug messages var Debugger = function() {}; Debugger.log = function(message) { try { console.log(message); } catch (exception) { return; } } function windowLoadHandler() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function canvasApp() { if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var displayWidth; var displayHeight; var timer; var wait; var count; var numToAddEachFrame; var particleList; var recycleBin; var particleAlpha; var r, g, b; var fLen; var m; var projCenterX; var projCenterY; var zMax; var turnAngle; var turnSpeed; var sphereCenterX, sphereCenterY, sphereCenterZ; var particleRad; var zeroAlphaDepth; var randAccelX, randAccelY, randAccelZ; var gravity; var rgbString; //we are defining a lot of variables used in the screen update functions globally so that they don't have to be redefined every frame. var p; var outsideTest; var nextParticle; var sinAngle; var cosAngle; var rotX, rotZ; var depthAlphaFactor; var i; var theta, phi; var x0, y0, z0; init(); // INITIALLI function init() { wait = 1; count = wait - 1; numToAddEachFrame = 4; //particle color r = 70; g = 255; b = 140; rgbString = "rgba(" + r + "," + g + "," + b + ","; //partial string for color which will be completed by appending alpha value. particleAlpha = 1; //maximum alpha displayWidth = theCanvas.width; displayHeight = theCanvas.height; fLen = 320; //represents the distance from the viewer to z=0 depth. //projection center coordinates sets location of origin projCenterX = displayWidth / 2; projCenterY = displayHeight / 2; //we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer). zMax = fLen - 2; particleList = {}; recycleBin = {}; //random acceleration factors - causes some random motion randAccelX = 0.1; randAccelY = 0.1; randAccelZ = 0.1; gravity = -0; //try changing to a positive number (not too large,for example 0.3),or negative for floating upwards. particleRad = 2.5; sphereCenterX = 0; sphereCenterY = 0; sphereCenterZ = -3 - sphereRad; //alpha values will lessen as particles move further back,causing depth-based darkening: zeroAlphaDepth = -750; turnSpeed = 2 * Math.PI / 1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames). turnAngle = 0; //initial angle timer = setInterval(onTimer, 10 / 24); } function onTimer() { //if enough time has elapsed,we will add new particles. count++; if (count >= wait) { count = 0; for (i = 0; i < numToAddEachFrame; i++) { theta = Math.random() * 2 * Math.PI; phi = Math.acos(Math.random() * 2 - 1); x0 = sphereRad * Math.sin(phi) * Math.cos(theta); y0 = sphereRad * Math.sin(phi) * Math.sin(theta); z0 = sphereRad * Math.cos(phi); //We use the addParticle function to add a new particle. The parameters set the position and velocity components. //Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after //it becomes unstuck). var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002 * x0, 0.002 * y0, 0.002 * z0); //we set some "envelope" parameters which will control the evolving alpha of the particles. p.attack = 50; p.hold = 50; p.decay = 100; p.initValue = 0; p.holdValue = particleAlpha; p.lastValue = 0; //the particle will be stuck in one place until this time has elapsed: p.stuckTime = 90 + Math.random() * 20; p.accelX = 0; p.accelY = gravity; p.accelZ = 0; } } //update viewing angle turnAngle = (turnAngle + turnSpeed) % (2 * Math.PI); sinAngle = Math.sin(turnAngle); cosAngle = Math.cos(turnAngle); //background fill context.fillStyle = "#000000"; context.fillRect(0, 0, displayWidth, displayHeight); //update and draw particles p = particleList.first; while (p != null) { //before list is altered record next particle nextParticle = p.next; //update age p.age++; //if the particle is past its "stuck" time,it will begin to move. if (p.age > p.stuckTime) { p.velX += p.accelX + randAccelX * (Math.random() * 2 - 1); p.velY += p.accelY + randAccelY * (Math.random() * 2 - 1); p.velZ += p.accelZ + randAccelZ * (Math.random() * 2 - 1); p.x += p.velX; p.y += p.velY; p.z += p.velZ; } /* We are doing two things here to calculate display coordinates. The whole display is being rotated around a vertical axis,so we first calculate rotated coordinates for x and z (but the y coordinate will not change). Then,we take the new coordinates (rotX,y,rotZ),and project these onto the 2D view plane. */ rotX = cosAngle * p.x + sinAngle * (p.z - sphereCenterZ); rotZ = -sinAngle * p.x + cosAngle * (p.z - sphereCenterZ) + sphereCenterZ; m = radius_sp * fLen / (fLen - rotZ); p.projX = rotX * m + projCenterX; p.projY = p.y * m + projCenterY; //update alpha according to envelope parameters. if (p.age < p.attack + p.hold + p.decay) { if (p.age < p.attack) { p.alpha = (p.holdValue - p.initValue) / p.attack * p.age + p.initValue; } else if (p.age < p.attack + p.hold) { p.alpha = p.holdValue; } else if (p.age < p.attack + p.hold + p.decay) { p.alpha = (p.lastValue - p.holdValue) / p.decay * (p.age - p.attack - p.hold) + p.holdValue; } } else { p.dead = true; } //see if the particle is still within the viewable range. if ((p.projX > displayWidth) || (p.projX < 0) || (p.projY < 0) || (p.projY > displayHeight) || (rotZ > zMax)) { outsideTest = true; } else { outsideTest = false; } if (outsideTest || p.dead) { recycle(p); } else { //depth-dependent darkening depthAlphaFactor = (1 - rotZ / zeroAlphaDepth); depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor < 0) ? 0 : depthAlphaFactor); context.fillStyle = rgbString + depthAlphaFactor * p.alpha + ")"; /*ADD TEXT function!*/ /*ADD TEXT function!*/ /*ADD TEXT function!*/ /*ADD TEXT function!*/ context.fillText(p.flake, p.projX, p.projY); /*ADD TEXT function!*/ /*ADD TEXT function!*/ /*ADD TEXT function!*/ /*ADD TEXT function!*/ //draw context.beginPath(); if (opt_display_dots) { context.arc(p.projX, p.projY, m * particleRad, 0, 2 * Math.PI, false); } context.closePath(); context.fill(); } p = nextParticle; } } function addParticle(x0, y0, z0, vx0, vy0, vz0) { var newParticle; var color; //check recycle bin for available drop: if (recycleBin.first != null) { newParticle = recycleBin.first; //remove from bin if (newParticle.next != null) { recycleBin.first = newParticle.next; newParticle.next.prev = null; } else { recycleBin.first = null; } } //if the recycle bin is empty,create a new particle (a new ampty object): else { newParticle = {}; } //add to beginning of particle list if (particleList.first == null) { particleList.first = newParticle; newParticle.prev = null; newParticle.next = null; } else { newParticle.next = particleList.first; particleList.first.prev = newParticle; particleList.first = newParticle; newParticle.prev = null; } //initialize newParticle.x = x0; newParticle.y = y0; newParticle.z = z0; newParticle.velX = vx0; newParticle.velY = vy0; newParticle.velZ = vz0; newParticle.age = 0; newParticle.dead = false; newParticle.flake = unicodeFlakes[Math.floor(Math.random() * unicodeFlakes.length)]; if (Math.random() < 0.5) { newParticle.right = true; } else { newParticle.right = false; } return newParticle; } function recycle(p) { //remove from particleList if (particleList.first == p) { if (p.next != null) { p.next.prev = null; particleList.first = p.next; } else { particleList.first = null; } } else { if (p.next == null) { p.prev.next = null; } else { p.prev.next = p.next; p.next.prev = p.prev; } } //add to recycle bin if (recycleBin.first == null) { recycleBin.first = p; p.prev = null; p.next = null; } else { p.next = recycleBin.first; recycleBin.first.prev = p; recycleBin.first = p; p.prev = null; } } } $(function() { $("#demo-range").slider({ range: false, min: 20, max: 500, value: 280, slide: function(event, ui) { console.log(ui.value); sphereRad = ui.value; } }); }); $(function() { $("#demo-test").slider({ range: false, min: 1.0, max: 2.0, value: 1, step: 0.01, slide: function(event, ui) { radius_sp = ui.value; } }); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>千字文旋转动效-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:千字文旋转动态效果
javript数字金额繁体转换
导航栏鼠标悬停css+jQuery
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
887
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值