图片左右旋转及左右切换

news/2024/7/11 1:01:53 标签: js, jquery

pc电商图片旋转及切换

                        <div class="media-group" node-type="media_group_prev_2025718">
                            <ul class="clearfix">
                                <li class="bigVideo on" data-url="http://.iqiyi.com.cn/player250527_1.html?v=2020#nohits&h=500"><img src="https://img.300hu.com/4c1f7a6atransbjngwcloud1oss/0295bcdd301496928930635777/imageSampleSnapshot/1586618488_851263773.100_1076.jpg" alt=""><span class="video-icon"></span></li>
                                <li class="bigcursor" action-target="media_slide_box_2025718" idx="0"><img node-type="small" data-middleurl="//pro-fd.-img.com.cn/t_s660x660/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg" data-bigurl="//pro-fd.-img.com.cn/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"
                                        width="120" height="90" src="//pro-fd.-img.com.cn/t_s120x90c5/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"><span class="loading hide"></span></li>
                                <li class="bigcursor" action-target="media_slide_box_2025718" idx="1"><img node-type="small" data-middleurl="//pro-fd.-img.com.cn/t_s660x660/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg" data-bigurl="//pro-fd.-img.com.cn/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"
                                        width="120" height="90" src="//pro-fd.-img.com.cn/t_s120x90c5/g6/M00/0C/07/ChMkKV9tXK6IAGj2AAB_myLohd8AACxhAGSGTMAAH-z071.jpg"><span class="loading hide"></span></li>
                            </ul>
                        </div>
<div class="media-expand clearfix" node-type="media_slide_box_2025718">
                            <div class="media-expand-pic" data-rotation="0"></div>
                            <div class="media-expand-video"></div>
</div>                            

 .media-group li {
    position: relative;
    float: left;
    width: 48px;
    height: 48px;
    margin: 0 10px 0 0;
    overflow: hidden;
    outline: 1px solid #eeeeee;
}
 .media-group li.on {
    outline: 2px solid #438eee;
}
 .media-group li img {
    width: 48px;
    height: 48px;
    display: block;
}
 .media-group img {
    vertical-align: top;
}
.media-expand {
    position: relative;
    margin: 13px 0 10px;
}
.media-expand .media-expand-pic {
    float: left;
    position: relative;
}
.media-expand {
    position: relative;
    margin: 13px 0 10px;
}

.media-expand .media-expand-pic {
    float: left;
    position: relative;
}

.media-expand .pic-op {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 6;
}

.media-expand .pic-op a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .5);
    margin-right: 6px;
    color: #fff;
}

.media-expand .pic-op i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background: url(../img/pic-roate-icon.png) no-repeat;
    vertical-align: middle;
}

.media-expand .pic-op .sprite-turn-left {
    background-position: 0 0;
}

.media-expand .pic-op .sprite-turn-right {
    background-position: -10px 0;
}

.media-expand .pic-op .show-pic {
    background-position: 0 -10px;
}

.media-expand .cursor-prev,
.media-expand .cursor-small,
.media-expand .cursor-next {
    width: 100px;
    position: absolute;
    height: 100%;
    top: 0;
    background: url(about:blank) fixed;
    z-index: 3;
}

.media-expand .cursor-prev {
    left: 0;
    cursor: url(http://icon.-img.com.cn/products/v3/pic_prev.cur), auto !important;
}

.media-expand .cursor-next {
    right: 0;
    cursor: url(http://icon.-img.com.cn/products/v3/pic_next.cur), auto !important;
}

.media-expand .cursor-small {
    width: 100%;
    left: 0;
    cursor: url(http://icon.-img.com.cn/products/v3/small.cur), auto !important;
    z-index: 2;
}


$(function() {
    if ($('#_j_comment_list').length <= 0) return;
    var index = 0;
    var current = 0; //图片旋转
    var picLength;
    $('#_j_comment_list').delegate('.media-group .bigcursor', 'click', function() {

        var picsSrc = $(this).find('img').attr('data-middleurl');
        var prev = '<div class="cursor-prev J-sprite-prev" style="display: block;"></div>';
        var middle = '<div class="cursor-small J-hide-big-show"></div>';
        var next = '<div class="cursor-next J-sprite-next"></div>';
        index = $(this).attr('idx');
        picLength = $(this).parent().find('.bigcursor').length;
        if (index == 0) {
            prev = '';
        }
        if (index == picLength - 1) {
            next = '';
        }

        var bigImgUrl = $(this).find('[node-type=small]').attr('data-bigurl');
        if ($(this).parents('.media-group ').find('li').is('.bigVideo')) {
            var len = $(this).parents('.media-group ').find('.bigVideo').length;
            index = $(this).index() - len;
        } else {
            index = $(this).index();
        }

        $(this).parents('.media-group').siblings('.media-expand').removeClass('hide').find('.media-expand-pic').css('display', 'block').html('<div class="pic-op"> <a class="turn-left J-turn-left" href="javascript:;" target="_self"><i class="sprite-turn-left"></i>左转</a> <a class="turn-left J-turn-right" href="javascript:;" target="_self"><i class="sprite-turn-right"></i>右转</a> <a href="' + bigImgUrl + '"><i class="show-pic"></i>查看原图</a> </div><img src="' + picsSrc + '">' + prev + middle + next);
        $(this).parents('.media-group').siblings('.media-expand').find('.media-expand-video').css('display', 'none');
        var expandBox = $(this).parents('.media-group').siblings('.media-expand').find('.media-expand-pic');
        current = 0; //重置旋转
        //重置样式添加项
        expandBox.width('auto');
        expandBox.height('auto');
        expandBox.attr('data-rotation', 0);
        $(this).addClass('on').siblings('li').removeClass('on');


    })

    function getCursorSite(imgElement) {
        var picArr = [];
        var expandBox = imgElement.parents('.media-expand');
        var bigcursorBoxs = expandBox.siblings('.media-group').find('.bigcursor');
        var prev = '<div class="cursor-prev J-sprite-prev" style="display: block;"></div>';
        var middle = '<div class="cursor-small J-hide-big-show"></div>';
        var next = '<div class="cursor-next J-sprite-next"></div>';
        picLength = bigcursorBoxs.length;
        imgElement.parents('.media-expand').siblings('.media-group').find('.bigcursor').each(function(i, e) {
            picArr.push($(e).find('img').attr('data-middleurl'));
        })
        if (index == 0) {
            prev = '';
        }
        if (index == picLength - 1) {
            next = ''
        }
        bigImgUrl = $(bigcursorBoxs[index]).find('[node-type=small]').attr('data-bigurl');
        imgElement.parent('.media-expand-pic').html('<div class="pic-op"> <a class="turn-left J-turn-left" href="javascript:;" target="_self"><i class="sprite-turn-left"></i>左转</a> <a class="turn-left J-turn-right" href="javascript:;" target="_self"><i class="sprite-turn-right"></i>右转</a> <a href="' + bigImgUrl + '" ><i class="show-pic"></i>查看原图</a> </div><img src="' + picArr[index] + '">' + prev + middle + next);
        expandBox.siblings('.media-group').find('.bigcursor').eq(index).addClass('on').siblings('li').removeClass('on')
        expandBox.find('.media-expand-pic').width('auto');
        expandBox.find('.media-expand-pic').height('auto');
    };

    //  上一张
    $(document).delegate('.J-sprite-prev', 'click', function(e) {
            index = $(this).parents('.media-expand').siblings('.media-group').find('.bigcursor.on').attr('idx');
            console.log(index, 'index');

            index--;
            console.log(index, 'index');

            getCursorSite($(this));

        })
        // 中间隐藏
    $(document).delegate('.J-hide-big-show', 'click', function(e) {
            var expandBox = $(this).parents('.media-expand');
            $(this).parents('.media-expand-pic').hide();
            expandBox.siblings('.media-group').find('li').removeClass('on');
        })
        // 下一张
    $(document).delegate('.J-sprite-next', 'click', function(e) {
        index = $(this).parents('.media-expand').siblings('.media-group').find('.bigcursor.on').attr('idx');
        console.log(index, 'index');
        index++;
        getCursorSite($(this));

    })

    // 图片左旋转
    $(document).delegate('.J-turn-left', 'click', function(e) {
            e.stopPropagation();
            var expandBox = $(this).parent().parent();
            var rotation = parseInt(expandBox.attr('data-rotation'));
            rotation = rotation - 1 < 0 ? 3 : rotation - 1;
            expandBox.attr('data-rotation', rotation);
            current = (current - 90) % 360;
            var imgElement = $(this).parent().siblings('img');
            imgElement.css('transform', 'rotate(' + current + 'deg)');
            getPicSeat(imgElement);
        })
        // 图片右旋转
    $(document).delegate('.J-turn-right', 'click', function(e) {
            e.stopPropagation();
            var expandBox = $(this).parent().parent();
            var rotation = parseInt(expandBox.attr('data-rotation'));
            rotation = rotation + 1 > 3 ? 0 : rotation + 1;
            expandBox.attr('data-rotation', rotation);
            current = (current + 90) % 360;
            var imgElement = $(this).parent().siblings('img');
            imgElement.css('transform', 'rotate(' + current + 'deg)');
            getPicSeat(imgElement);
        })
        // 包裹图片盒子及图片样式添加
    function getPicSeat(imgElement) {
        var expandBox = imgElement.parent();
        var newimgElement = expandBox.find('img');
        var rotation = parseInt(expandBox.attr('data-rotation'));
        var w = newimgElement.width();
        var h = newimgElement.height();
        var expandBoxWidth,
            expandBoxHeight;
        var mTop, mLeft;
        if (rotation == 1 || rotation == 3) {
            if (w > h) {
                mTop = (h - w) / 2 < 0 ? -((h - w) / 2) : (h - w) / 2;
                mLeft = (h - w) / 2 > 0 ? -((h - w) / 2) : (h - w) / 2;
            } else {
                mTop = (h - w) / 2 < 0 ? ((h - w) / 2) : -(h - w) / 2;
                mLeft = (h - w) / 2 > 0 ? ((h - w) / 2) : -(h - w) / 2;
            }
            expandBoxWidth = h;
            expandBoxHeight = w;
        } else {
            mTop = 0;
            mLeft = 0;
            expandBoxWidth = w;
            expandBoxHeight = h;
        }
        expandBox.width(expandBoxWidth);
        expandBox.height(expandBoxHeight);
        imgElement.css('margin-top', mTop);
        imgElement.css('margin-left', mLeft);
    }
})





// 视频
$('#_j_comment_list').delegate('.media-group .bigVideo', 'click', function() {
    var videoSrc = $(this).attr('data-url')
    var $video = $('<iframe width="100%" height="500" src="' + videoSrc + '" frameborder="0" allowfullscreen="true" scrolling="no"></iframe>')
    $(this).parents('.media-group').siblings('.media-expand').removeClass('hide').find('.media-expand-video').css('display', 'block').html($video);
    $(this).parents('.media-group').siblings('.media-expand').find('.media-expand-pic').css('display', 'none');
    $(this).addClass('on').siblings().removeClass('on')
})

http://www.niftyadmin.cn/n/734735.html

相关文章

linux下mysql5.7的安装教程_Linux虚拟机下mysql 5.7安装配置方法图文教程

linux下mysql5.7的安装教程_Linux虚拟机下mysql 5.7安装配置方法图文教程

记录一下Linux虚拟机下MySQL安装配置方法一、 下载mysql5.7http://mirrors.sohu.com/mysql/MySQL-5.7/Linux下载:输入命令&#xff1a;wget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-5.7.17-linux-glibc2.5-x86_64.tar.gz二、建立用户&#xff0c;以及mysql的目录1、建立…
阅读更多...
makefile-- 自动生成依赖关系 示例

makefile-- 自动生成依赖关系 示例

自动生成依赖关系 1、编译行为带来的缺陷 预处理器将头文件中的代码直接插入源文件编译器只通过预处理后的源文件产生目标文件因此&#xff0c;规则中以源文件为依赖&#xff0c;命令可能无法执行示例1 观察以下makefile文件是否正确:当修改func.h中宏HELLO的内容后&#xff0c…
阅读更多...
url路径参数转换为对象方法

url路径参数转换为对象方法

let url https://m.baidu.com/s?word%23vivoS9%23&topic_id161395695626718677&satopicamis&sfrom1023524a;let json:any {};let parms url.split(?)[1].split(&);parms.forEach((item: any, index: number) > {json[item.split()[0]] item.split()[…
阅读更多...
mysql索引与数据分开存储_空间数据与索引分开存储管理

mysql索引与数据分开存储_空间数据与索引分开存储管理

在我们使用ArcSDE对矢量数据和栅数据进行存储的时候&#xff0c;有必要将相关的表及索引分开存储。也就是说当用户访问一张表&#xff0c;首先会访问表的索引&#xff0c;然后根据索引来快速定位访问表的内容&#xff0c;那么表与表索引就会占据大量的磁盘I/O资源&#xff0c;从…
阅读更多...
简单的几行代码就可以实现Python数据预处理提速6倍！

简单的几行代码就可以实现Python数据预处理提速6倍！

Python是所有机器学习的首选编程语言。它易于使用&#xff0c;并拥有许多很棒的库&#xff0c;可以轻松地处理数据。但是当我们需要处理大量数据时&#xff0c;事情就变得棘手了......点击关注&#xff0c;私信发送“资料”“Python”就可获得Python学习资料“大数据”这个词通…
阅读更多...
工具类 提取富文本文字

工具类 提取富文本文字

/* 移除HTML标签代码 */ /* eslint-disable */ function removeHTMLTag (str) {str str.replace(/<\/?[^>]*>/g, ) // 去除HTML tagstr str.replace(/[ | ]*\n/g, \n) // 去除行尾空白// str str.replace(/\n[\s| | ]*\r/g,\n); //去除多余空行str str.replace(/…
阅读更多...
mysql binlog 按时间恢复恢复_mysqlbinlog 恢复数据到任意时间点

mysql binlog 按时间恢复恢复_mysqlbinlog 恢复数据到任意时间点

创建表,插入数据.mysql> create database binlog;mysql> create table bt(id int);mysql> insert into bi values (1);mysql> insert into bi values (2);mysql> insert into bi values (3);mysql> insert into bi values (4);mysql> delete from bt wher…
阅读更多...
滴滴召开司机意见征求会：程维柳青作为一线客服现场听取意见

滴滴召开司机意见征求会：程维柳青作为一线客服现场听取意见

雷帝网 乐天 10月7日报道10月6日下午&#xff0c;十多位司机师傅应邀来到滴滴公司&#xff0c;参加了司机意见征求会。滴滴出行CEO程维、总裁柳青、CTO张博、产品高级副总裁俞军、快捷事业群总经理陈汀及各部门负责人作为滴滴一线客服&#xff0c;现场倾听司机师傅们的声音。意…
阅读更多...
最新文章

Copyright @ 2022~2023