木灵鱼儿 1 年前 实例

10天目标计划

学习scss 已完成

3
4

jQ插件-thickImg大图查看器

这里需要使用到jquery-ui的position效果,所以需要引入jq-ui的js文件。通过特定的class名来进行区分,然后js加上对应的效果。做这个主要是他这个ui挺简洁的,以后说不定用的到,反正不是很难,就花点时间做了个插件。预览图:使用教程html<a href="images/02.jpg" title="图片信息" class="thickImg"> <img src="images/look.gif" alt="查看大图"> &l...

0
0
jQ插件-thickImg大图查看器

jQ插件-jqzoom图片放大镜

找了好几个放大镜插件发现全是老旧的,新版jq取消了很多东西,所以导致以前的都无法使用了,索性就自己写了一个新的放大镜插件。预览图:使用教程html结构<a href="images/01.jpg" class="jqzoom" title=""> <img src="images/small_01.jpg" title="迷你图片"> </a>通过给a元素一个class为jqzoom的钩子,然后添加一个href属性...

0
0
jQ插件-jqzoom图片放大镜

jq-ui 滑动验证

自己尝试写了两个滑动验证的效果,不多说,上图:demo 地址滑动验证-拼图滑动验证-滑动

27
0
jq-ui 滑动验证

快递信息查询 ajax+api

依旧采用ajax配合阿里云api来获取快递信息,支持自动判断快递公司,初次对接,json部分筛选好做,就是整体的事件判断太麻烦了,快递100的网页还可以通过快递单号先做一个本地预判,这个主要他有大数据分析,有数据库支持,我这边没这个基础,不然也能做,他无非就是分析多少位,开头什么数字,结束什么数字,开头是什么字母,为此我尝试的为顺丰加了一个单独预判,就是单号开始输入sf,大小写都能识别为顺丰。瞬间被用完100次免费查询额度,我还没体验几次呢,无奈续费了下api不多说,上图:demo地址查看功能介绍[x] 采用html5+css3构建[x] 使用jq v3.4.1[x] 响应式结构支持32...

0
2
快递信息查询 ajax+api

Ajax壁纸站点(跨域)

以前写静态站点的时候一直想要一个图片的站点,但是又不想弄成个本地的,个人又懒得更新,这次ajax尝试使用api来获取别人分享的图片,为此就有了这个页面。提供了诸多筛选条件,分类,排序,图片px大小,比例,色系,后续有能力再加上搜索关键词,下一步就是加上图箱,我要想一个好一点的图箱办法,然后支持后续更新升级,长期使用,以前写的有点简陋。不多说,上图:功能详解:[x] 无刷新加载图片[x] 跨域[x] 丰富的筛选条件[x] 支持翻页,因为是ajax刷新,目前固定6页的页值,下一页可以无限,只要还有内容就可以一直下一页[x] 响应式结构[ ] 后续增加图箱[ ] 后续增加指定跳转到某一页Dem...

0
0
Ajax壁纸站点(跨域)

网页换肤(cookie)

由于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: '/'}); //虽然支持传入,但是调用的时候需要进行j...

0
1
网页换肤(cookie)

jq自动轮播v1.2

之前看过一个主题,忘记是谁的了,他的首页轮播特别好看,当时我还天真的以为他的轮播的背景色是自动获取的,为此还特意自己去看了下自动获取图片平均色,现在学了jq后尝试性仿写了一个,因为找不到原来主题的地址,所以大部分都是凭借自己的印象做的,有能力者可以自行移植到typecho主题上。先上图:响应式预览:功能特性:[x] 采用jquery 3.4.1[x] 图片预加载[x] 自动提取对应的内容[x] 增加自动轮播功能[x] 可以自行移植到主题上使用[x] 响应式功能完善,只是320分辨率及以上设备演示地址轮播图demo

0
10
jq自动轮播v1.2

select下拉列表移动

下拉列表平时遇到的少,这里做个笔记先,主要功能就是从左边的select1中将选中的option元素移动到右边的select2中去,其实也很简单,主要是涉及到如何筛选选中的,然后使用到新的一个属性方法prop()。html:<div class="centent"> <select name="" id="select" multiple style="width: 100px;height:160px;"> <option value="1"...

0
0
select下拉列表移动
加载中