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. Ubuntu中QT使用FFmpeg的奇怪问题

    FFmpeg都已经编译安装好了,QT的程序中调用av_register_all却总是在链接阶段报错,经过长时间的摸索,发现时静态链接库的问题,网上给出的答案都只能解决部分问题,所需的全部链接库如下: ...

  2. [原]Android打包之跨平台打包

    Android自动打包流程详细图: 在前面一些博客我们知道了如何通过命令行打包,如何通过Eclipse打包,如何通过编写shell脚本来进行打包,但是这些都不能很好的跨平台进行打包. 因Python本 ...

  3. android手势创建及识别

    使用一些浏览器或者输入法应用时会有一些手势操作,还可以自定义手势.这些神奇的操作是怎么做的呢?这一篇重点记录手势的识别和创建.这篇的内容使用到的是android.gesture包,具体的例子参考的是S ...

  4. Xcode 中关于"#"的小知识

    在代码中使用Autolayout时,大家都会使用NSDictionaryOfVariableBindings这个宏,这个宏可以生成一个变量名到变量值映射的Dictionary.比如NSDictiona ...

  5. symfony安装使用

    symfony是一个强大的具有DI特性的框架,目前比较流行的php开发框架Drupal,Laravel底层都是使用了symfony. 想了解symfony更多内容,传送门 安装symfony很简单,一 ...

  6. AssetBundle系列——游戏资源打包(一)

    将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内容资源assetbundle(2)资源维护列表,包含每个资源的名字(完整路径名)和对应的版本号[资源名 ...

  7. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  8. [IR] Probabilistic Model

    If user has told us some relevant and some irrelevant documents, then we can proceed to build a prob ...

  9. 浅析LRU(K-V)缓存

    LRU(Least Recently Used)算法是缓存技术中的一种常见思想,顾名思义,最近最少使用,也就是说有两个维度来衡量,一个是时间(最近),一个频率(最少).如果需要按优先级来对缓存中的K- ...

  10. TOGAF:企业信息化复杂吗?

    本文更新版本已挪至:http://www.zhoujingen.cn/blog/2666.html -------------------- 在与人交流TOGAF的时候,离不开企业信息化,而信息化又离 ...