Covering-Bad 是一个可拉动大小的元素,覆盖在原有的元素上面,从而两者进行对比。

在线实例

实例演示1    实例演示2

使用方法

  1. <div class="covered" data-passive="images/2.jpg" data-active="images/1.jpg">
  2. <div class="handle"></div>
  3. <div class="changeable"></div>
  4. </div>
  5. jQuery
  6. $(function() {
  7. $('.covered').coveringBad();
  8. });
复制

参数详解

参数 描述 默认值
marginX 拉手与左右边界的距离 30
marginY 拉手与上下边界的距离 30
setX 左边的位置 30
setY 上边的位置 30
direction 方向,可选 horizontal(水平方向)或 vertical(垂直方向) horizontal

jQuery coveringBad 效果对比的更多相关文章

  1. 腾讯用过的插件jQuery twentytwenty 效果对比

    在线实例 左右对比 上下对比 使用方法 <div class="twentytwenty-container">     <img src="/api/ ...

  2. php开发面试题---jquery和vue对比(整理)

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  3. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  4. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  5. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  6. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  7. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  8. jquery 之效果

    // jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...

  9. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

随机推荐

  1. css3 定义选择器

    引言:CSS样式规则有两个主要部分.选择器决定将格式化应用到哪些元素.声明则定义要应用的格式化. 构造选择器 选择器可以定义五个不同的标准来选择要进行格式化的元素. 元素的类型或者名称.如下所示. h ...

  2. Android开发在路上:少去踩坑,多走捷径

    转自:http://djt.qq.com/article/view/1193   最近一朋友提了几个Android问题让我帮忙写个小分享,我觉得对新人还是挺有帮助的,所以有了这个小分享. 1.目前, ...

  3. 用对 gitignore

    使用 git 做代码管理工具时,设置 gitignore 是必不可少的流程,一些系统或者 IDE 会在目录下生成与项目不相关的文件,而这些文件我们不期望被提交到仓库之中.理解 gitignore 的 ...

  4. 魔兽争霸3 replay 格式

    ******************************************************************************* * WarCraft III Repla ...

  5. Web API 入门系列- 从一个示例开始

    1.新建Web API项目 2.新建bookModel 3.新建book web api 控制器 为了简单方便,演示系统使用内存集合持久化书籍. 4.测试web api 我们怎么方便测试web api ...

  6. 安卓模拟器bluestack 换imei

    有好多种方法,下面介绍2种   第一种方法   通过靠谱助手设置,非常简单.   第二种方法   1.解压 root_20121221文件夹,将Root.fs 覆盖到 win7路径:C:\Progra ...

  7. 自己动手搭建 CAS(Central Authentication Service) 环境,为了单点登录(Single Sign On , 简称 SSO )

    介绍 刚刚搭建 CAS 成功了,现在记录下来,怕以后忘记,同时也给需要帮助的人.CAS 搭建需要服务端和客户端,服务端是 Java 写的,如果自己搭建则需要安装与配置 Java 环境.客户端可以是多种 ...

  8. Caching查看窗口

    闲来无事,做了一个简约的Caching查看窗口,可以方便的查看本地缓存的使用情况: 下面的URL和VersionNum用来查看某个特定资源的特定版本是否存在,分别输入所需信息,点击“检测”,即可在下面 ...

  9. DDD:Strategic Domain Driven Design with Context Mapping

    Introduction Many approaches to object oriented modeling tend not to scale well when the application ...

  10. 自己动手模拟百分百<select>下拉列表

    浏览器默认的下拉确实不好用啊,主要是样式不好修改和统一. (一)下手之前先理清一下<select>的流程: 1.结构:<select> <option value=&qu ...