图是我目前主题使用的样式，但是插件不带任何ui样式，他只有三个参数选项，通过传入的success函数进行天气数据对象的操作。更新2020-2-25新增高德ip定位，增加准确性！参数参数类型说明baidukeystring百度普通ip定位开发者keyamapkeystring高德天气开发者keysuccessfunction接受一个参数，该参数为返回的天气数据对象，具体可以查看高德天气说明我们先看下success接受的data是什么东西可以看到他就是一个键值对的对象，可以通过点方法调用到对应得值。调用方法 $.reachweather({ baidukey: '百度开发者...
了解了一下jq的移动端框架，因为年代久远，让我怀念曾经的时代，是何其的辉煌。首先由于年代久远，jq的版本需要使用1.0.1版本，然后下载jquery.mobile - 1.4. 5.zip，里面会有很多文件，我们需要拿两个主要文件，还有图片就行，文件分别为：jquery.mobile-1.4.5.min.cssjquery.mobile-1.4.5.min.js一个css文件，一个js文件，然后引入顺序为，css，jq，jq.mobile使用方法：通过自定义的元素属性来配置，基本结构如下<div data-role="page"> <div ...
之前一直用的懒加载，也就是对同一个img元素做操作，通过load事件判断图片资源是否加载完毕然后替换src链接，但是今天我不想这么做了，这么做要写太多的代码，我想有没有纯css就能解决的办法。突然我想到以前逛别人博客的时候遇到的一个情况，就是他的图片是先高斯模糊的，然后再慢慢变得清楚，为此我想到了一种情况，也是用js判断，就是需要一张很小的缩略图，然后这个缩略图拉伸到和原图一样的大小显示，然后这个图浮动再原图上方，并且做高斯模糊处理，当大图load加载完毕，小图就做透明渐变直到display：none，但是这样也太麻烦了，不是我需要的，我需要的是纯css。于是我把目光放到了qq空间上，q...
手机端只要有输入框,弹出虚拟键盘后,一般来说都会压缩整个页面的高度,这就导致了一个问题,如果浮动于底部的标签就会被压上来,以及一些根据页面高度百分比定位的元素错位,解决这个问题目前我就只有一个办法: 固定整个页面的高度在页面每次加载后获取window的innerHeight高度,然后手动给body设置这个固定的px值,并将这个值储存起来,然后再加一个window的resize事件,当页面被压缩,该事件就会触发,此时我们就判断,如果此时的windw的innerHeight高度小于之前的值,那么就将浮动底部的元素隐藏起来.注意window.innerHeight和document.body....
这个问题一直困扰了我很久了,之前我做手机端侧栏nav的时候也会出现这个问题,因为不影响使用,也暂时没找到处理的办法,索性就没管了,今天尝试了几次方式,发现通过css设置就很很完美的解决的这个问题.首先这个问题一般都是因为我们阻止的touch事件导致的,谷歌为了让滑动能够顺滑,即便我们阻止了默认行为也是滑动的,所以才会出现这个错误.错误提示:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See解决办法直接给body元素...
ios端他自己有一个双击空白区域会自己放大缩小视窗,我怀疑就是这个功能导致dblclick无法正常触发,于是只能通过单次cilick来判断了.当第二次click的触发时间小于400ms说明是双击,于是通过创建时间戳进行对比. let lastClickTime = 0; let clickTimer; $('#body').on("click", e => { let nowTime = new Date().getTime(); if (nowTime - lastClickTime < 400) { ...
今天按着书写代码的时候发现一个问题，margin负值居然无法拉伸元素，在我的理解里margin四个值都为负值的时候是可以拉伸元素的。为此我还特意百度了下，也没找到什么有价值的信息，于是自己测试了下。当元素为block话的时候，也就是正常水平流状态时，使用margin负值是可以拉伸的，但是，当你的元素设置了宽高，那么负值就不能拉伸了。他会以top和left两个方向做位置偏移。而： position: absolute; top: 0; bottom: 0; left: 0; right: 0;这种状态元素也可以看做为一个block元素，正常的水平流状态。也能用margin负值拉伸！...
这里需要使用到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...
找了好几个放大镜插件发现全是老旧的，新版jq取消了很多东西，所以导致以前的都无法使用了，索性就自己写了一个新的放大镜插件。预览图：使用教程html结构<a href="images/01.jpg" class="jqzoom" title=""> <img src="images/small_01.jpg" title="迷你图片"> </a>通过给a元素一个class为jqzoom的钩子，然后添加一个href属性...
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] 响应式结构支持32...
如果要在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?callbac...
以前写静态站点的时候一直想要一个图片的站点，但是又不想弄成个本地的，个人又懒得更新，这次ajax尝试使用api来获取别人分享的图片，为此就有了这个页面。提供了诸多筛选条件，分类，排序，图片px大小，比例，色系，后续有能力再加上搜索关键词，下一步就是加上图箱，我要想一个好一点的图箱办法，然后支持后续更新升级，长期使用，以前写的有点简陋。不多说，上图:功能详解：[x] 无刷新加载图片[x] 跨域[x] 丰富的筛选条件[x] 支持翻页，因为是ajax刷新，目前固定6页的页值，下一页可以无限，只要还有内容就可以一直下一页[x] 响应式结构[ ] 后续增加图箱[ ] 后续增加指定跳转到某一页Dem...
由于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="...
使用Obejct.create()方法继承的原型和传统的new方法是一样的，但是又有些不同，因为create()支持第二个参数，第一个参数往往是父类的prototype，比如Obejct.create(Box.prototype);这是正常的对一个Box构造函数的原型继承。Obejct.create本身会创建一个新的对象并继承Box.prototype原型然后返回该新建的对象，但是还有一种情况是这样的：var Box = { name : '666'; } var o = Obejct.create(Box.prototype);如果这样写，就会报错，Box实际...
最近评论