jQuery图片对比显示

所属分类:媒体-图片展示

 24718  299  查看评论 (0)
分享到微信朋友圈
X
jQuery图片对比显示 ie兼容6

使用方法

 引入css和jQuery

<link rel="stylesheet" href="./css/base.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></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>

js

$('.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');
    }
});
相关插件-图片展示

jquery3D旋转相册

jquery3D旋转相册
  图片展示
 60229  504

jquery 360度旋转插件UIMIX.fullview

360度旋转图片展示jquery插件UIMIX.fullview
  图片展示
 44637  374

HTML5-CSS3图片过滤归类应用

通过点击不同类型图片按钮,可以选择展示不同类型的图片,共有三种展现方式,可以对不同图片进行归类
  图片展示
 36263  346

焦点效果

类似于百叶窗的效果
  图片展示
 35421  362

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复