修复仿京东图片放大插件bug(修复原作者bug版)

所属分类:UI,媒体-悬停,图片展示

 13172  165  查看评论 (2)
分享到微信朋友圈
X
修复仿京东图片放大插件bug(修复原作者bug版) ie兼容7

更新时间:2020-08-13 23:29:49

var viewNum = 5; //设置每次显示图片的个数量 
var tempLength = 0; //临时变量,当前移动的长度 
var moveNum = 1; //每次移动的数量 
var moveTime = 150; //移动速度,毫秒 
var moveLength = this.$thumbnailBox_item.eq(0).outerWidth(true) * moveNum; //计算每次移动的长度 
var countLength = (this.$thumbnailBox_item.length - viewNum) * moveLength; //计算总长度,总个数*单个长度
var ov_picL = this.$thumbnailBox_item.length; //获取ul下li的个数 // 原插件是大中小三张图,现改为大中小同时调用一张,省去后台上传时图片还要压缩的烦恼! changeSrouce: function (index, cur_src) {     
this.$smallBox_pic.attr('src', cur_src);
this.$bigBox_pic.attr('src', cur_src);
},
//新增当用户未上传图片时显示状态      
if (ov_picL == 0) {
    self.$thumbnailBox.remove();
    self.$bigBox.remove();
    self.$smallBox_pic.attr('src', 'images/NoneImg.jpg');
    self.$smallBox_mask.remove();
}
//新增当图片<=5张时显示状态,添加禁用按钮样式       
if (countLength <= 5) {
    $(".thumbnail-box a.btn.btn-prev").addClass("btn-prev_disabled");
    $(".thumbnail-box a.btn.btn-next").addClass("btn_next_disabled");
} else {
    $(".thumbnail-box a.btn.btn-next").removeClass("btn_next_disabled")
}
//重点改进点击左右图切换功能,原插件只设置了10张图,且点击一次移动5张; 
//改进后,后台可上传N张图,并且上下按钮点击移动多少张图可随意设置,默认点击一次移动一张图片
//增加切换到第一张和最后一张的按钮显示效果 //点击下一张图       
this.$thumbnailBox_next.click(function() {
    if (tempLength < countLength) {
        if ((countLength - tempLength) > moveLength) {
            self.$thumbnailBox_wrapper.animate({
                marginLeft: "-=" + moveLength + "px"
            }, moveTime);
            tempLength += moveLength;
        } else {
            self.$thumbnailBox_wrapper.animate({
                marginLeft: "-=" + (countLength - tempLength) + "px"
            }, moveTime);
            tempLength += (countLength - tempLength);
        }
    }
    //当图片大于显示个数时,点击下一张按钮即上一张按钮可操作          
    if (countLength > viewNum) {
        $(".btn-prev").removeClass("btn_prev_disabled");
    }
    //当下一张图片为最后一张,下一张按钮不可点击           
    if (tempLength == countLength) {
        $(".btn-next").addClass("btn_next_disabled")
    }
});
//点击上一张图       
this.$thumbnailBox_prev.click(function() {
    if (tempLength > 0) {
        if (tempLength > moveLength) {
            self.$thumbnailBox_wrapper.animate({
                marginLeft: "+=" + moveLength + "px"
            }, moveTime);
            tempLength -= moveLength;
        } else {
            self.$thumbnailBox_wrapper.animate({
                marginLeft: "+=" + tempLength + "px"
            }, moveTime);
            tempLength = 0;
        }
    }
    if (tempLength < countLength) {
        $(".btn-next").removeClass("btn_next_disabled")
    }
    //当上一张图片为第一张,上一张按钮不可点击        
    if (tempLength == 0) {
        $(".btn-prev").addClass("btn_prev_disabled")
    }
});
相关插件-悬停,图片展示

悬停显示图片

超炫酷鼠标悬停显示图片
  悬停
 27429  378

12种CSS3 hover效果插件

非常好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验
  悬停
 59599  488

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果,图片上有简短标题和说明,兼容主流浏览器
  悬停
 32682  424

css鼠标悬停效果,自适应页面大小

网站常用功能展示,css鼠标悬停效果
  悬停
 19417  287

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

    袁爱一 0
    2020/9/25 14:31:52
    牛逼的插件
        夏雨辰0
        2022/10/1 11:48:05
        确实不错
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复