随笔分类 - jQuery插件
摘要：前言：貌似以前自己也写过图片懒加载插件，但是新公司使用的是jQuery.lazyload插件，为了更好的运用，自己还是把源码看了遍，分别记录了如何使用，插件原理，各个配置属性的完整解释，demo实例，源码分析(较简短)，源码分析可以配合使用，配置属性，原理进行阅读，如需转载，请注明出处博客园 华子y...
阅读全文
摘要：一、前言：上一篇随笔中已经把拖动程序完成了，这篇主要把缩放程序完成，后面合并后可以做成一个图片裁剪的功能 简易缩放程序DEMO：http://jsfiddle.net/UN99R/ 限制缩放程序DEMO：http://jsfiddle.net/kHWQZ/ 二、设计思路：1、在一个可以缩放元素中，共有8个触发点(上、下、左、右、左上、右上、左下、右下)，首先分别设置好它们的CSS属性cursor值。 2、同拖放程序一样，在触发点上绑定鼠标按下事件，在文档(document)上绑定鼠标移动、弹起事件处理程序，在移动事件中，完成拖放元素css的操作， ...
阅读全文
摘要：一、前言最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点，用于固定定位，然后在复制HTML，粘贴在页面的开发代码中，就是这么一个功能，实现了很多遍，都没有做好，不得已采用了jQuery.fn.draggable插件，在接触一些资料和别人的思路，今天终于把这个拖动功能给完善了，下面就来看看它的实现DEMO1：http://jsfiddle.net/Jj9qA/4/DEMO2:http://jsfiddle.net/gUYdg/1/二、设计思路在拖动元素上绑定鼠标按下事件，在文档对象中绑定鼠标移动，鼠标弹起事件；为什么不把三个事件都绑定在拖动元素上，这是因为鼠标移动太快时，鼠标移动和弹起
阅读全文
摘要：一、前言前言：最近圣诞节来临，需要在页面上应用一个雪花飘落的效果，做之前产品经理给了我网络上的一个demo，地址是http://demo.lanrenzhijia.com/demo/1225/sd/，预览了一下，效果不错，但是性能可以再优化，源码中使用setInterval重复定时器，dom在不停地插入移除，这里主要优化这两个地方，使用setTimeout替换setInterval，减少页面dom的重排，其他地方可以自己调整。二、应用实例demo/** * component: jQuery.snowflake 2013/12/19 华子yjh * invoking: jQuery.snowf
阅读全文
摘要：一、前言当一个页面中请求的图片过多，而且图片太大，页面访问的速度是非常慢的，对用户的体验非常不友好；使用图片懒加载，可以减轻服务器的压力，增加页面的访问量，这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad；使用该组件应在img标签中设置一个imglazyload-src属性，存放图片地址。二、应用实例demo/** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(options) * // 配置对象 options = { container...
阅读全文
摘要：一、先附上democontenteditable ...
阅读全文
摘要：一、前言：最近要实现一个元素拖放效果，鼠标拖动元素并且定位元素，首先想到的是HTML5中的拖放，在HTML5中，有一个draggable属性，且有dragstart, dragover, drop等事件，主要是通过event.dataTransfer对象方法，在dragstart事件中设置数据event.dataTransfer.setData(); 在drop事件中获取数据event.dataTransfer.getData();但是它并不能实现元素的实时拖放效果，因此还是需要用鼠标事件来模拟元素的拖放。二、实例示图三、实现原理： 1、思路：鼠标依次触发mousedown， mousemov
阅读全文
摘要：需求示例：一、插件API1、插件使用$.slide( container, contentCls, triggerCls [,config] );2、必选参数container: selector, // 外围盒子选择器contentCls: selector, // 内容面板父容器ClassNametriggerCls: selector, // 触发器父容器ClassName3、config配置可选参数，例 :{ autoplay: true, // 是否自动轮播，默认false delay: 4000, // 自动轮播延迟时间，默认4000，单位毫秒 interval: 4000,...
阅读全文