JavaScript特效代码收集
来源：互联网 发布：php菱形 编辑：程序博客网 时间：2024/06/05 18:20
页面“线条”效果
引自：http://www.sojson.com/blog/127.html
<!-- 这个script 引入得放到<body> 里，放到header 里，会报错。并且不依赖其他js 插件。 --!><!-- 参数解释 count ：线条数量；zindex ：层级；opacity：透明度；color ：线条颜色，最好用RGB颜色 --!><script count="200" zindex="-2" opacity="0.5" color="47,135,193" type="text/javascript"> ! function() { //封装方法，压缩之后减少文件大小 function get_attribute(node, attr, default_value) { return node.getAttribute(attr) || default_value; } //封装方法，压缩之后减少文件大小 function get_by_tagname(name) { return document.getElementsByTagName(name); } //获取配置参数 function get_config_option() { var scripts = get_by_tagname("script"), script_len = scripts.length, script = scripts[script_len - 1]; //当前加载的script return { l: script_len, //长度，用于生成id用 z: get_attribute(script, "zIndex", -1), //z-index o: get_attribute(script, "opacity", 0.5), //opacity c: get_attribute(script, "color", "0,0,0"), //color n: get_attribute(script, "count", 99) //count }; } //设置canvas的高宽 function set_canvas_size() { canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; } //绘制过程 function draw_canvas() { context.clearRect(0, 0, canvas_width, canvas_height); //随机的线条和当前位置联合数组 var all_array = [current_point].concat(random_lines); var e, i, d, x_dist, y_dist, dist; //临时节点 //遍历处理每一个点 random_lines.forEach(function(r) { r.x += r.xa, r.y += r.ya, //移动 r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹 context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点 for (i = 0; i < all_array.length; i++) { e = all_array[i]; //不是当前点 if (r !== e && null !== e.x && null !== e.y) { x_dist = r.x - e.x, //x轴距离 l y_dist = r.y - e.y, //y轴距离 n dist = x_dist * x_dist + y_dist * y_dist; //总距离, m dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速 d = (e.max - dist) / e.max, context.beginPath(), context.lineWidth = d / 2, context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", context.moveTo(r.x, r.y), context.lineTo(e.x, e.y), context.stroke()); } } all_array.splice(all_array.indexOf(r), 1); }), frame_func(draw_canvas); } //创建画布，并添加到body中 var the_canvas = document.createElement("canvas"), //画布 config = get_config_option(), //配置 canvas_id = "c_n" + config.l, //canvas id context = the_canvas.getContext("2d"), canvas_width, canvas_height, frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) { window.setTimeout(func, 1000 / 45); }, random = Math.random, current_point = { x: null, //当前鼠标x y: null, //当前鼠标y max: 20000 }; the_canvas.id = canvas_id; the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o; get_by_tagname("body")[0].appendChild(the_canvas); //初始化画布大小 set_canvas_size(), window.onresize = set_canvas_size; //当时鼠标位置存储，离开的时候，释放当前位置信息 window.onmousemove = function(e) { e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY; }, window.onmouseout = function() { current_point.x = null, current_point.y = null; }; //随机生成config.n条线位置信息 for (var random_lines = [], i = 0; config.n > i; i++) { var x = random() * canvas_width, //随机位置 y = random() * canvas_height, xa = 2 * random() - 1, //随机运动方向 ya = 2 * random() - 1; random_lines.push({ x: x, y: y, xa: xa, ya: ya, max: 6000 //沾附距离 }); } //0.1秒后绘制 setTimeout(function() { draw_canvas(); }, 100);}();</script>正计时
引自：http://meihuaqizi.com/
<!DOCTYPE html><html><head> <meta charset = "utf-8"> <meta property="wb:webmaster" content="9a2d177f81696c94" /> <!-- 该文件需要下载到本地 --!> <script type="text/javascript" src = "http://meihuaqizi.com/jquery.1.4.2.js"></script> <!-- 该文件需要下载到本地 --!> <script type="text/javascript" src = "http://meihuaqizi.com/animateBackground-plugin.js"></script> <!-- 此处的属性startDate指定了正计时开始的时间 --!> <script type="text/javascript" startDate="1992/04/09 19:54:00" > $(function(){ getDate(); setInterval('getDate()', 1000);//每隔1秒执行一次 }); var days,minutes,secondes var scripts = document.getElementsByTagName("script"), script_len = scripts.length, script = scripts[script_len - 1]; //当前加载的script function getDate(){ var birthday = new Date(script.getAttribute("startDate")); var date = new Date(); var date3 = date.getTime() - birthday.getTime(); // document.write(date3); //计算出相差天数 days=Math.floor(date3/(24*3600*1000)); //计算出小时数 var leave1=date3%(24*3600*1000); //计算天数后剩余的毫秒数 var hours=Math.floor(leave1/(3600*1000)); //计算相差分钟数 var leave2=leave1%(3600*1000); //计算小时数后剩余的毫秒数 minutes=Math.floor(leave2/(60*1000)); //计算相差秒数 var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数 //此处原代码有bug，应该仍然下取整 seconds=Math.floor(leave3/1000); // document.write(days+"天"+hours+"时"+minutes+"分"+seconds+"秒 ") hours = fix(hours,2); minutes = fix(minutes,2); seconds = fix(seconds,2); show_num("#day",days); show_num("#hour",hours); show_num("#minute",minutes); show_num("#second",seconds); } function fix(num, length) { return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num; } function show_num(elem,n){ var it = $(elem+" i"); var len = String(n).length; for(var i=0;i<len;i++){ if(it.length<=i){ $(elem).append("<i></i>"); } var num=String(n).charAt(i); var y = -parseInt(num)*30; //y轴位置 var obj = $(elem+" i").eq(i); obj.animate({ //滚动动画 backgroundPosition :'(0 '+String(y)+'px)' }, 'slow','swing',function(){} ); } } </script> <!-- 该处使用了图片资源文件，该文件需要下载到本地 --!> <style type="text/css"> #div{width:500px; height:40px; line-height:40px; margin:200px auto 20px auto; font-size:20px} #div #day{ display:inline-block; line-height:13px; margin:2px 4px 0 4px;} #div #hour{ display:inline-block; line-height:13px; margin:2px 4px 0 4px;} #div #minute{ display:inline-block; line-height:13px; margin:2px 4px 0 4px;} #div #second{ display:inline-block; line-height:13px; margin:2px 4px 0 4px;} #div #day i{width:15px;height:23px; display:inline-block; background: url(http://meihuaqizi.com/number.png) no-repeat; background-position:0 0; text-indent:-999em} #div #hour i{width:15px;height:23px; display:inline-block; background: url(http://meihuaqizi.com/number.png) no-repeat; background-position:0 0; text-indent:-999em} #div #minute i{width:15px;height:23px; display:inline-block; background: url(http://meihuaqizi.com/number.png) no-repeat; background-position:0 0; text-indent:-999em} #div #second i{width:15px;height:23px; display:inline-block; background: url(http://meihuaqizi.com/number.png) no-repeat; background-position:0 0; text-indent:-999em} </style></head><body><div id = "div"> <span id = "day"></span>Days <span id = "hour"></span>Hours <span id = "minute"></span>Minutes <span id = "second"></span>Seconds</div> </body></html>字符串进化
引自：https://huzidaha.github.io/home/
<!-- 变化字符的显示标签必须命名id为"StrEvolution"，也可以是<span/>, <a/>等标签；但其内文本只支持英文字母和逗号，句号 --!><h3 id="StrEvolution"> This is a funny action. </h3><script>/******/ (function(modules) { // webpackBootstrap/******/ // The module cache/******/ var installedModules = {};/******/ // The require function/******/ function __webpack_require__(moduleId) {/******/ // Check if module is in cache/******/ if(installedModules[moduleId])/******/ return installedModules[moduleId].exports;/******/ // Create a new module (and put it into the cache)/******/ var module = installedModules[moduleId] = {/******/ exports: {},/******/ id: moduleId,/******/ loaded: false/******/ };/******/ // Execute the module function/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******/ // Flag the module as loaded/******/ module.loaded = true;/******/ // Return the exports of the module/******/ return module.exports;/******/ }/******/ // expose the modules object (__webpack_modules__)/******/ __webpack_require__.m = modules;/******/ // expose the module cache/******/ __webpack_require__.c = installedModules;/******/ // __webpack_public_path__/******/ __webpack_require__.p = "";/******/ // Load entry module and return exports/******/ return __webpack_require__(0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ function(module, exports, __webpack_require__) { 'use strict'; var _gen = __webpack_require__(1); var _gen2 = _interopRequireDefault(_gen); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var isRunning = false; var init = function init() { redirectPosts(); listen(); play(); }; function redirectPosts() { var capture = window.location.search.match(/\?post=(\d+)/); var postid = capture ? capture[1] : null; if (postid) { window.location.href = 'https://github.com/livoras/blog/issues/' + postid; } } function listen() { document.getElementById('StrEvolution').addEventListener('click', function () { if (isRunning) return; play(); }); } function play() { var head = document.getElementById('StrEvolution'); var headTxt = head.innerText var history = (0, _gen2.default)(headTxt).history; isRunning = true; var i = 0; history.forEach(function (text, i) { setTimeout(function () { head.innerText = text; if (++i === history.length) isRunning = false; }, i * 30); }); } init();/***/ },/* 1 *//***/ function(module, exports, __webpack_require__) { 'use strict'; /** * Using Genetic Algorithm to generate lots of random strings * and make them evolve towards the target string. * */ var Genea = __webpack_require__(2); var alphabetArr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ., '.split(''); var alphabet = function () { var alphabet = {}; alphabetArr.forEach(function (ch, i) { alphabet[ch] = i; }); return alphabet; }(); function getTargetStr(targetStr) { var binaryStr = ''; for (var i = 0, len = targetStr.length; i < len; i++) { var ch = targetStr[i]; var chIndex = alphabet[ch]; binaryStr += paddingWith0(Number(chIndex).toString(2)); } return binaryStr; } function paddingWith0(num) { while (num.length < 6) { num = '0' + num; } return num; } function run(str) { var tar = getTargetStr(str); var ga = new Genea({ geneLength: tar.length, mutateProbability: 0.5, doneFitness: 1, populationSize: 20, generationsSize: 400, getFitness: function getFitness(gene) { var count = 0; for (var i = 0, len = gene.length; i < len; i++) { if (gene[i] === tar[i]) count++; } var likeness = count / tar.length; return likeness; }, onGeneration: function onGeneration(generation, genes) { var max = 0, index = 0; this.fitnesses.forEach(function (fitness, i) { if (fitness > max) { max = fitness; index = i; } }); this.history.push(toChars(genes[index])); } }); ga.history = []; ga.start(); return ga; } function toChars(gene) { var str = ''; while (gene.length) { var ch = '00' + gene.substr(0, 6); gene = gene.substr(6); var chIndex = parseInt(ch, 2); if (chIndex >= alphabetArr.length) { chIndex = Math.floor(Math.random() * (alphabetArr.length - 1)); } if (!alphabetArr[chIndex]) console.log(chIndex, parseInt(ch, 2)); str += alphabetArr[chIndex]; } return str; } module.exports = run;/***/ },/* 2 *//***/ function(module, exports) { 'use strict'; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Genea = function () { function Genea(config) { _classCallCheck(this, Genea); this.currentGeneration = 0; this.populations = []; this.fitnesses = []; this.mutateProbability = config.mutateProbability || 0.5; // 0 ~ 1 this.generationsSize = config.generationsSize || 100; this.populationSize = config.populationSize || 100; this.doneFitness = config.doneFitness || 1; // 0 ~ 1 this.geneLength = config.geneLength; this.getFitness = config.getFitness; this.outOfGenerationsSize = config.outOfGenerationsSize || this.outOfGenerationsSize; this.onGeneration = config.onGeneration || this.onGeneration; this.done = config.done || this.done; } _createClass(Genea, [{ key: "start", value: function start() { this.initPopulation(); this.makeFitnesses(); this.select(); } }, { key: "initPopulation", value: function initPopulation() { this.currentGeneration = 1; this.populations = []; for (var i = 0, len = this.populationSize; i < len; i++) { var gene = getRandomGene(this.geneLength); this.populations.push(gene); } this.onGeneration(this.currentGeneration, this.populations); } }, { key: "select", value: function select() { if (this.currentGeneration >= this.generationsSize) { return this.outOfGenerationsSize(this.populations, this.fitnesses); } var matches = this.getMatches(); if (matches.length > 0) return this.done(matches); this.generateNextGeneration(); } }, { key: "makeFitnesses", value: function makeFitnesses() { var _this = this; this.fitnesses = []; this.totalFitness = 0; this.populations.forEach(function (individual, i) { var fitness = _this.getFitness(individual, _this.populations); _this.fitnesses[i] = fitness; _this.totalFitness += fitness; }); } }, { key: "getMatches", value: function getMatches() { var _this2 = this; var bests = []; this.populations.forEach(function (individual, i) { var fitness = _this2.fitnesses[i]; if (fitness >= _this2.doneFitness) { bests.push({ gene: individual, fitness: fitness, pos: i }); } }); return bests; } }, { key: "generateNextGeneration", value: function generateNextGeneration() { this.currentGeneration++; var oldPopulations = this.populations; var newPopulations = []; for (var i = 0, len = oldPopulations.length; i < len; i++) { var father = this.rotate(); var mother = this.rotate(); var child = this.crossOver(father, mother); child = this.mutate(child); newPopulations.push(child); } this.populations = newPopulations; this.makeFitnesses(); this.onGeneration(this.currentGeneration, this.populations); this.select(); } }, { key: "crossOver", value: function crossOver(father, mother) { var pos = Math.floor(father.length * Math.random()); var child1 = father.substring(0, pos) + mother.substring(pos); var child2 = mother.substring(0, pos) + father.substring(pos); return this.getFitness(child1) > this.getFitness(child2) ? child1 : child2; } }, { key: "mutate", value: function mutate(child) { var mutateProbability = Math.random(); if (mutateProbability < this.mutateProbability) return child; var pos = Math.floor(Math.random() * this.geneLength); var arr = child.split(""); arr[pos] = +child[pos] ^ 1; return arr.join(""); } }, { key: "rotate", value: function rotate() { var pos = Math.random(); // let's roll! var soFar = 0; for (var i = 0, len = this.fitnesses.length; i < len; i++) { var fitness = this.fitnesses[i]; soFar += fitness; if (soFar / this.totalFitness >= pos) { return this.populations[i]; } } } }, { key: "done", value: function done() {} }, { key: "onGeneration", value: function onGeneration() {} }, { key: "outOfGenerationsSize", value: function outOfGenerationsSize() {} }]); return Genea; }(); function getRandomGene(len) { var gene = ""; for (var i = 0; i < len; i++) { gene += Math.floor(Math.random() * 100) % 2 === 0 ? "1" : "0"; } return gene; } module.exports = Genea;/***/ }/******/ ]);</script>旋转地球仪
引自：http://www.gbtags.com/gb/rtreplayerpreview/369.htm
<!-- 这段javascript代码必须顶开头写 --!><script>eval(z='p="<"+"pre>"/* ############ */;for(y in n="zw24l6k\4e3t4jnt4qj24xh2 x/* ############## */42kty24wrt413n243n\9h243pdxt41csb yz/*################# * */43iyb6k43pk7243nm\r24".split(4)){/* ###########* # */for(a in t=pars\eInt(n[y],36)+/**############# ### */(e=x=r=[]))for\(r=!r,i=0;t[a/* *############ ### */]>i;i+=.05)wi\th(Math)x-= /* ############# *#* */.05,0>cos(o=\new Date/1e3/* #######* *### */+x/PI)&&(e[~\~(32*sin(o)*/* ####* ####### */sin(.5+y/7))\+60] =-~ r);/* *####* *####### */for(x=0;122>\x;)p+=" *#"/* ########* *### */[e[x++]+e[x++\]]||(S=("eval"/* ############* # */+"(z=\'"+z.spl\it(B = "\\\\")./* *####### # */join(B+B).split\(Q="\'").join(B+Q/* ######* * */)+Q+")//m1k")[x/2\+61*y-1]).fontcolor/* *##* * */(/\\w/.test(S)&&"#\03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//m1k\</script> 0 0
- JavaScript特效代码收集
- Javascript 特效代码
- Javascript 特效代码
- javascript特效代码
- 最新特效代码收集[推荐]
- 收集整理:网页特效代码共享
- 欢迎光临javascript特效代码中心
- Javascript特效代码大全(420个)
- 常用javascript网页制作特效代码
- Javascript特效代码大全(420个)
- Javascript特效代码大全(420个)
- 特效代码
- 网页设计常用的Javascript特效代码
- 国内外 JavaScript 经典网页特效代码封装
- javascript收集
- javascript收集
- javascript收集
- JavaScript 收集
- 第几天
- 第一章：对象导言
- kafka问题: Error reading field 'topics'
- jQuery选择器课堂随笔
- aapt.AaptException Failed to crunch file
- JavaScript特效代码收集
- Android ActionBar 使用注意事项
- hibernate criteria中Restrictions的用法
- InputStream 二进制读取文件, byte数据的长度问题
- LeetCode：Single Number
- PBAC数据库表中设计及关联
- 全栈工程师培训材料
- 反转链表
- 迭代法求平方根
