求QQ漫画浏览JS 页面如下
http://i.soso.com/p.q?op=detail&sUin=33226091&aKey=MTI1ODA4MTIwMiwxNw==&ch=comic_qq&cid=comic.qq
就是这个页面的~~
我要这个浏览图片的效果~~~
<style type="text/css">
html{height:100%;width:100%;overflow:hidden;}
body{margin:0;background:#1f2126;color:#999;width:100%;height:100%;}
form,ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style-type:none;}
div,h3,a{font-family: 微软雅黑, Microsoft YaHei, Arial, simsun, 宋体;font-size:14px;font-weight:normal;line-height:150%;}
.k{clear:both;height:0;line-height:0px;font-size:1px;}
img,img a{border:0 none;}
.thumbnail{float:left;width:80px;height:80px;padding:0;margin:10px 9px;border:1px solid #666a72;overflow:hidden;display:inline;}
.thumbnail a{display:block;text-align:center;}
.highlight_thumb{border:3px solid #5592ed; margin:8px 7px;display:inline;}
.sidebar_pic{background-position:0 -125px;width:76px;height:72px;padding-top:10px;overflow:hidden;}
.show_thumb_off,.show_thumb_on,.hide_thumb_off,.hide_thumb_on,.thumb_but_left_act,.thumb_but_right_act,.sidebar_pic,.thumb_but_left_on,.thumb_but_left_off,.thumb_but_right_on,.thumb_but_right_off,.ico_front,.ico_next,.ico_enlarge1,.ico_enlarge2,.ico_narrow1,.ico_narrow2,.ico_fav,.ico_recommend,.ico_report,.ico_help, #switch a.open em,#switch a.open:hover em,#switch a.close em,#switch a.close:hover em{background-image:url(" http://cache.soso.com/img/i/pic_favor/bg2_tpc.gif");background-repeat:no-repeat;cursor:pointer;}
#page{position:relative;}
#header{height:130px;overflow:hidden;}
#navigate{width:100%;background:#000;height:25px;padding-top:3px;}
#navigate,#navigate a{color:#fff;}
#navigate .nav{font-family:simsun;padding:0 6px;}
#sosoimage{margin-left:8px;}
#navi_anm{margin-right:4px;}
#thumbs{width:100%;background:#494949;height:102px;}
#thumb_window{float:left;overflow:hidden;height:100%;}
#thumb_list{height:100%;}
#main{position:relative;width:100%;overflow:hidden;}
#content{position:relative;height:100%;}
#sidebar{float:right;width:170px;padding:0 0 0 8px;}
#sidebar h3{margin-top:4px;}
#sidebar ul{margin:8px 0 4px 0;}
#sidebar li{float:left;margin:0 6px 10px 0;width:76px;text-align:center;}
#sidebar a{font-size:14px;color:#999;}
#mainpart{float:left;width:70%;}
#tools{margin:auto;width:200px;height:31px;padding-top:7px;}
#tools .nav{color:#666A72;font-size:14px;line-height:160%;margin:0 6px;float:left;}
#picture{text-align:center;overflow:hidden;}
#picinfo{margin:0 auto;height:32px;text-align:center;font-size:12px;font-family: Arial, 宋体;line-height:240%;}
#picinfo a{font-size:12px;font-family: Arial, 宋体;color:#fff;}
#switch{float:right;width:18px;*zoom:1;}
a#switchbar{width:16px;display:block;}
a#switchbar:link,a#switchbar:visited ,a#switchbar:active{background:#292b2f;border:1px solid #191a1f;position:relative;}
a#switchbar:hover{background:#646464;border:1px solid #191a1f;position:relative;}
#switch a.open em,#switch a.open:hover em,#switch a.close em,#switch a.close:hover em{position:absolute;top:210px;left:0;display:block;height:91px;text-indent:-999em;width:16px;overflow:hidden;background-position:-194px 0;cursor:pointer;}
#switch a.open:hover em{background-position:-213px 0;}
#switch a.close em{background-position:-251px 0;}
#switch a.close:hover em{background-position:-232px 0;}
.thumb_but_left_on{background-position:0 0;width:32px;height:32px;margin:34px 5px 0 5px;float:left;display:inline;}
.thumb_but_left_off{background-position:0 -33px;width:32px;height:32px;margin:34px 5px 0 5px;float:left;display:inline;}
.thumb_but_left_act{background-position:-300px 0;width:32px;height:32px;margin:34px 5px 0 5px;float:left;display:inline;}
.thumb_but_right_on{background-position:-33px 0;width:32px;height:32px;margin:34px 5px 0 5px;float:right;display:inline;}
.thumb_but_right_off{background-position:-33px -33px;width:32px;height:32px;margin:34px 5px 0 5px;float:right;display:inline;}
.thumb_but_right_act{background-position:-333px 0;width:32px;height:32px;margin:34px 5px 0 5px;float:right;display:inline;}
.ico_front{background-position:0 -88px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_next{background-position:-25px -88px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_enlarge1{background-position:-88px 0;width:24px;height:24px;margin:0 1px;float:left;}
.ico_enlarge2{background-position:-88px -25px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_narrow1{background-position:-113px 0px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_narrow2{background-position:-113px -25px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_fav{background-position:-50px -88px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_recommend{background-position:-75px -88px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_report{background-position:-100px -88px;width:24px;height:24px;margin:0 1px;float:left;}
.ico_help{background-position:-125px -88px;width:24px;height:24px;margin:0 1px;float:left;}
body{scrollbar-face-color:#646464;scrollbar-base-color:#000000;scrollbar-arrow-color:#000000;scrollbar-track-color:#292b2f;scrollbar-shadow-color:#646464;scrollbar-highlight-color:#646464;scrollbar-3dlight-color:#444444;scrollbar-darkshadow-color:#444444;}
#picinfo_size{padding-right:20px;color:#fff;}
.hide_thumb_on{background-position:-88px -128px;width:24px;height:24px;margin:0 1px;float:left;}
.hide_thumb_off{background-position:-88px -153px;width:24px;height:24px;margin:0 1px;float:left;}
.show_thumb_on{background-position:-113px -128px;width:24px;height:24px;margin:0 1px;float:left;}
.show_thumb_off{background-position:-113px -153px;width:24px;height:24px;margin:0 1px;float:left;}
#realsize_on,#realsize_off,#optimalsize_on,#optimalsize_off,#show_on,#show_off,#hide_on,#hide_off{display:none;}
#mask{z-index:10;position:absolute;top:0;left:0;background-color:#000;filter:alpha(opacity=50);opacity:0.50;width:100%;height:100%;display:none;}
#endtip .exclaim,#et_close,#endtip .bt1,#endtip .bt2{background-image:url(" http://cache.soso.com/img/i/pic_favor/bg2_tpc.gif");background-repeat:no-repeat;}
#endtip{z-index:15;position:absolute;width:350px;height:130px;background:#fff;border:#accce6 2px solid;padding:5px 5px 5px 15px;display:none;}
#et_cont{font-family:Arial,宋体;font-size:14px;margin-top:20px;}
#et_close{float:right;background-position:-43px -251px;width:17px;height:17px;line-height:12px;}
a#et_close:hover{background-color:#b2d0ea;}
#et_cont{float:left;margin:10px 0;color:#000;line-height:24px;}
#et_cont .p1{margin-bottom:24px;}
#et_cont .exclaim{float:left;background-position:0 -255px;width:32px;height:28px;margin-right:5px;display:inline;}
#et_cont .bt1{float:left;background-position:0 -215px;width:100px;height:30px;margin:8px 8px 0 0;padding:0;border:0;line-height:30px;font-size:14px;color:#00288c;cursor:pointer;}
#et_cont .bt2{float:left;background-position:-105px -215px;width:195px;height:30px;margin:8px 0 0 8px;padding:0;border:0;line-height:30px;font-size:14px;color:#00288c;font-weight:bold;cursor:pointer;}
#et_cont .or{float:left;height:30px;margin:8px 0 0 0;line-height:30px;}
#jump{display:none;}
</style>
就是这一段比较麻烦啊~
求高手简化一下~
如果满意再加分