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

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

 5838  102  查看评论 (1)
分享到微信朋友圈
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")
    }
});
相关插件-悬停,图片展示

CSS 3D动画字体翻转模仿开门效果

CSS 3D动画字体翻转模仿开门效果 字体翻转模仿开门效果
  悬停
 24620  320

Css菜单悬停效果

一些菜单链接悬停效果为您的灵感, 使用CSS和Javript创建单个字母动画。
  悬停
 22713  303

悬停显示图片

超炫酷鼠标悬停显示图片
  悬停
 20120  325

很酷的鼠标悬浮动画

很酷的鼠标悬停三维倾斜动画,提供了8种效果
  悬停
 28566  483

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

    袁爱一 0
    2020/9/25 14:31:52
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复