以前写过一个这个效果，当时刚学js，所以很多东西都是自己写的，从现在的角度看，以前的写的未免不太好，因为平台不通用啊。 所以这次我写了一个jq版本，相对来说通用很多，拿上就能用的效果，不多说，先上预览图： 预览图 源码 直接把代码保存在新建的js文件中，然后在jq之后引入即可。 [hide] ; jQuery(document).ready(function ($) { let fqIndex = 0; const fqArr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友...
一直想搞个多语言切换的东西，想的头发都没了。 终于让我看到了一个插件，虽然已经是很久以前的东西了，但是我测试了下，还真鸡儿好用。 github地址: 官网 引入文件，因为是jq的插件，所以在jq文件后面引入： <script src="https://cdn.jsdelivr.net/gh/jquery-i18n-properties/jquery-i18n-properties/jquery.i18n.properties.min.js"></script> 引入后可以通过jQuery对象调用。 我们先讲一下大概过程再来说调用方法： 首先我们要有语言文件，也...
github地址： pjax 中文说明文档（非官方）： pjax 基本参数 $(document).pjax(selector, [container], options) selector为click选择器 container为需要更新内容的容器选择器 options为设置 selector的一些技巧： 我们可以给a元素添加一个属性：data-pjax来表示这是一个需要使用pjax的链接，这样就可以避免全部的a元素使用pjax了 <a href="xxxx" data-pjax> $(document).pjax("a[data-pjax]", [container...
最近发现好多站点都开始做这个功能，每次复制都给我弹一次窗口，每次粘贴末尾总是带一大段版权文字，虽然不喜欢，但是没办法。 比较这年头分享的知识ctrl+c和ctrl+v就是自己的了，加上超多机器人抓取，原创分享真的很难呢！ 效果图 默认效果 开启弹窗提示 使用教程 [hide] 引入插件后，调用copyrightNotice方法： $("选择器").copyrightNotice(); 默认效果只会在复制的内容后面添加一句版权信息的提示文字。 注意：您复制的为原创内容，转载请注明出处！谢谢！ 当然也是可以支持自定义的，支持传入一个对象，这个对象有三个参数。 key val...
html5对多媒体优化很多，但是到现在我对于音乐和视频还是未知，所以这次就研究了下关于audio的用法。 预览图 功能 [x] 播放&暂停 [x] 上一曲&下一曲 [x] 停止 [x] 音量静音&音量条调整 [x] 歌词 [x] 播放进度条，可操控 [x] 已播放时间&单曲总时长 [x] 播放列表，支持双击播放，高亮提示 [x] 三种播放模式，随机、列表循环、单曲循环 注意 由于火狐浏览器因为版权问题，并不支持mp3格式，所以我找到的办法就是从对火狐浏览器的设置进行调整，具体说明demo上贴了。 demo [hide] 音乐播放器 [/hide]
图是我目前主题使用的样式，但是插件不带任何ui样式，他只有三个参数选项，通过传入的success函数进行天气数据对象的操作。 更新 2020-2-25 新增高德ip定位，增加准确性！ 参数 参数 类型 说明 baidukey string 百度普通ip定位开发者key amapkey string 高德天气开发者key success function 接受一个参数，该参数为返回的天气数据对象，具体可以查看高德天气说明 我们先看下success接受的data是什么东西 可以看到他就是一个键值对的对象，可以通过点方法调用到对应得值。 调用方法 $.reac...
响应国家号召，在家里待着实在是没啥娱乐方式，就下了狂野飙车9玩，期间对它这个加载动画很喜欢，觉得能搞下来，就自己仿着样式写了个加载动画，这个动画以后将加入的我的自用主题效果，废话不多说，上图！ 更新 2020-2-3 优化的最后阶段动画展示方式 修复快结束动画的时候，窗口发生变化导致的动画重载 针对部分宽屏做了初始化原汁原味效果（默认显示固定方格位置的背景图） 预览图 教程 设置颜色 <div id="aligame" data-theme='{"backgroundColor":"#1b2a2f","borderColor":"#203c39","loadColor":"#...
了解了一下jq的移动端框架，因为年代久远，让我怀念曾经的时代，是何其的辉煌。 首先由于年代久远，jq的版本需要使用1.0.1版本，然后下载jquery.mobile - 1.4. 5.zip，里面会有很多文件，我们需要拿两个主要文件，还有图片就行，文件分别为： jquery.mobile-1.4.5.min.css jquery.mobile-1.4.5.min.js 一个css文件，一个js文件，然后引入顺序为，css，jq，jq.mobile 使用方法： 通过自定义的元素属性来配置，基本结构如下 <div data-role="page"> <div d...
ios端他自己有一个双击空白区域会自己放大缩小视窗,我怀疑就是这个功能导致dblclick无法正常触发,于是只能通过单次cilick来判断了. 当第二次click的触发时间小于400ms说明是双击,于是通过创建时间戳进行对比. let lastClickTime = 0; let clickTimer; $('#body').on("click", e => { let nowTime = new Date().getTime(); if (nowTime - lastClickTime < 400) { /*双击*/ ...
这里需要使用到jquery-ui的position效果，所以需要引入jq-ui的js文件。 通过特定的class名来进行区分，然后js加上对应的效果。 做这个主要是他这个ui挺简洁的，以后说不定用的到，反正不是很难，就花点时间做了个插件。 预览图： 使用教程 html <a href="images/02.jpg" title="图片信息" class="thickImg"> <img src="images/look.gif" alt="查看大图"> </a> 一个a元素里面包这个一个图片，图片用于提示查看，a的href指向一个...
找了好几个放大镜插件发现全是老旧的，新版jq取消了很多东西，所以导致以前的都无法使用了，索性就自己写了一个新的放大镜插件。 预览图： 使用教程 html结构 <a href="images/01.jpg" class="jqzoom" title=""> <img src="images/small_01.jpg" title="迷你图片"> </a> 通过给a元素一个class为jqzoom的钩子，然后添加一个href属性，指向一张没有压缩的图，也就是big_img。 a元素里面包着一个img元素，该元素显示...
validate默认有几种验证方式，但是定死的方法肯定不能得到发展的，作为老牌的jq插件，他支持自定义验证方法。 首先我们需要引入他自己的模块，additional-methods.js文件，也就是说在引入jquery.validate.js插件之后，还需要引入这个additional-methods.js文件。 注：如果还需要使用中文的message信息提示，还需要在additional-methods.js后面再引入对应的语言，如：messages_zh.js，这个就是中文的提示信息。 因为如果你自定义的一个验证方法，而messages_zh.js先引入了，你这这个文件里面写的对应方...
依旧采用ajax配合阿里云api来获取快递信息，支持自动判断快递公司，初次对接，json部分筛选好做，就是整体的事件判断太麻烦了，快递100的网页还可以通过快递单号先做一个本地预判，这个主要他有大数据分析，有数据库支持，我这边没这个基础，不然也能做，他无非就是分析多少位，开头什么数字，结束什么数字，开头是什么字母，为此我尝试的为顺丰加了一个单独预判，就是单号开始输入sf，大小写都能识别为顺丰。 瞬间被用完100次免费查询额度，我还没体验几次呢，无奈续费了下api 不多说，上图： demo地址 查看 功能介绍 [x] 采用html5+css3构建 [x] 使用jq v3.4.1 [x] ...
如果要在jq里进行跨域，一般来说只有使用jsonp，另一种方式则是进行中间层欺骗，也就是所谓的反代。 这里我们主要讲讲json是怎么回事 基本json 实现jsonp全部都是使用带有src标签的元素，一般默认使用script元素，在src链接地址中，在地址后面加上?name=value&callbakc=hd；其中name=value是传值，而callbakc=hd则是回调，在本地js全局作用域下创建一个名为hd的函数。 var script = document.createElement("script"); script.src = "xxxx?callback=hd"; ...
以前写静态站点的时候一直想要一个图片的站点，但是又不想弄成个本地的，个人又懒得更新，这次ajax尝试使用api来获取别人分享的图片，为此就有了这个页面。 提供了诸多筛选条件，分类，排序，图片px大小，比例，色系，后续有能力再加上搜索关键词，下一步就是加上图箱，我要想一个好一点的图箱办法，然后支持后续更新升级，长期使用，以前写的有点简陋。 不多说，上图: 功能详解： [x] 无刷新加载图片 [x] 跨域 [x] 丰富的筛选条件 [x] 支持翻页，因为是ajax刷新，目前固定6页的页值，下一页可以无限，只要还有内容就可以一直下一页 [x] 响应式结构 [ ] 后续增加图箱 [ ] 后续增加...
由于jq的cookie插件已经放弃维护了，其团队改为js-cookie在github上进行新的开源分享。 地址为：https://github.com/js-cookie/js-cookie 下载到引用的js文件后引用即可。 调用方法： //设置 Cookies.set(name,value,{expires: time, path: '/'}); //其中value的值支持对象的形式传入 var box = { a = 1, b = 2 } Cookies.set(name,box,{expires: time, path: '/'}); //虽然支持传入，但是调用的时候需...
之前看过一个主题，忘记是谁的了，他的首页轮播特别好看，当时我还天真的以为他的轮播的背景色是自动获取的，为此还特意自己去看了下自动获取图片平均色，现在学了jq后尝试性仿写了一个，因为找不到原来主题的地址，所以大部分都是凭借自己的印象做的，有能力者可以自行移植到typecho主题上。 先上图： 响应式预览： 功能特性： [x] 采用jquery 3.4.1 [x] 图片预加载 [x] 自动提取对应的内容 [x] 增加自动轮播功能 [x] 可以自行移植到主题上使用 [x] 响应式功能完善，只是320分辨率及以上设备 演示地址 轮播图demo
普通切换效果 html代码： <div class="box"> <ul> <li><a href="#">佳能<i>(30440)</i></a></li> <li><a href="#">索尼<i>(30440)</i></a></li> <li><a href="#">三星<i>(30440)</i&g...
没有更多了
最近评论