JS+CSS3+html5实现数码管时钟特效 html代码： [xml] <svg id="noise-svg"> <!-- gives background a bit of texture --> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequen......继续阅读
canvas+js 实现黑客帝国代码雨效果 使用canvas+js实现黑客帝国代码雨效果 html代码： [xml] <canvas width="1272" height="275"></canvas>[/xml] js代码： [js] let canvas = document.querySelector('canvas'); let ctx = can......继续阅读
jQuery 实现一个文章阅读进度条功能 思路：获取元素 offset 高度、元素高度、滑动距离就能实现了 代码： [js] var content_offtop = $('.article-content').offset().top; var content_height = $('.article-content').innerHeight(); $(window).scroll(function () { if (($(this)......继续阅读
jQuery给GIF动画添加缩略图，不止用在WordPress jQuery让GIF图片默认为静态图片，鼠标经过时显示动态，不仅仅在WordPress，基本所有网页上GIF图片默认是显示动态的，这样如果多了，就会让网页很卡，也会消耗资源的，所以我研究了一下怎么让GIF像视频一样，显示个缩略图，等鼠标经过或者点击播放的时候播放动态图片。 首先我们来屡一下思路： 1、假设GIF图片像视频一样都是由帧组成的，我们获取其中一帧来做缩略图，嗯，在CSS3时代我们可以用c......继续阅读
带有进度环的返回顶部效果 大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用data储存并使用css的 content属性实现。 确保引入了jquery,下面的代码加入到你的js文件中 [js] var bigfa_scroll = { drawCircle: function(id, percentage, color) { var width = jQuery(id).width(); var......继续阅读
JS – 获取文件后缀，判断文件类型（比如是否为图片格式） 1，获取文件后缀 有时候我们需要通过文件名或者路径，得到该文件的后缀名（扩展名），可以通过如下方式进行截取： [js] //文件路径 var filePath = "file:///storage/emulated/0/opmark/User/Pic/hangge.png"; //获取最后一个.的位置 var index= filePath.lastIndexOf("......继续阅读
GIF动画上传成静态图片并可鼠标经过播放与暂停 演示站直接放出原站链接：https://demo.demohuo.top/jquery/46/4605/demo/ 直接贴出代码： [xml] <!doctype html> <html> <head> <meta charset="utf-8"> <title>模拟GIF动画上传成静态图片并可控制播放与暂停</......继续阅读
jQuery炫酷页面预加载Loading特效插件 fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件。它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程。 使用方法 在标签中引入fakeLoader.css文件。 [css] <link rel="stylesheet" href="yourPath/fakeLoader.css"&g......继续阅读
一键分享到QQ空间、QQ好友、新浪微博、微信代码 通过qq空间、qq聊天、新浪微博和微信二维码分享平台提供的接口，实现把网页中对应的图片、标题、描述的信息参数用javascript获取后传进接口中，实现一键分享。 使用到的接口(测试时需要登录，网址和图片必须是公网的，不能localhost)： 1.分享到QQ空间接口：https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你......继续阅读
JQuery单行文字滚动效果代码 JQuery单行文字滚动代码如下: [code] <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"......继续阅读
