【翰书天下·周刊】第9期 漫谈天下路
本帖最后由 ◇◆七宝 于 2015-12-6 00:01 编辑<div id="index_box">
<pre class="m_prev"> </pre>
<pre class="m_next"> </pre>
<ul id="showingImages">
<li style="z-index: 1; width: 476px; height: 634px; top: 40px; left: 0px; opacity: 100;"><a href="#"><img src="http://img1.ph.126.net/veMpx03GEiEpF8YASHeXJg==/6631226095375704925.png"></a></li>
<li style="z-index: 2; width: 426px; height: 568px; top: 20px; left: 50px; opacity: 100;"><a href="#"><img src="http://img1.ph.126.net/bIvhxClPl1zky2OXhvtMPQ==/6631240389026866885.png"></a></li>
<li style="z-index: 3; width: 654px; height: 872px; top: 0px; left: 150px; opacity: 100;"><a href="#"><img id="mark-img" src="http://img1.ph.126.net/EYyZLdd4w4UR35ACXBs8HQ==/6631270075840814875.png"></a></li>
<li style="z-index: 2; width: 426px; height: 568px; top: 20px; left: 480px; opacity: 100;"><a href="#"><img src="http://img2.ph.126.net/LE_RCbHLY-tWilrEULbMzA==/6631440500143119146.jpg"></a></li>
<li style="z-index: 1; width: 476px; height: 634px; top: 40px; left: 476px; opacity: 100;"><a href="#"><img src="http://img0.ph.126.net/Mc5280omIWGM3cyBsKGu5A==/6631322852398945530.png"></a></li>
</ul>
</div>
<style type="text/css">
img{border:0;}
#index .style {
z-index: 99;
width: 150px;
bottom: 0px;
display: block;
float: right;
height: 172px;
right: 0px
}
#index_box {
position: relative;
margin: 30px 0 20px;
width: 960px;
height: 1000px
}
#index_box ul {
position: relative;
width: 960px;
height: 300px
}
#index_box li {
z-index: 0;
position: absolute;
list-style-type: none;
width: 0px;
background: #787878;
height: 0px; overflow:
hidden; top: 146px; cursor: pointer;
list-style-image: none;
left: 377px;
border-radius: 4px;
box-shadow: 1px 1px 12px rgba(200, 200, 200, 1)
}
#index_box li img {
width: 100%;
background: url('http://f.tx2.netease.com/month_1512/1512021533d55d0b4af2a6ed61.gif') no-repeat center 50%;
height: 100%;
vertical-align: top
}
#index_box .m_prev {
display: block
}
#index_box .m_next {
display: block
}
#index_box .m_prev {
z-index: 100; overflow: hidden; cursor: pointer
}
#index_box .m_next {
z-index: 100; overflow: hidden; cursor: pointer
}
#index_box .m_prev {
position: absolute;
width: 80px;
background: url('http://f.tx2.netease.com/month_1512/1512021533fbae067ae23ce57e.png') 0px 0px;
height: 120px; top: 380px; left: 85px
}
#index_box .m_next {
position: absolute;
width: 80px; background: url('http://f.tx2.netease.com/month_1512/1512021533fbae067ae23ce57e.png') -80px 0px;
height: 120px; top: 380px; right: 5px
}
</style>
<script src="http://res.nie.netease.com/comm/js/jquery(mixNIE).last.js"></script>
<script type="text/javascript">
// 2015-12-3 re-Write by Endymion (Wind Clip Water)
const ImagNum = 5;
var LiSquence = new Array();
var options = [
{width:476, height:634, top:40, left:0, zIndex:1},
{width:426, height:568, top:20, left:50, zIndex:2},
{width:654, height:872, top:0, left:150, zIndex:3},
{width:426, height:568, top:20, left:480, zIndex:2},
{width:476, height:634, top:40, left:476, zIndex:1},];
function getLiNumber (id) // this function onyl for TX3 BBSbecause of '[]' '<>' issue .
{
var my_val;
$.each(LiSquence, function(key,val){
if(key == id) {
my_val = val
return false;
}
});
return my_val;
}
function initialize()
{
console.log("Init Start");
for (var i = 0; i < ImagNum; i++)
LiSquence.push(i);
situate_constraction();
}
function situate_constraction(op)
{
var now_key = 0;
$.each(options, function(key,val){
now_key = getLiNumber(key);
$('#showingImages li:eq('+now_key+')').animate({zIndex:val.zIndex}, 0);
$('#showingImages li:eq('+now_key+')').animate({
width: val.width +'px',
height:val.height+'px',
top:val.top+'px',
left:val.left+'px',
opacity:'100'
}, 200);
});
}
$(".m_prev").click(function() {
console.log("Prev");
LiSquence.unshift(LiSquence.pop());
console.log(LiSquence);
situate_constraction();
});
$(".m_next").click(function() {
console.log("Next");
LiSquence.push(LiSquence.shift());
console.log(LiSquence);
situate_constraction();
});
$(document).ready(function() {
console.log("加载完成！");
initialize();
});
</script><div style="text-align: center;"><span style="font-size: 12px;">◆<a href="http://tx3.netease.com/viewthread.php?tid=4629916&extra=">阅读小奖励</a></span><span style="font-size: 12px;">◆</span></div><div style="text-align: center;"><span style="font-size: 12px;">◆</span><a href="http://tx3.netease.com/viewthread.php?tid=4608389&highlight=" style="font-size: 12px;">【翰书天下·浸墨】天下之弈剑听雨——每周六准时更新</a><span style="font-size: 12px; line-height: 1.6em;">◆</span></div><div style="text-align: center;"><span style="font-size: 12px; line-height: 1.6em;">◆<a href="http://tx3.netease.com/viewthread.php?tid=4622152">【翰书天下·掠影】新手视频之日常活动</a>◆</span></div><div style="text-align: center;"><span style="font-size: 12px; line-height: 1.6em;">◆<a href="http://tx3.netease.com/viewthread.php?tid=4622185&extra=&page=1">【翰书天下·浸墨】[连载更新]彼岸的此方（更新至第七章）</a>◆</span></div><div style="text-align: center;"><span style="font-size: 12px; line-height: 1.6em;">◆<a href="http://tx3.netease.com/viewthread.php?tid=4628415">【翰书天下·广播剧】《老板，你真渣！》上集</a>◆</span></div><div style="text-align: center;"><br></div> 沙发么么么么么么么么么么么么 前排吗 么么啪！(* ￣3)(ε￣ *) 前排前排呼呼呼呼呼 前排！！！！！！！！！！！！！！！！！！！ 111111111111 1111111111111111111111 011111111111111111 11111111111111 11111111111111 这是什么鬼？》》》 打卡做任务 一环一环~~~ 前排围观。。。 11111111111111111111111111111111 前排打卡，来混分～ 11111111 66 66666666666666 这个封面好看！！ 66666666666666666