搜索到
11
篇与
教程分享
的结果
-
鼠标点击出现爱心特效 <script> //鼠标点击出现爱心特效 (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); </script> -
博客添加实时显示FPS帧率代码 网页上实时显示 FPS（每秒帧数）帧率，不知道有什么用，可能好的电脑才能看出区别吧。<script> jQuery(document).ready(function($){ $('body').before('<div id="fps" style="position: fixed;right: 20px;color: #fff;line-height: 1;z-index:10000;padding: 5px 8px;"></div>'); var showFPS = (function() { var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; var e, pe, pid, fps, last, offset, step, appendFps; fps = 0; last = Date.now(); step = function() { offset = Date.now() - last; fps += 1; if (offset >= 1000) { last += offset; appendFps(fps); fps = 0; } requestAnimationFrame(step); }; appendFps = function(fps) { console.log(fps + ' FPS'); $('#fps').html(fps + ' FPS'); }; step(); })(); }); </script>
-
随机小姐姐短视频引流源码 一、简介本模板是一款简洁而美观的HTML页面，专为个人引流而设计。二、使用步骤将本HTML源码复制后，在主机空间或服务器内根目录创建一个index.html打开index.html文件进行编辑。根据个人需求，修改页面中的内容、样式、文本信息等。三、功能特点简洁美观，页面设计简洁源码<html> <head> <meta charset="UTF-8"> <style> #switch,#next1{ background: #7F9CCC; color:#fff; line-height:40px; text-align:center; width:100px; border:none; margin:0 6px; border-radius:6px; font-weight:bold; } </style> </head> <body> <section id="main"> <video id="player" src="https://dwz.mk/MVZVjy" controls="controls" width="100%" height="500px"></video> </section> <div style="text-align: center;"> <section id="buttons"> <button id="switch">连续: 开</button><button id="next1">换一个</button> </section> </div> <script> (function (window, document) { if (top != self) { window.top.location.replace(self.location.href); } var get = function (id) { return document.getElementById(id); } var bind = function (element, event, callback) { return element.addEventListener(event, callback); } var auto = true; var player = get('player'); var randomm = function () { player.src = 'http://v.nrzj.vip/video.php?_t=' + Math.random(); player.play(); } bind(get('next1'), 'click', randomm); bind(player, 'error', function () { randomm(); }); bind(get('switch'), 'click', function () { auto = !auto; this.innerText = '连续: ' + (auto ? '开' : '关'); }); bind(player, 'ended', function () { if (auto) randomm(); }); })(window, document);</script> <script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script> </body> </html>效果如下：switch,#next1{background: #7F9CCC;color:#fff;line-height:40px;text-align:center;width:100px;border:none;margin:0 6px;border-radius:6px;font-weight:bold;} 连续: 开换一个 (function (window, document) { if (top != self) { window.top.location.replace(self.location.href); } var get = function (id) { return document.getElementById(id); } var bind = function (element, event, callback) { return element.addEventListener(event, callback); } var auto = true; var player = get('player'); var randomm = function () { player.src = 'http://v.nrzj.vip/video.php?_t=' + Math.random(); player.play(); } bind(get('next1'), 'click', randomm); bind(player, 'error', function () { randomm(); }); bind(get('switch'), 'click', function () { auto = !auto; this.innerText = '连续: ' + (auto ? '开' : '关'); }); bind(player, 'ended', function () { if (auto) randomm(); }); })(window, document);var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();
