NANFUFU +

เงื่อนไข !!!
x ห้ามแชร์ต่อ
x ห้ามอ้างว่าเป็นของตน

โค้ดนี้จะเป็นโค้ดแบบสำเร็จรูปนะคะ ^_^ คัดลอก CSS ด้านล่างนะ
เอาไปใส่ที่กล่อง HTML / JavaScript ได้นะ

<style type="text/css">
.boxer {
width: 250px;
height: 110px;
margin-top: -130px;
position: fixed;
left: 50px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}
.boxer:hover   {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.box           {
width: 250px;
background: #fff;
color: #5E5E5E;
padding: 0px;
overflow: hidden;
height: 130px;
}
.close         {
text-transform: lowercase;
top: 130px;
font-size:15px;
position: absolute;
background: #FFAEBC;
color: #777;
padding: 5px;
width:150px;
font-family:arial;
text-align:center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
left: 50px;
}
.close  e, .boxer:hover f   {
display: inline;
opacity:.8;
}
.close  f, .boxer:hover e   {
display: none;
opacity:.8;
}
</style>

ส่วนตัวนี้จะใช้แสดงค่ะ

<div class="boxer"><div class="close"> <e>ตั้งชื่อโชว์</e> <f>ชื่อตอนกล่องเลื่อนแล้ว</f> </div>
<div class="box"><table><td><td>
สามารถใส cbox, twitter, bias, affies และอื่นๆ.
</td></tr></table></div></div>

แสดงตัวอย่าง&บันทึก