jQuery图片对比显示

                所属分类?#22909;教?图片展示

                 7372  77  查看评论 (0)
                分享到微?#25490;?#21451;圈
                X
                jQuery图片对比显示 ie兼容6

                使用方法

                 引入css和jQuery

                <link rel="stylesheet" href="./css/base.css">
                <script src="http://www.xunoa.icu/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;
                    // 默?#26174;?#22270;最小显示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');
                    }
                });
                相关插件-图片展示

                jQuery鼠标滚轮放大缩小查看图片(原创)

                使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
                  图片展示
                 24324  145

                14种炫酷堆叠卡片切换动画特效

                14种炫酷堆叠卡片切换动画特效
                  图片展示
                 23536  250

                JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

                fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
                  图片展示
                 29734  208

                jQuery加vue 3D盒子旋转展示

                3D旋转盒子,全景展示,可选择图片,设置宽高
                  图片展示
                 13632  122

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

                取消回复
                快3倍投资金计划

                                            35选7走势图 48减2真能算出下期平码吗 北京赛车pk拾前五技巧杰西 河北快3预测分析收卷机 极速快3开奖记录官网 青海快3彩票控 彩票开奖结果18102 混合过关赔率怎么计算 中超2014赛程 刘伯温一码中特 彩票书籍 广东时时彩怎么赚钱吗 cba啦啦队黄奕辉 j联赛官方网站 竞猜篮彩混合过关