Covering-Bad演示5种图片对比效果

Covering-Bad演示5种图片对比效果

Covering-Bad 是一个可拉动大小的元素,覆盖在原有的元素上面,从而两者进行对比。腾讯用此插件就做了一个地图对比的效果,点击查看地震专题对比http://news.qq.com/photon/tpyk/jqvs.htm。

淘建站为您提供更多_图片代码_图片插件_对比_compare,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 174 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

HTML

首先在.covered加上对比前的图片属性data-passive,和对比后的data-active

<div class="covered" data-passive="images/2.jpg" data-active="images/1.jpg">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

jQuery

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

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/236.html
Covering-Bad演示5种图片对比效果 希望对你有帮助,感谢您的支持!
  • js代码点击添加多个产品对比功能

    js代码点击添加多个产品对比功能

  • js图片修改前后对比代码

    js图片修改前后对比代码

  • jQuery分割线拖拽照片前后对比

    jQuery分割线拖拽照片前后对比

  • bootstrap底部弹出产品对比

    bootstrap底部弹出产品对比

  • 原生js代码制作右侧漂浮的js商品对比效果

    原生js代码制作右侧漂浮的js商品对比效果

  • twentytwenty - 图片对比插件

    twentytwenty - 图片对比插件

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2