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. C# WinForm程序打印条码 Code39码1

    做WinForm程序需要打印条码,为了偷懒不想自己写生成条码的程序在网上下载一个标准的39码的字体,在程序里面换上这个条码字体即可打印条码了. 最重要的一点作为记录: 如果想把“123456789”转 ...

  2. php常见小知识总结

    1.如果在函数中 unset()一个全局变量,则只是局部变量被销毁,而在调用环境中的变量将保持调unset() 之前一样的值.如果是想把全局变量清空,用$var = array(),注意在他之前别用u ...

  3. 数轴上从左到右有n个点a[0],a[1]…,a[n-1],给定一根长度为L的绳子,求绳子最多能覆盖其中的几个点。要求算法复杂度为o(n)。

    #include <iostream> using namespace std; int maxCover(int* a, int n, int l) { ; ; ; while(end ...

  4. python 字符串复制

    通过变量来进行赋值 fstr = 'strcpy'sstr = fstrfstr = 'strcpy2'print sstr

  5. Visual Studio与Eclipse与IntelliJ快捷键对比

  6. 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦

    http://css-tricks.com/examples/ShapesOfCSS/

  7. ubuntu使用

    1主机名修改 在Ubuntu系统中永久修改主机名也比较简单.主机名存放在/etc/hostname文件中,修改主机名时,编辑hostname文件,在文件中输入新的主机名并保存该文件即可.

  8. NSNotification Name 最佳写法

    本文主要借探讨NSNotificationName的最佳写法的机会,学习下extern, static, const, #define 和常量指针与指针常量等的特性和用法. 1.NSNotificat ...

  9. 正确理解静态Static关键字

    与其他语言不通,C#没有全局变量和全局函数的感念,C#的所有字段和方法都出现在一个类的上下文中,在C#中与全局字段或函数等价的就是静态字段或方法.“全局字段或方法”与“C#的静态字段或方法”没有功能上 ...

  10. OpenGL开发环境配置-Windows/MinGW/Clion/CMake

    因为某些原因,不想用过于臃肿的VS了,转而使用常用的jetbrains的CLion,Clion沿袭了jetbrans的优良传统,基本代码提示功能还是比较好的,不过就是对于windows不熟悉cmake ...