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动画上传成静态图片并可控制播放与暂停</......继续阅读
WordPress Ajax 评论分页+翻页代码 WordPress 升级到4.4版本后源代码分页函数失效。只需要给paginate_comments_links函数加上个total参数就可以了。代码已更新。 如果某篇文章评论特别多的时候,我们可以启用分页,但是想查看其他分页的评论就要刷新页面,但是文章内容是相同的,所以这个动作用AJAX 来完成用户体验会好一些。 wp_list_comments有一个callback参数,这个参数是评论回调函数......继续阅读
jQuery炫酷页面预加载Loading特效插件 fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件。它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程。 使用方法 在标签中引入fakeLoader.css文件。 [css] <link rel="stylesheet" href="yourPath/fakeLoader.css"&g......继续阅读
JQuery单行文字滚动效果代码 JQuery单行文字滚动代码如下: [code] <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"......继续阅读
WordPress的全站Ajax加载(四)完整代码篇(完结) 最近发现小伙伴们对ajax加载比较感兴趣,我之前也写了三篇转门介绍Ajax,自以为已经结束了 写的也比较清楚了。有点懒同学给我提了建议“得把读者都当成小白来看待,不然估计还看不懂”。此文接受建议而出,不过个人还是觉得小伙伴们不要太过把自己当小白,还是要多学会思考总结。本人以前也是小白一个 学的也不是编程。好了 废话不多说 直接进入主题。 这篇部分代码是本人正在使用的代码摘录而出,使用了html5的......继续阅读
WordPress的全站Ajax加载(三)改变地址栏 Ajax的优点就是通过局部刷新内容 提高用户体验,但是众所周知的的,ajax后地址栏是不会跟随改变的,URL会一直显示在你第一次进入网站的地址。这样的话 如果用户想分享地址的或者想保存地址的话 就不是当前文章所在的地址。还有返回前进不能使用,这样就造成了很尴尬的局面。这篇文章将介绍2种实现方法,2种各有优缺点。Let's go~~第一种方法是通过Jquery的一个插件jQuery Address实......继续阅读