You are here
js 定义对象
var scrollImg = {
curr:0,
isAnimate:0,
imgData:[],
thumbW:171,
thumbH:115,
prevScreenFun:function(){},
nextScreenFun:function(){},
init:function(){
var _this = this;
_this._w = $(window).width();
_this._h = $(window).height();
_this.showData();
_this.setSize();
_this.currCon($(".imageWrap").eq(0));
_this.active();
},
setSize:function(){
var _this = this;
var e, t, n;
var _w = $(window).width(),
_h = $(window).height();
_w <= 980 && (_w = 980);
/*设置图片外层dom宽高*/
$("#ImageList,.split").each(function(){
$(this).width(_w);
$(this).height(_h);
});
/*设置图片宽高*/
$(".imageWrap").find("img").each(function() {
if (this.src != "") {
if (!this.complete) return;
_this.autoSize(this);
}
});
},
showData:function(e){
var _this = this;
var h = n = "";
h+='<div id="scrollBox">';
n+= '<div class="arrR"></div><div class="arrL"></div>'
+'<div id="thumbWrap" class="thumbWrap">'
+'<div class="loading">';
for (var i = 0; i < _this.imgData.length; i++){
h += '<div class="split imageWrap" imgindex=' + i + ">"
+'<div class="box-middle"><div class="box-inner">'
+'<img _src="' + _this.imgData[i].url + '" />'
+"</div></div></div>";
n += '<a href="javascript:void(0)" class="thumbImg" onclick="imgScrollTo(' + i + ')">'
+'<img src="' + _this.imgData[i].url_litter + '" />'
+"</a>";
}
h+='</div>';
n+='</div></div>';
$("#scrollWrap").html(h);
$("#thumbBox").html(n);
$("#pageNum").find(".totalNum").html(_this.imgData.length);
$("#bottomBox").slideToggle("fast",function(){
$("#thumbWrap .thumbImg").eq(_this.curr).addClass("curr");
$("#thumbWrap img").each(function() {
_this.autoSize(this, _this.thumbW, _this.thumbH);
});
});
},
autoSize:function(dom, w, h) {
var _this = this;
var browserW = w || $(window).width(),
browserH = h || $(window).height();
var obj = $(dom);
var per = (obj.height() / obj.width()).toFixed(2);//toFixed 四舍五入为指定小数位数的数字
browserH / browserW > per ? _this.resizeH(obj, browserW, per) : _this.resizeW(obj, browserH, per)
},
resizeH:function(obj, w, per) {
obj.width(w);
obj.height(w * per);
},
resizeW:function(obj, h, per) {
obj.height(h);
obj.width(h / per)
},
currCon:function(e){
var _this = this;
var t = e.hasClass("imageWrap");
_this.curr = parseInt(e.attr("imgindex"));
$("#pageNum").find(".currNum").html(_this.curr + 1);
$("#descWrap").html("<p>" + _this.imgData[_this.curr].imgcontent + "</p>");
e.prev(".imageWrap").find("img").unbind().load(function() {
$(this).show(), _this.autoSize(this);
});
e.next(".imageWrap").find("img").unbind().load(function() {
$(this).show(), _this.autoSize(this)
});
e.prev(".imageWrap").find("img").attr("src", e.prev().find("img").attr("_src"));
e.next(".imageWrap").find("img").attr("src", e.next().find("img").attr("_src"));
e.prev(".imageWrap").find("img").each(function() {
if (!this.complete) return;
$(this).show(), _this.autoSize(this)
});
e.find("img").unbind().load(function() {
$(this).show(), _this.autoSize(this)
});
e.find("img").attr("src", e.find("img").attr("_src"));
e.find("img").each(function() {
if (!this.complete) return;
$(this).show(), _this.autoSize(this)
});
$("#thumbWrap .thumbImg").removeClass("curr").eq(_this.curr).addClass("curr");
_this.isAnimate = 0;
},
tips:function(e){
var t = $("<div class='tipsAlter'></div>");
if ($(".tipsAlter").length > 0) return;
t.html(e);
t.appendTo($("#ImageList"));
t.fadeIn("fast", function() {
setTimeout(function() {
t.fadeOut("fast", function() {
t.remove()
})
}, 1000)
})
},
nextImg:function(){
var _this = this;
if (!$("#scrollWrap").jcarousel("hasNext")) {
//最后一页
//_this.tips("\u5df2\u7ecf\u662f\u6700\u540e\u4e00\u9875\uff01");
//切换到下一屏内容
_this.nextScreenFun();
return
}
_this.isAnimate=1;
$("#scrollWrap").jcarousel("scroll", "+=1");
$("#thumbWrap").jcarousel("scroll", "+=1");
},
prevImg:function(){
var _this = this;
if (!$("#scrollWrap").jcarousel("hasPrev")) {
//第一页
//_this.tips("\u5df2\u7ecf\u662f\u7b2c\u4e00\u9875\uff01");
//切换到上一屏内容
_this.prevScreenFun();
return
}
_this.isAnimate=1;
$("#scrollWrap").jcarousel("scroll", "-=1");
$("#thumbWrap").jcarousel("scroll", "-=1");
},
active:function(){
var _this = this;
$(window).resize(function(){
_this.setSize();
});
/*图片描述 事件*/
$("#imgDesc").mouseenter(function(e) {
if ($(this).is(":animated")) return;
$("#descWrap").stop().animate({
height: $("#descWrap")[0].scrollHeight + "px"
})
}).mouseleave(function(e) {
if ($(this).is(":animated")) return;
$("#descWrap").stop().animate({
height: "72px"
})
});
$("#thumbWrap").jcarousel();
$("#thumbWrap").jcarousel("reload");
$("#thumbBox").find(".arrL").click(function() {
$("#thumbWrap").jcarousel("scroll", "-=1")
}), $("#thumbBox").find(".arrR").click(function() {
$("#thumbWrap").jcarousel("scroll", "+=1")
});
var e = $("#scrollWrap").jcarousel();
function n(e, t) {
_this.currCon(t.target())
}
window.screenScrollTo = function(t) {
$("#scrollWrap").jcarousel("scroll", t)
},
window.imgScrollTo = function(e, t) {
_this.curr = e;
if (t == "next") {
$("#thumbWrap").jcarousel("scroll", "+=1");
return
}
if (t == "prev") {
$("#thumbWrap").jcarousel("scroll", "-=1");
return
}
$("#thumbWrap .thumbImg").removeClass("curr").eq(e).addClass("curr");
$(".jcarousel").jcarousel("scroll", $(".imageWrap[imgindex=" + e + "]"));
$("#thumbWrap").jcarousel("scroll", e)
};
$("#scrollWrap").on("jcarousel:animateend", n);
$(".jcarousel-control-prev").click(function() {
_this.prevImg();
});
$(".jcarousel-control-next").click(function() {
_this.nextImg();
})
$("#ImageList").on("mousewheel", function(e, t) {
if(!_this.isAnimate){
var s = $(e.target);
if(parseInt($("#scrollWrap").offset().top) == parseInt($(document).scrollTop())){ //只有当图片区域完全在窗口内时才执行操作
t == "1" ? _this.prevImg() : t == "-1" && _this.nextImg();
}
}
});
// $(window).keydown(function(e) {
// e.which == 39 ? _this.nextImg() : e.which == 37 && _this.prevImg()
// });
}
};
/* |xGv00|8515299da31d30f2d09faf63dc0a0e02 */
普通分类: