会python真的可以为所欲为0(回)
398天前
这里还有人吗1(回)
584天前这里还有人吗0(回)
584天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
808天前到处都是羊，不想上班0(回)
888天前
鸽子
0(回)
892天前//电视剧大图滚动 |
(function(jq){ |
var posterTvGrid = function(o, options, data){ |
this.parent = jq("#"+ o); |
this.body = jq("body"); |
if (this.parent.length <= 0) { |
return false; |
} |
|
this.options = jq.extend({}, posterTvGrid.options, options); |
if(typeof(data) !== 'object') return false; |
this.data = data || {}; |
this.reset(); |
//处理页面resize |
var _this = this; |
jq(window).resize(function(){ |
_this.reset(); |
}); |
}; |
posterTvGrid.prototype = { |
reset: function(options){ |
if(typeof(options) == 'object'){ |
jq.extend(this.options, options); |
} |
if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') != -1){ |
this.options.width = 1190; |
}else{ |
this.options.width = 970; |
} |
this.total = this.data.length; |
this.pageNow = this.options.initPage; |
this.preLeft = 0; |
this.nextLeft = this.options.width-530; |
this.preNLeft = -530; |
this.nextNLeft = this.options.width; |
this.pageNowLeft = (this.options.width-640)/2 |
this.drawContent(); |
}, |
drawContent: function(){ |
this.parent.empty(); |
this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"}); |
this.content = document.createElement("DIV"); |
this.content.className = this.options.className; |
this.content.cssText = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;"; |
this.bottomNav = document.createElement("DIV"); |
this.bottomNav.className = "bottomNav"; |
for(var i=1; i<= this.total; i++){ |
var bottomItem = document.createElement("DIV"); |
bottomItem.className = "bottomNavButtonOFF"; |
if(i == this.pageNow){ |
bottomItem.className = "bottomNavButtonOFF bottomNavButtonON"; |
} |
bottomItem.setAttribute("ref", i); |
this.bottomNav.appendChild(bottomItem); |
} |
this.content.appendChild(this.bottomNav); |
this.bannerControls = '<div class="bannerControls"> <div class="leftNav" style="display: block;"></div> <div class="rightNav" style="display: block;"></div> </div>'; |
this.content.innerHTML += this.bannerControls; |
this.contentHolder = document.createElement("DIV"); |
this.contentHolder.style.width = this.options.width + 'px'; |
this.contentHolder.style.height = this.options.height + 'px'; |
|
for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){ |
var contentHolderUnit = document.createElement("DIV"); |
contentHolderUnit.className = "contentHolderUnit"; |
contentHolderUnit.setAttribute("ref", i); |
contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i)); |
var unitItem = '<a href="'+this.data[item].url+'" target="_blank" class="elementLink">'; |
unitItem += '</a>'; |
unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>'; |
unitItem += '<span class="elementOverlay"></span>'; |
unitItem += '<span class="leftShadow"></span>'; |
unitItem += '<span class="rightShadow"></span>'; |
contentHolderUnit.innerHTML = unitItem; |
this.contentHolder.appendChild(contentHolderUnit); |
} |
this.content.appendChild(this.contentHolder); |
this.parent.append(this.content); |
this.parent.css({overflow:'hidden'}); |
this.initContent(); |
this.bind(); |
this.start(); |
}, |
initContent: function(){ |
contentHolderUnit = this.parent.find(".contentHolderUnit"); |
contentHolderUnit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'}); |
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:'640px',height:'270px', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0}); |
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0}); |
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1}); |
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1}); |
|
var pre = this.pageNow > 1 ? this.pageNow -1: this.total; |
var next = this.pageNow == this.total ? 1 : this.pageNow + 1; |
this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '224px', width: '530px', zIndex: 0, marginTop: '23px'}); |
this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4}); |
this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0}); |
this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0}); |
this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '224px', width: '530px', zIndex: 0, marginTop: '23px'}); |
this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4}); |
this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0}); |
this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0}); |
}, |
bind: function(){ |
this.leftNav = this.parent.find(".leftNav"); |
this.rightNav = this.parent.find(".rightNav"); |
this.bottonNav = this.parent.find(".bottomNavButtonOFF"); |
this.lists = this.parent.find(".contentHolderUnit"); |
var _this = this; |
this.parent.mouseover(function(){ |
_this.stop(); |
_this.leftNav.show(); |
_this.rightNav.show(); |
}); |
this.parent.mouseout(function(){ |
_this.start(); |
//_this.leftNav.hide(); |
//_this.rightNav.hide(); |
}); |
|
_this.leftNav.click(function(){ |
_this.turn("right"); |
}); |
_this.rightNav.click(function(){ |
_this.turn("left"); |
}); |
_this.bottonNav.click(function(){ |
var ref = parseInt(this.getAttribute("ref")); |
if(_this.pageNow == ref) return false; |
if(_this.pageNow < ref){ |
var rightAbs = ref - _this.pageNow; |
var leftAbs = _this.pageNow + _this.total - ref; |
}else{ |
var rightAbs = _this.total - _this.pageNow + ref; |
var leftAbs = _this.pageNow - ref; |
} |
if(leftAbs < rightAbs){ |
dir = "right"; |
}else{ |
dir = "left"; |
} |
_this.turnpage(ref, dir); |
return false; |
}); |
|
_this.lists.click(function(e){ |
var ref = parseInt(this.getAttribute("ref")); |
if(_this.pageNow == ref) { |
return true; |
}else{ |
e.preventDefault(); |
} |
if(_this.pageNow < ref){ |
var rightAbs = ref - _this.pageNow; |
var leftAbs = _this.pageNow + _this.total - ref; |
}else{ |
var rightAbs = _this.total - _this.pageNow + ref; |
var leftAbs = _this.pageNow - ref; |
} |
if(leftAbs < rightAbs){ |
dir = "right"; |
}else{ |
dir = "left"; |
} |
_this.turnpage(ref, dir); |
}); |
}, |
initBottomNav: function(){ |
this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON"); |
this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON"); |
}, |
start: function(){ |
var _this = this; |
if(_this.timerId) _this.stop(); |
_this.timerId = setInterval(function(){ |
if(_this.options.direct == "left"){ |
_this.turn("left"); |
}else{ |
_this.turn("right"); |
} |
}, _this.options.delay); |
}, |
stop: function(){ |
clearInterval(this.timerId); |
}, |
turn: function(dir){ |
var _this = this; |
|
if(dir == "right"){ |
var page = _this.pageNow -1; |
if(page <= 0) page = _this.total; |
}else{ |
var page = _this.pageNow + 1; |
if(page > _this.total) page = 1; |
} |
_this.turnpage(page, dir); |
}, |
turnpage: function(page, dir){ |
var _this = this; |
if(_this.locked) return false; |
_this.locked = true; |
if(_this.pageNow == page) return false; |
|
var run = function(page, dir, t){ |
var pre = page > 1 ? page -1: _this.total; |
var next = page == _this.total ? 1 : page + 1; |
var preP = pre - 1 >= 1 ? pre-1 : _this.total; |
var nextN = next + 1 > _this.total ? 1 : next+1; |
if(pre != _this.pageNow && next != _this.pageNow){ |
var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total; |
var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1; |
_this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t); |
} |
if(dir == 'left'){ |
_this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0}); |
|
|
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4}); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '224px', width: '530px', zIndex: 2, marginTop: '23px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0}); |
|
|
_this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}); |
_this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '270px', width: '640px', zIndex: 3, marginTop: '0'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1}); |
_this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1}); |
|
_this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '100px', width: '530px', zIndex: 2, marginTop: '85px'}); |
_this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '224px', width:"530px", zIndex: 2, marginTop: '23px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4}); |
_this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({width:'530px',height:'100px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '85px'},t, "", function(){_this.locked=false;}); |
|
|
}else{ |
_this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0}); |
|
_this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2}); |
_this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '224px', width: '530px', zIndex: 2, marginTop: '23px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4}); |
_this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0}); |
|
_this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '270px', width: '640px', zIndex: 3, marginTop: '0px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1}); |
_this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1}); |
|
_this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '100px', width: '530px', zIndex: 2, marginTop: '85px'}); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '224px', width: '530px', zIndex: 2, marginTop: '23px'}, t); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4}); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0}); |
|
_this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0}); |
_this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({width:'530px',height:'100px', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '85px'}, t, "",function(){_this.locked=false;}); |
} |
|
_this.pageNow = page; |
_this.initBottomNav(); |
}; |
|
run(page, dir,_this.options.speed); |
|
} |
|
}; |
posterTvGrid.options = { |
offsetPages : 3,//默认可视最大条数 |
direct : "left",//滚动的方向 |
initPage : 1,//默认当前显示第几条 |
className : "posterTvGrid",//最外层样式 |
autoWidth : true,//默认不用设置宽 |
width : 970,//最外层宽，需要使用的时候在传,默认由程序自动判断 |
height : 310,//最外层高 |
delay : 5000,//滚动间隔（毫秒） |
speed : 500 //滚动速度毫秒 |
}; |
|
window.posterTvGrid = posterTvGrid; |
})(jQuery); |
