论坛首页 › 翰墨承云 › 【翰书天下·绘世】～七月翰书天下绘世集合～让欣赏成为享受～

香格里拉-七七君 发表于 2015-8-3 21:46

【翰书天下·绘世】～七月翰书天下绘世集合～让欣赏成为享受～

<p align="center">
<font face="微软雅黑" size="5" color="Teal"><b><a href="http://tx3.netease.com/viewthread.php?tid=4462625" target="_blank">～七月翰书视频短剧集合～请看这里</a>
</b></font></p><br><br>


<br><p align="center">
<font face="微软雅黑" size="4" color="Teal"><b>点击图片直达原贴</b></font></p><br>
<div class="outLine">
<li class="Pic1">
<div class="picBox1">
<img src="http://img0.ph.126.net/GRYWA_9rITGZhcfy8qrRxg==/6631373429931492915.png" class="picChange1">
<a href="http://tx3.netease.com/viewthread.php?tid=4435526" target="_blank"><div class="TextChange1"><div class="text1" align="left"></div><p class="inText1"><font face="微软雅黑" size="3" color="black">　帝江孤月神仙眷侣手机手绘壁纸<br>　BY：丷墨渊</font></p></div></a>
</div>
</li>

<li class="Pic2">
<div class="picBox2">
<img src="http://img2.ph.126.net/Kk2cuGRf_zHGtFBRha95lQ==/6630881948235479345.png" class="picChange2">
<a href="http://tx3.netease.com/viewthread.php?tid=4442278" target="_blank"><div class="TextChange2"><div class="text2" align="left"></div><p class="inText2"><font face="微软雅黑" size="3" color="black">　7月中旬手绘壁纸作品集合（电脑壁纸）<br>　BY:鬼女八千、小鱼儿、戚小药</font></p></div></a>
</div>
</li>

<li class="Pic3">
<div class="picBox3">
<img src="http://img0.ph.126.net/uf7S-14LS2nnMJ-fmlwo6A==/6631397619187306053.png" class="picChange3">
<a href="http://tx3.netease.com/viewthread.php?tid=4455351" target="_blank"><div class="TextChange3"><div class="text3" align="left"></div><p class="inText3"><font face="微软雅黑" size="3" color="black">　御骑图鉴之加菲儿雪团儿<br>　BY:半船月光</font></p></div></a>
</div>
</li>


<li class="Pic4">
<div class="picBox4">
<img src="http://img2.ph.126.net/isgooffV_aec8WTO97wdHw==/6630881948235479348.png" class="picChange4">
<a href="http://tx3.netease.com/viewthread.php?tid=4459323" target="_blank"><div class="TextChange4"><div class="text4" align="left"></div><p class="inText4"><font face="微软雅黑" size="3" color="black">　老服回归短漫<br>　BY:森闲</font></p></div></a>
</div>
</li>


<li class="Pic5">
<div class="picBox5">
<img src="http://img0.ph.126.net/_SxWV-xhU_WnZ4xtu2cxXA==/6630629060561095881.png" class="picChange5">
<a href="http://tx3.netease.com/viewthread.php?tid=4441665" target="_blank"><div class="TextChange5"><div class="text5" align="left"></div><p class="inText5"><font face="微软雅黑" size="3" color="black">　创世三神人物形象化<br>　BY:柳眠风</font></p></div></a>
</div>
</li>

<li class="Pic6">
<div class="picBox6">
<img src="http://img0.ph.126.net/1VDxDQwaN_sD4fn2NpVKow==/6630417954328031757.png" class="picChange6">
<a href="http://tx3.netease.com/viewthread.php?tid=4435607" target="_blank"><div class="TextChange6"><div class="text6" align="left"></div><p class="inText6"><font face="微软雅黑" size="3" color="black">　7月上半月手绘壁纸合集（电脑手机）<br>　BY:刀在、璟夏、晴空</font></p></div></a>
</div>
</li>

<li class="Pic7">
<div class="picBox7">
<img src="http://img1.ph.126.net/2IPGBqrxdwbx-zPcGCKZvw==/6630520208909414230.png" class="picChange7">
<a href="http://tx3.netease.com/viewthread.php?tid=4455898" target="_blank"><div class="TextChange7"><div class="text7" align="left"></div><p class="inText7"><font face="微软雅黑" size="3" color="black">　双金、魍魉<br>　BY:璟夏</font></p></div></a>
</div>
</li>


</div>

<style type="text/css">


.TextChange7 .inText7{
        position:absolute;
        top:481px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }
       

.Pic7 {   /*li的id名，适用于单个li，用于调整位置*/
        width:300px;
        height:481px;
        position: absolute;
        overflow:hidden;               
        left:460px;
        top: 847px;
        }
       
.text7{
        width:300px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0px;
        top:481px;       
        background:#666;
        opacity:0.8;       
        }


.TextChange7{
        width:750px;
        height:600px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}
.picChange7{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}

.TextChange6 .inText6{
        position:absolute;
        top:241px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }
       

.Pic6 {   /*li的id名，适用于单个li，用于调整位置*/
        width:450px;
        height:241px;
        position: absolute;
        overflow:hidden;               
        left:10px;
        top: 1087px;
        }
       
.text6{
        width:450px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0;
        top:241px;       
        background:#666;
        opacity:0.8;       
        }


.TextChange6{
        width:750px;
        height:500px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}
.picChange6{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}


.TextChange5 .inText5{
        position:absolute;
        top:240px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }
       

.Pic5 {   /*li的id名，适用于单个li，用于调整位置*/
        width:450px;
        height:240px;
        position: absolute;
        overflow:hidden;               
        left:10px;
        top: 847px;
        }
       
.text5{
        width:450px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0;
        top:240px;       
        background:#666;
        opacity:0.8;       
        }


.TextChange5{
        width:750px;
        height:500px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}
.picChange5{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}

.TextChange4 .inText4{
        position:absolute;
        top:276px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }
       

.Pic4 {   /*li的id名，适用于单个li，用于调整位置*/
        width:750px;
        height:276px;
        position: absolute;
        overflow:hidden;               
        left:10px;
        top: 571px;
        }
       
.text4{
        width:750px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0;
        top:276px;       
        background:#666;
        opacity:0.8;       
        }


.TextChange4{
        width:750px;
        height:500px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}
.picChange4{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}

.TextChange3 .inText3{
        position:absolute;
        top:253px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }
       

.Pic3 {   /*li的id名，适用于单个li，用于调整位置*/
        width:450px;
        height:253px;
        position: absolute;
        overflow:hidden;               
        left:310px;
        top: 318px;
        }
       
.text3{
        width:450px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0;
        top:253px;       
        background:#666;
        opacity:0.8;       
        }


.TextChange3{
        width:450px;
        height:500px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}
.picChange3{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}

.TextChange2 .inText2{
        position:absolute;
        top:308px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }
       

.Pic2 {   /*li的id名，适用于单个li，用于调整位置*/
        width:450px;
        height:308px;
        position: absolute;
        overflow:hidden;               
        left:310px;
        top: 10px;
        }
       
.text2{
        width:450px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0;
        top:308px;       
        background:#666;
        opacity:0.8;       
        }


.TextChange2{
        width:450px;
        height:500px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}
.picChange2{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}

.TextChange1 .inText1{
        position:absolute;
        top:561px;/*根据图片高度微调，目测比图片高度略高一点点，论坛和网页版不同，按实际情况搞就好*/
        left:0px;
        }


.picBox1{/*图片和文字的div框，margin可以改为0*/
        background-color:#000;
        width:100%;
        height:100%;
        position:relative;
        margin:0px;
        top:0px;
        left:0px;
        overflow:hidden;
        }

.text1{
        width:300px;
        height:50px;/*根据文字高度变化，理论上5o可以适配所有*/
        position:absolute;
        left:0;
        top:561px;       
        background:#666;
        opacity:0.8;       
        }

.Pic1 {   /*li的id名，适用于单个li，用于调整位置*/
        width:300px;
        height:561px;
        position: absolute;
        overflow:hidden;               
        left:10px;
        top: 10px;
        }

.picBox1{/*图片和文字的div框，margin可以改为0*/
        background-color:#000;
        width:100%;
        height:100%;
        position:relative;
        margin:0px;
        top:0px;
        left:0px;
        overflow:hidden;
        }

.picChange1{ /*图片div框*/
        position: absolute;
        top:0px;
        left:0px;
        opacity:0.5 ;
}


.TextChange1{
        width:450px;
        height:1000px; /*文字框，宽度和图片相同，高度为图片高度+.text1中的高度，这里是加50*/
        position:absolute;
        top:0;
        left:0;       
}

.outLine{/*最大的外框，高度随内容调整*/
        position:relative;
        left:10px;
        top:10px;
        width:90%;
        height:1500px;

        }
li {
        list-style-type:none;
        }



</style>

<script type="text/javascript" src="http://res.nie.netease.com/comm/js/jquery(mixNIE).last.js"></script>
<script type="text/javascript">

$(function(){
        $('.picBox1').hover(function(){
               $('.picChange1').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange1').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange1').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange1').stop().animate({left:"0",top:"0"},500);

        });       
       
       
                $('.picBox2').hover(function(){
               $('.picChange2').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange2').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange2').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange2').stop().animate({left:"0",top:"0"},500);

        });       
       
                $('.picBox3').hover(function(){
               $('.picChange3').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange3').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange3').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange3').stop().animate({left:"0",top:"0"},500);

        });       
       
                $('.picBox4').hover(function(){
               $('.picChange4').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange4').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange4').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange4').stop().animate({left:"0",top:"0"},500);

        });       
       
                $('.picBox5').hover(function(){
               $('.picChange5').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange5').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange5').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange5').stop().animate({left:"0",top:"0"},500);

        });       
       
                        $('.picBox6').hover(function(){
               $('.picChange6').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange6').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange6').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange6').stop().animate({left:"0",top:"0"},500);

        });       
       
                $('.picBox7').hover(function(){
               $('.picChange7').animate({height:"105%",width: "105%", opacity:1,left:"-10px",top:"-10px"},500);/*图片变化*/
               $('.TextChange7').stop().animate({left:"0",top:"-45"},500); /*文字变化，这里不需要修改*/
        },function(){
                $('.picChange7').animate({height:"100%",width: "100%", opacity:0.6,left:"0",top:"0"},500);
                $('.TextChange7').stop().animate({left:"0",top:"0"},500);

        });       
       
       
});


</script>

香格里拉-七七君 发表于 2015-8-3 23:21

#T15 为了这高大上的展现方式，想发表情只能高级模式啦

印度阿三 发表于 2015-8-4 12:50

楼主也挺叼

霁衾 发表于 2015-8-4 13:08

前排！！！！！！！！！！！

云靥如花 发表于 2015-8-4 13:09

11111111111111

一步莲华 发表于 2015-8-4 13:10

过下任务。

煦尘倾恬 发表于 2015-8-4 13:11

1111111222111111111111

拾念丶 发表于 2015-8-4 13:11

咦前排啊

默辞欢 发表于 2015-8-4 13:12

#T10#T10#T10

沉河 发表于 2015-8-4 13:12

前排。

我想说人物虽美

然而背景都很空洞

期待细致的背景。

RED4869 发表于 2015-8-4 13:12

前排前排前排!!!

龍墨菡 发表于 2015-8-4 13:15

[展示] 【翰书天下·绘世】～七月翰书天下绘世集合～让欣赏成为享受～

ZXM_ai 发表于 2015-8-4 13:15

每天一顶00000

伊人灬在水 发表于 2015-8-4 13:15

11111111

夕陽武士 发表于 2015-8-4 13:18

是前排么？？？？？？？？？

Rainy_ 发表于 2015-8-4 13:19

1111111111111111

芸笑笑 发表于 2015-8-4 13:20

{:9_539:}前排还在吗，万恶的60秒，过个任务

__苏辞言 发表于 2015-8-4 13:21

任务打卡~~

莫悔清歌 发表于 2015-8-4 13:21

哈哈哈。。。。

danxn 发表于 2015-8-4 13:22

2222222222222

查看完整版本: 【翰书天下·绘世】～七月翰书天下绘世集合～让欣赏成为享受～