jQuery图片对比显示

查看演示立即下载

插件描述：通过移动分割线来对比展示图片在美化前后的区别（仿照魅族手机详情页展示）

使用方法

引入css和jQuery

1 2	`<link` `rel="stylesheet"` `href="./css/base.css">` `<script` `src="/"></script>`

html主要使用div浮动层，通过控制上层div宽度实现对比效果。

<div class="section">
    <div class="img-box">
        <div class="part-l">
            <div class="img-before">
                <img src="./imgs/before.jpg" alt="">
            </div>
        </div>
        <span class="toolbar"></span>
        <div class="part-r">
            <div class="img-after">
                <img src="./imgs/after.jpg" alt="">
            </div>
        </div>
        <div class="tags">
            <a href="#">Before</a>
            <a href="#">After</a>
        </div>
    </div>
</div>

$('.img-box').mousemove(function(e) {
    var left = $(".img-box").offset().left;
    // 计算出需要偏移的距离
    var offsetNO = e.pageX - left;
    // 默认原图最小显示200px，最大显示1100px
    if (offsetNO < 200) {
        $('.part-l').width(200);
        $('.toolbar').css('left', '200px');
    } else if (offsetNO > 1100) {
        $('.part-l').width(1100);
        $('.toolbar').css('left', '1100px');
    } else {
        $('.part-l').width(offsetNO);
        $('.toolbar').css('left', offsetNO + 'px');
    }
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：在线教育html5响应式后台管理模板
下一个特效： jQuery模拟手机虚拟键盘