当前位置: 秋叶网络博客
JS全局复制粘贴板的精简兼容实现
作者: 秋了秋 发表时间:2018年10月15日
mysql数据库迁移导入到mongodb详细教程
复制文本框的内容也可以复制其它网页任何地方的文字strong 5.支持跨区域复制,批量复制。strong 6.支持独立复制网页中不存在的文本(纯程序复制)。strong 6.支持svg文本的复制。strong javascript代码: window.copy = { /*JS全局复制粘贴板的精简兼容实现span * by 秋叶博客 http://www.mizuiren.com/498.htmlspan * textContainer参数可以是选择器名称,也可以是文本span * callback是复制后执行的回调处理,可选,默认会弹出复制成功信息span */span text: function(textContainer, callback) { var copyTextArea = document.querySelectorAll(textContai...
目录: 前端编程 标签: 复制粘贴 7条评论 783次阅读
JS给导线描边-非样式属性
作者: 秋了秋 发表时间:2018年07月21日
mysql数据库迁移导入到mongodb详细教程
义,但是在较粗的导线上或者是细的线条放大后,就格外有用途了,比如说用线条给导线挖孔,给导线添加线条轮廓动画等等。 这里用到了一些技术知识点: 1. 三角函数、向量关系,线段关系在javascript中的应用,主要与三角函数为主体;strong 2. svg的属性和操作,当然描边不局限于svg,在任何场景都可以用,本文只是用svg举例;strong 原理开始剖析,供学习的人阅读。(如果你只是想把它应用到你的项目中,你可以跳过原理部分,直接到文尾找完整代码span ) 描边首先是基于坐标点来产生一些相对位置的点来勾勒出线条的走向。所以一条线段肯定有它的路径,比如sv...
目录: 前端编程 标签: JS描边, svg 1条评论 4543次阅读
Javascript给文本段落加上p标签实现换行
作者: 秋了秋 发表时间:2017年08月05日
mysql数据库迁移导入到mongodb详细教程
做了孜孜不倦的字符串算法~,没错,就加一个p标签小小的事情,可是并不简单。它要考虑到各种标签,把它切割重组抛光打蜡,最后给你return一个完美的内容。以下是我把那个php处理函数转成javascript的代码: function autop($pee, $br) { var $pre_tags = {}; var trim = function(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } if ( trim($pee) === '' ){ return ''; } $pee = $pee + "\n"; // just to make things a little easier, pad the end if ($pee.indexOf('<pre') !== -1) { var $pee_parts = $pee.split('</pre>'); var $last_pee...
目录: 前端编程 标签: 内容换行 2条评论 16459次阅读
JavaScript脚本对LRC歌词折叠展开
作者: 秋了秋 发表时间:2017年06月20日
mysql数据库迁移导入到mongodb详细教程
使用场景:不同播放器对lrc歌词格式支持程度不一样,尤其是网页播放器,很多不支持不同时间唱同一句歌词,所有时间会折叠成一行的格式,这种歌词在网上很常见,然而有的时候我们不能使用折叠的歌词,那么我们就要一行一行的去拆开,放到对应的时间线。手动去拆解是一件很麻烦的事情,但我之前一直这么搞。。。现在写了个脚本一劳永逸,不仅能把折叠的歌词展开,还能反过来把展开的歌词折叠起来,还能规范歌词格式。解放了双手,屡试不爽。 在线歌词转换: [ti:深夜地下铁] [ar:陶钰玉] [al:其实我们都寂寞] [by:秋叶博客] [00:00:00]深夜地下铁 [00:04:00]作词、作曲:张超 [00:06:00]演唱:陶钰玉 [00:12:00][01:03:16][01:14:48][02:06:91][02:17:05][03:23:37] [00:13:91]地铁站静悄悄 [00:17:97]心开往下一秒 [00:20:96]你微笑的嘴角 [00:23:97]画出甜蜜符号 [00:27:00]萤火虫在闪耀 [00:30:08]霓虹灯在舞蹈 [00:33:28]想念你转身的味道 [00:38:04][01:39:48][02:19:58][02:44:10]给我一个拥抱 [00:40:84][01:42:36][02:22:59][02:47:16]给我肩膀靠靠 [00:43:92][01:45:39][02:25:65][02:50:23]你真的不需要 [00:47:03][01:48:69][02:28:73][02:53:28]对我那么好 [00:50:29][01:51:78][02:31:82][02:56:38][03:08:72]思念就像毒药 [00:53:14][01:54:83][02:34:88][02:59:46][03:11:76]让人受不了的煎熬 [00:57:03][01:58:75][02:38:69][03:03:28]我会迷恋上瘾赖在你怀抱 [01:05:42][02:08:44]歌词编辑:秋叶 [01:16:29]你的爱戒不掉 [01:19:35]谁都不想打扰 [01:22:54]地下铁的轨道 [01:25:55]孤单单的心跳 [01:28:57]一个人的背包 [01:31:72]装满太多问号 [01:34:83]打开全是我的寂寥 [03:15:56]我会上瘾赖在你怀抱 textarea pre 折叠/展开歌词button (function(){ //把歌词展开 function unfoldLrc(lrc){ var lrcArr = lrc.split("\n"); var lrcHead = []; var lrcContent = []; lrcArr.forEach(function(n,i){ var times = n.match(/\[(.*?)\]/g); if(times){ var leng = times.length; var index = n.indexOf(times[leng-1]) var txt = n.substring(index).split("]")[1]; times.forEach(function(item,index){ var time = item.match(/\[(\d{2}[\:\.]\d{2}[\:\.]\d{2})\]/); if(time){ var hsm = time[1].split(/[\:\.]/); var obj = { time:hsm[0]+hsm[1]+hsm[2], lrc:"["+hsm[0]+":"+hsm[1]+":"+hsm[2]+"]"+txt }; lrcContent.push(obj); }else{ lrcHead.push(n); } }); } }); lrcContent.sort(function(time1,time2){ return (time1.time - time2.time) }); lrcContent.forEach(function(n,i){ lrcContent[i] = n.lrc; }); checkLrcHead(lrcHead); var allLrc = lrcHead.concat(lrcContent); return allLrc.join("\n"); } //处理歌词头部信息,检查完整度,保证歌词标准格式 function checkLrcHead(head){ var obj = {}; head.forEach(function(n,i){ var key = n.match(/\[(\w+)\:/)[1]; var value = n.match(/\:(.*?)\]/)[1]; if(key){ obj[key] = value; } }); var keys = Object.keys(obj); if(keys.indexOf("ti") == -1){ obj["ti"] = "Unknown Song"; } if(keys.indexOf("ar") == -1){ obj["ar"] = "秋叶"; } if(keys.indexOf("al") == -1){ obj["al"] = "戒不掉的心跳"; } if(keys.indexOf("by") == -1){ obj["by"] = "秋叶博客"; } head.length = 0; var sortArr = ["ti","ar","al","by"]; sortArr.forEach(function(n,i){ head.push(["["+n+":"+obj[n]+"]"]); }); return head; } //把歌词折叠 function foldLrc(lrc){ var lrcArr = lrc.split("\n"); var lrcObj = {}; var lrcHead = []; var newLrc = []; lrcArr.forEach(function(n,i){ var times = n.match(/\[(.*?)\]/g); if(times){ var leng = times.length; var index = n.indexOf(times[leng-1]) var txt = n.substring(index).split("]")[1]; times.forEach(function(item,index){ var time = item.match(/\[(\d{2}[\:\.]\d{2}[\:\.]\d{2})\]/); if(time){ var hsm = time[1].split(/[\:\.]/); if(!lrcObj[txt]){ lrcObj[txt] = [time[0]]; }else{ lrcObj[txt].push(time[0]); } }else{ lrcHead.push(n); } }); } }); checkLrcHead(lrcHead); var allLrc = lrcHead.concat(newLrc); for(var i in lrcObj){ allLrc.push(lrcObj[i].join("")+i); } return allLrc.join("\n"); } var count = 0; document.getElementById("transform_lrc").onclick=function(){ var lrcContainer = document.getElementById("my_lrc"); var lrc = lrcContainer.value; if(count%2 !== 0){ lrcContainer.value = foldLrc(lrc); }else{ lrcContainer.value = unfoldLrc(lrc); } count++; }; })(); script 脚本代码: //把歌词展开函数,参数传完整的lrc歌词字符串,需要换行 function unfoldLrc(lrc){ var lrcArr = lrc.split("\n"); var lrcHead = []; var lrcContent = []; lrcArr.forEach(function(n,i){ var times = n.match(/\[(.*?)\]/g); if(times){ var leng = times.length; var index = n.indexOf(times[leng-1]) var txt = n.substring(index).split("]")[1]; times.forEach(function(item,index){ var time = item.match(/\[(\d{2}[\:\.]\d{2}[\:\.]\d{2})\]/); if(time){ var hsm = time[1].split(/[\:\.]/); var obj = { time:hsm[0]+hsm[1]+hsm[2], lrc:"["+hsm[0]+":"+hsm[1]+":"+hsm[2]+"]"+txt }; lrcContent.push(obj); }else{ lrcHead.push(n); } }); } }); lrcContent.sort(function(time1,time2){ return (time1.time - time2.time) }); lrcContent.forEach(function(n,i){ lrcContent[i] = n.lrc; }); checkLrcHead(lrcHead); var allLrc = lrcHead.concat(lrcContent); return allLrc.join("\n"); } //处理歌词头部信息,检查完整度,保证歌词标准格式 function checkLrcHead(head){ var obj = {}; head.forEach(function(n,i){ var key = n.match(/\[(\w+)\:/)[1]; var value = n.match(/\:(.*?)\]/)[1]; if(key){ obj[key] = value; } }); var keys = Object.keys(obj); if(keys.indexOf("ti") == -1){ obj["ti"] = "Unknown Song"; } if(keys.indexOf("ar") == -1){ obj["ar"] = "秋叶"; } if(keys.indexOf("al") == -1){ obj["al"] = "戒不掉的心跳"; } if(keys.indexOf("by") == -1){ obj["by"] = "秋叶博客"; } head.length = 0; var sortArr = ["ti","ar","al","by"]; sortArr.forEach(function(n,i){ head.push(["["+n+":"+obj[n]+"]"]); }); return head; } //把歌词折叠,参数传完整的lrc歌词字符串,需要换行 function foldLrc(lrc){ var lrcArr = lrc.split("\n"); var lrcObj = {}; var lrcHead = []; var newLrc = []; lrcArr.forEach(function(n,i){ var times = n.match(/\[(.*?)\]/g); if(times){ var leng = times.length; var index = n.indexOf(times[leng-1]) var txt = n.substring(index).split("]")[1]; times.forEach(function(item,index){ var time = item.match(/\[(\d{2}[\:\.]\d{2}[\:\.]\d{2})\]/); if(time){ var hsm = time[1].split(/[\:\.]/); if(!lrcObj[txt]){ lrcObj[txt] = [time[0]]; }else{ lrcObj[txt].push(time[0]); } }else{ lrcHead.push(n); } }); } }); checkLrcHead(lrcHead); var allLrc = lrcHead.concat(newLrc); for(var i in lrcObj){ allLrc.push(lrcObj[i].join("")+i); } return allLrc.join("\n"); } pre div ...
目录: 前端编程 标签: 折叠LRC歌词 1条评论 6989次阅读
前端分页页码展示逻辑封装函数
作者: 秋了秋 发表时间:2017年04月21日
mysql数据库迁移导入到mongodb详细教程
接的公共部分)。 function pageInit(current,total,link){ current=parseInt(current),total=parseInt(total); var count = 6; var preLink = current > 1 ? link + (current-1) : "javascript:void(0)"; var nextLink = current < total ? link + (current+1) : "javascript:void(0)"; var html = '<div class="pages"><b>'+current+'</b>/'+total+' Pages <a href="'+preLink+'" '+(current > 1 ? "":"class=\"no-link\"")+'>«</a>'; if(total <= count){ for(var i=1;i<=total;i++){ var pageTag = i == ...
目录: 前端编程 标签: 分页, 前端页码 0条评论 8843次阅读
编程技术思想论
作者: 秋了秋 发表时间:2017年04月02日
mysql数据库迁移导入到mongodb详细教程
指的是What is this?和How to do?。What is this指的是这个有什么功能?用来干什么?为什么要用它?它解决了什么问题?一定要做个明白人,比如说jq框架,它有什么优点?为什么不用原生JavaScript,因为它对JavaScript封装了一些函数简化了我们的编程,函数内部做了各种浏览器的兼容性,我们使用的时候只要调个函数即可替代我们用原生写几行到几百行的JavaScript代码。How to do指的是如何使用,通俗点就是文档,比如说jq使用的时候要先引入jq库,css方法定义多个属性的时候要传个对象,对象键名是样式的属性名,键值是样式的属性值css({left:"20px",width:"...
目录: 秋叶心语 标签: nodejs, 编程思想 2条评论 8284次阅读
使用Html5绘制动感音乐频谱教程
作者: 秋了秋 发表时间:2017年02月07日
mysql数据库迁移导入到mongodb详细教程
码,我们就获取到了音乐的音频能量和频谱1024长度的数组,这两个数据分别存在data和playerTimeDomainData里面,所以剩下的都是围绕着两个数值进行操作。 第二步span :绘制动画。这就靠JavaScript编程“艺术”了,动画的实现有传统的Dom操作,也有hml5的Canvas绘图技术,在这里我用canvas,这样会比较流畅,因为频繁操作dom开销是很大的。strong 简单的事情我们绝不说得复杂,复杂的事情那就不要说吧,具体看代码实现~ [showCode]查看代码[/showCode] github地址:https://github.com/mizuiren/Javascript-Animations/blob/master/canvas-music/mp3.htmla ...
目录: 前端编程 标签: h5music 9条评论 8007次阅读
Js、Css3仿手机QQ资料个性名片标签特效
作者: 秋了秋 发表时间:2017年01月20日
mysql数据库迁移导入到mongodb详细教程
有心的人会注意到手机QQ个人资料卡印象标签页非常精致美观,我看到后心动了,决定心动不如行动,于是用网页高仿出一个web页面,效果基本类似,转念一想,这东西不仅好玩,也可以用作投票页面,以前的选项投票可以换成这种极具交互效果的实现。,哈哈哈,要的直接拿去,注意注明出处,写个页面不容易啊。 #impression{ width:400px; height:600px; position: relative; margin:0 auto; border: 2px solid #C2BABA; } @media screen and (max-width:500px){ #impression{width:95%;} } .impress-bg,.impress-content { position: absolute; left: 0; top: 0; width:100%; height:100%; } .impress-bg{ background: #73b3b3 url("http://img.mizuiren.com/datou.jpg") no-repeat; background-size: cover; -webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px); } .main-img .center{ position: absolute; left:50%; top:50%; margin-top:-50px; border-radius: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); } .main-img img{ width:100px; height:100px; } .main-img .opacity-div{ width:140px; height:140px; background: rgba(255,255,255,0.5); } @keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-webkit-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-webkit-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-webit-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-ms-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-ms-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-ms-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-o-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-o-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-o-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } @-moz-keyframes poup1{ 0%{width:140px;height:140px;opacity: 1;} 100%{width:160px;height:160px;opacity: 0;} } @-moz-keyframes poup2{ 0%{width:120px;height:120px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-moz-keyframes poup3{ 0%{width:100px;height:100px;opacity: 1;} 100%{width:120px;height:120px;opacity: 0;} } .poup .opacity-div{ animation: poup1 1s ease-out infinite; -webkit-animation: poup1 1s ease-out infinite; -moz-animation: poup1 1s ease-out infinite; -o-animation: poup1 1s ease-out infinite; -ms-animation: poup1 1s ease-out infinite; } .poup .white-div{ animation: poup2 1s ease-out infinite; -webkit-animation: poup2 1s ease-out infinite; -moz-animation: poup2 1s ease-out infinite; -o-animation: poup2 1s ease-out infinite; -ms-animation: poup2 1s ease-out infinite; } .poup .border-div{ animation: poup3 1s ease-out infinite; -webkit-animation: poup3 1s ease-out infinite; -moz-animation: poup3 1s ease-out infinite; -o-animation: poup3 1s ease-out infinite; -ms-animation: poup3 1s ease-out infinite; } @keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-webit-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-webkit-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-webkit-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-ms-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-ms-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-ms-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-o-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-o-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-o-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } @-moz-keyframes scan1{ 0%{width:140px;height:140px;} 40%{width:160px;height:160px;} 100%{width:140px;height:140px;} } @-moz-keyframes scan2{ 0%{width:120px;height:120px;} 40%{width:140px;height:140px;} 100%{width:120px;height:120px;} } @-moz-keyframes scan3{ 0%{width:100px;height:100px;} 40%{width:120px;height:120px;} 100%{width:100px;height:100px;} } .scan .opacity-div{ animation: scan1 .5s ease-out; -webkit-animation: scan1 .5s ease-out; -moz-animation: scan1 .5s ease-out; -o-animation: scan1 .5s ease-out; -ms-animation: scan1 .5s ease-out; } .scan .white-div{ animation: scan2 .5s ease-out; -webkit-animation: scan2 .5s ease-out; -moz-animation: scan2 .5s ease-out; -o-animation: scan2 .5s ease-out; -ms-animation: scan2 .5s ease-out; } .scan .border-div{ animation: scan3 .5s ease-out; -webkit-animation: scan3 .5s ease-out; -moz-animation: scan3 .5s ease-out; -o-animation: scan3 .5s ease-out; -ms-animation: scan3 .5s ease-out; } @keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-webkit-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-moz-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-o-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @-ms-keyframes opacity1{ 0%{width:140px;height:140px;opacity: .5;} 70%{width:160px;height:160px;opacity: 1;} 100%{width:140px;height:140px;opacity: 0;} } @keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-webkit-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-ms-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-moz-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @-o-keyframes opacity2{ 0%{width:120px;height:120px;opacity: .4;} 50%{width:140px;height:140px;opacity: 1;} 70%{width:120px;height:120px;opacity: 0;} 100%{opacity:0} } @keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-webkit-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-ms-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-o-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } @-moz-keyframes opacity3{ 0%{width:100px;height:100px;opacity: .5;} 40%{width:120px;height:120px;opacity: 1;} 60%{width:100px;height:100px;opacity: 0;} 100%{opacity:0} } .main-img.animate .opacity-div{ animation: opacity1 1.2s ease-out infinite; -webkit-animation: opacity1 1.2s ease-out infinite; -moz-animation: opacity1 1.2s ease-out infinite; -o-animation: opacity1 1.2s ease-out infinite; -ms-animation: opacity1 1.2s ease-out infinite; } .main-img.animate .white-div{ animation: opacity2 1.2s ease-out infinite; -webkit-animation: opacity2 1.2s ease-out infinite; -moz-animation: opacity2 1.2s ease-out infinite; -o-animation: opacity2 1.2s ease-out infinite; -ms-animation: opacity2 1.2s ease-out infinite; } .main-img.animate .border-div{ animation: opacity3 1.2s ease-out infinite; -webkit-animation: opacity3 1.2s ease-out infinite; -moz-animation: opacity3 1.2s ease-out infinite; -o-animation: opacity3 1.2s ease-out infinite; -ms-animation: opacity3 1.2s ease-out infinite; } @keyframes small{ 0%{transform: scale(1);} 30%{transform: scale(0);} 100%{transform: scale(1);} } @-webkit-keyframes small{ 0%{-webkit-transform: scale(1);} 30%{-webkit-transform: scale(0);} 100%{-webkit-transform: scale(1);} } @-moz-keyframes small{ 0%{-moz-transform: scale(1);} 30%{-moz-transform: scale(0);} 100%{-moz-transform: scale(1);} } @-ms-keyframes small{ 0%{-ms-transform: scale(1);} 30%{-ms-transform: scale(0);} 100%{-ms-transform: scale(1);} } @-o-keyframes small{ 0%{-o-transform: scale(1);} 30%{-o-transform: scale(0);} 100%{-o-transform: scale(1);} } .impress-tag li.small{ animation: small .3s ease-out; -webkit-animation: small .3s ease-out; -moz-animation: small .3s ease-out; -o-animation: small .3s ease-out; -ms-animation: small .3s ease-out; } .main-img .white-div{ width:120px; height:120px; background: rgba(255,255,255,0.5); } .main-img .border-div{ width:100px; height:100px; background: rgba(255,255,255,0.5); border:1px solid #fff; } .impress-tag li .text{ display:inline-block; width:50px; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } .impress-tag li{ list-style: none; position:absolute; border-radius: 50%; background: rgba(0, 0, 0, 0.3); color:white; box-sizing: border-box; width: 70px; height: 70px; font-size: 14px; font-family: "微软雅黑"; border:1px solid rgb(162,162,162); text-align: center; line-height:1.1em; box-sizing: border-box; padding:0 10px; } style div div div div div 热情(0span )span li 大方(0span )span li 无私(0span )span li 可怜(0span )span li 完美主义(0span )span li 霸气外漏(0span )span li 地调(0span )span li ul div div /***************************/ //尊重劳动成果 //版权所有:秋叶 //作者博客地址:http://www.mizuiren.com/ //转载注明出处,谢谢! /***************************/ //原生js实现环形菜单创建 function circleLayout(para){ var count=para.targetElement.length; if(!count||!para.pointElement){ throw new Error("请传入布局元素参数targetElement和pointElement !"); return false; } var beginAngle=para.beginAngle; var endAngle=para.endAngle; var validAngle=endAngle-beginAngle; var angle=validAngle/count; var X,Y, pointLeft=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[0]):(para.pointElement.offsetLeft+para.pointElement.offsetWidth/2), pointTop=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[1]):(para.pointElement.offsetTop+para.pointElement.offsetHeight/2); for(var i =0;icount script div [showCode]查看代码[/showCode]...
目录: 前端编程 标签: qq资料名片 2条评论 6325次阅读
Js、Html环形扇形轨迹布局[三角函数]
作者: 秋了秋 发表时间:2017年01月17日
mysql数据库迁移导入到mongodb详细教程
前端中用得最多的要么线性,要么矩形布局,都是栅格方块组成的页面样式。这显得很单一,如果突然加入环形布局,将会让人眼前一亮,通过JavaScript可以很灵活的使用这种布局,这时候我们学的数学知识派上用场了,没错,就是三角函数,经典的数学问题。已知一个圆心的坐标和圆的半径以及任意一条半径与水平线的夹角,求这条半径终点的坐标。这放在数学上是一道很简单的题目,但是放在编程里面有的人就犯糊涂了。引入一张图片做解释。 比方说我要围绕圆心,平均...
目录: 前端编程 标签: 环形布局 1条评论 5512次阅读
Js生成随机圆形,随机颜色,随机位置,不重叠
作者: 秋了秋 发表时间:2017年01月02日
mysql数据库迁移导入到mongodb详细教程
篇文章主要是用来总结之前的那两篇文章的知识点,分别是《处理数组循环中删除元素导致索引错位情况a 》和《JavaScript规则图形碰撞原理a 》,还是用demo来总结来得实在,做了个生成随机圆形,随机颜色,随机位置,不重叠的小demo。demo的js代码如下: function creatDiv(r_w){ var randomWidth=parseInt(Math.random()*r_w+50); var allEle=document.getElementById("page467").getElementsByTagName("*...
目录: 前端编程 标签: 6条评论 5757次阅读