|
|
[HTML] 纯文本查看 复制代码 <html xml:lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="Copyright" content="www.kevin-ying.com" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link href="http://www.kevin-ying.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>多图并列的jQuery焦点图代码 | 源与生活 站长工具 by:文歌提供([url]www.kevin-ying.com[/url])</title>
<script type="text/javascript" src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<style>
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr { margin:0; padding:0; }
body, input { font:12px/1.5 Arial; color:#333; }
select, input, button { vertical-align:middle; font-size:100%; }
ul, ol { list-style:none; }
fieldset, img { border:0; }
em { font-style:normal; }
.clear { clear:both; }
.clearfix:after { content:"."; display:block; visibility:hidden; clear:both; height:0; font-size:0; }
.clearfix { *zoom:1;}
.wrapper, .header, .navbox { width:980px; margin:0 auto; }
.side { float:right; width:235px; }
.main { float:left; width:730px; }
.main h1 { font-family:"Microsoft Yahei", arial, "Simsun"; font-size:22px; padding-top:10px; }
.mt { margin-top:10px; }
.mt15 { margin-top:15px; }
a { color:#333; text-decoration:none; }
a:hover, .download .friend a:hover { color:#c00; text-decoration:underline; }
.border { border:1px solid #e0e0e0; }
.more { float:right; font-size:12px; font-weight:400; }
.ad_div { font:0/0 arial; }
.ad_div div { margin-top:10px; }
.site-nav { border-bottom:1px solid #e4e4e4; background:#f5f5f5; height:27px; }
.site-nav-inner { width:980px; margin:0 auto; padding-top:2px; height:24px; line-height:24px; }
.site-nav-inner a { color:#666; text-decoration:none; }
.site-nav-inner a:hover { color:#c00; }
.oldpage-link { float:right; height:32px; font-weight:700; line-height:32px; }
.navbox { overflow:hidden; height:42px; line-height:42px; background-position:0 -36px; background-repeat:repeat-x; -webkit-border-radius:3px; border-radius:3px; }
.nav { float:left; }
.nav li { float:left; height:42px; line-height:42px; font-size:16px; font-family:\5FAE\8F6F\96C5\9ED1; background-position:-128px -264px; }
.nav li a { display:block; color:#fff; padding:0 13px 0 17px; outline:none; text-decoration:none; }
.nav li.cur { position:relative; z-index:5px; margin:0 -2px 0 0; }
.nav li.first { padding:0; background:none; }
.nav li.cur h1, .nav li.cur span { font-size:16px; font-weight:400; color:#fff; padding:0 15px 0 17px; background:#292d33; *zoom:1;}
.nav li.cur span { display:block; }
.nav li.first h1, .nav li.first span { -webkit-border-bottom-left-radius:3px; border-bottom-left-radius:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; }
.nav li a:hover { color:#fff; text-decoration:underline; }
.nav-link { float:right; padding:0 5px 0 0; font-size:12px; font-family:arial; }
.nav-link a { margin:0 5px; font-family:arial; color:#fff; text-decoration:none; }
.nav-link span { font-weight:700; color:#acb7bf; }
.nav-link a:hover { color:#fff; text-decoration:underline; }
.tab { position:relative; width:710px; margin-bottom:-2px; padding:9px 9px 3px; border-top:1px solid #e9e9e9; border-left:1px solid #d9d9d9; border-right:1px solid #d8d9d9; border-bottom:0 none; background:#fff; }
.tab ul img { vertical-align:middle; }
.slide { width:710px; height:350px; overflow:hidden; position:relative; }
.slide-ul { position:relative; width:8640px; margin:0 0 0 -5px; }
.slide-ul li { display:inline; float:left; width:230px; height:350px; padding:0 5px; overflow:hidden; }
.slide-ul a { display:block; width:230px; height:350px; overflow:hidden; color:#fff; }
.slide-ul a:hover .pic-txt { color:#fff; }
.slide-ul .pic-txt { display:block; bottom:-30px; position:relative; width:220px; height:30px; margin:-30px 0 0; padding:0 5px; font:14px/30px Microsoft YaHei; text-align:center; z-index:1; background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#80000000, endColorstr=#80000000);
cursor:pointer; }
:root .slide-ul .pic-txt { filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#00000000, endColorstr=#00000000);
}
.info-btn { width:225px; height:22px; overflow:hidden; margin:0 auto; padding:11px 0; zoom:1; }
.info-btn li { float:left; padding:0 3px; }
.info-btn li span { display:block; width:22px; height:22px; background:url([img]http://icon.zol-img.com.cn/sj/images/sjbz_infor-btn.png[/img]) 0 -27px no-repeat; text-indent:-9999em; overflow:hidden; cursor:pointer; }
.info-btn .info-cur span, .info-btn .info-hover span { background-position:0 0; }
.tab-shadow { display:block; position:absolute; left:-1px; top:403px; width:730px; height:3px; background:url([img]http://icon.zol-img.com.cn/sj/images/sjbz_shadowbg.jpg[/img]) no-repeat; }
.model { border:1px solid #e0e0e0; }
.mod-header { height:34px; padding:0 12px; border-bottom:1px solid #e0e0e0; line-height:34px; font-size:14px; font-weight:700; background-position:0 0; background-repeat:repeat-x; }
.mod-header h2 { float:left; font-size:14px; }
.mod-header h3 { float:left; font-size:14px; }
.bz-reco { padding:0 12px; background:#fff; zoom:1; }
.pic-list { padding:0 0 12px 112px; border-bottom:1px dotted #e0e0e0; line-height:20px; word-break:break-all; }
.pic-list h3 { height:40px; margin:0 0 16px; overflow:hidden; font-size:12px; font-weight:400; }
.pic-list span { color:#999; }
.pic-list .pic { float:left; width:100px; height:75px; padding:1px; margin:0 0 0 -112px; border:1px solid #e0e0e0; }
.pic-list .pic:hover, .down-img a:hover img { border-color:#f60; }
.pic img { vertical-align:middle; }
.new-list { padding:5px 0 4px; }
.new-list li { height:26px; padding:0 0 0 10px; line-height:26px; overflow:hidden; background-position:-127px -615px; vertical-align:middle; }
.new-list li a { color:#333; }
.new-list li a:hover { color:#c00; text-decoration:underline; }
.new-list li span { color:#999; }
.new-list .cur { height:124px; }
.new-list .cur .down-img { clear:both; zoom:1; display:block; overflow:hidden; margin:0 0 3px; }
.choosebox { width:704px; padding:7px 12px; border:1px solid #e0e0e0; background:#fff; }
.filter-item { zoom:1; padding:9px 0 9px 103px; border-top:1px dotted #e0e0e0; line-height:24px; }
.first { border-top:0 none; }
.filter-item dt { float:left; width:65px; margin-left:-103px; _display:inline; text-align:left; color:#666; }
.filter-item dd { background:#fff; }
.filter-item .all { position:relative; float:left; display:inline; height:20px; line-height:20px; padding:0 5px; margin:2px 4px 2px -39px; }
.filter-item a { position:relative; float:left; height:20px; line-height:20px; padding:0 5px; margin:2px 2px 2px 0; white-space:nowrap; _display:inline; }
.color-item a { padding:0 5px 0 23px; }
.filter-item .sel, .filter-item .sel:hover, .filter-item a:hover { background-color:#f60; color:#fff; text-decoration:none; }
.filter-item a:hover { background-color:#f90; }
.filter-item .sel:hover { color:#fff; text-decoration:none; }
.filter-item .resolution { float:right; padding:0 0 0 22px; background-position:-114px -207px; _white-space:normal; _word-break:break-all; }
.filter-item .resolution em { font-weight:700; color:#f60; }
.filter-item .re-filter { float:right; padding:0 0 0 20px; background-position:-115px -237px; }
.filter-item .re-filter:hover { color:#c00; background-color:#fff; }
.action-area { float:right; width:102px; }
.filter-item a i { position:absolute; left:4px; top:3px; width:12px; height:12px; _overflow:hidden; border:1px solid #cb1c1c; background:#de2020; }
.filter-item .orange i { border-color:#e96300; background:#fe6c00; }
.filter-item .yellow i { border-color:#e9b000; background:#febf00; }
.filter-item .green i { border-color:#539b23; background:#59a725; }
.filter-item .purple i { border-color:#7a27b7; background:#892bcf; }
.filter-item .pink i { border-color:#c63fab; background:#d744ba; }
.filter-item .cyan i { border-color:#07a6b7; background:#06b7c8; }
.filter-item .blue i { border-color:#005ceb; background:#0065fe; }
.filter-item .brown i { border-color:#6b3012; background:#733413; }
.filter-item .white i { border-color:#c0babc; background:#fff; }
.filter-item .black i { border-color:#000; background:#000; }
.hot-tags a:hover, .list_news a:hover { color:#c00; }
.hot-tags { padding:6px 10px; overflow:hidden; background:#fff; line-height:26px; }
.tags-spec { height:188px; line-height:24px; }
.hot-tags a { margin-right:10px; white-space:normal; word-break:break-all; }
.hot-tags .f14 { font-size:14px; }
.hot-tags .style1 { color:#65850F; }
.hot-tags .style2 { color:#f60; }
.hot-tags .style3 { color:#666; }
.hot-tags .style4 { color:#298DA9; }
.hot-tags .style5 { color:#ED0000; }
.hot-tags .style6 { color:#e818bf; }
.pic-list2 { margin:0 0 0 -20px; }
.pic-list2 li { position:relative; float:left; width:208px; height:351px; margin:10px 0 -9px 20px; padding:11px 11px 9px; line-height:24px; text-align:center; _display:inline; }
.pic-list2 .shadow { position:absolute; z-index:-1; left:0; top:0; width:230px; height:371px; background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183704x1dyhdkdtny1ffyh.png[/img]) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://date.kevin-ying.com/bbs_up/album/201509/24/183704x1dyhdkdtny1ffyh.png", sizingMethod="crop");
}
.pic-list2 .hover .shadow { background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183316el4xq3777x91714q.png[/img]) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://date.kevin-ying.com/bbs_up/album/201509/24/183316el4xq3777x91714q.png", sizingMethod="crop");
}
.pic-list2 .pic { position:relative; display:block; width:208px; height:351px; overflow:hidden; color:#999; outline:0 none; }
.pic-list2 .pic span { display:block; height:24px; padding:7px 0 8px; overflow:hidden; cursor:pointer; }
.pic-list2 .pic em { color:#333; }
.pic-list2 .pic:hover { color:#999; text-decoration:none; zoom:1; }
.pic-list2 .pic:hover em { color:#c00; text-decoration:underline; }
.pic-list2 ins { display:block; position:absolute; right:11px; top:302px; _top:303px; height:21px; line-height:21px; text-decoration:none; padding:0 5px; color:#fff; background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#80000000, endColorstr=#80000000);
}
:root .pic-list2 ins { filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#00000000, endColorstr=#00000000);
}
.pic-list2 .photo-list-padding { padding:11px 11px 19px; }
.pic-list3 li, .pic-list3 .pic { height:247px; }
.pic-list3 .shadow { height:267px; background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183513jhwjmm6h7o7uoicc.png[/img]) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://date.kevin-ying.com/bbs_up/album/201509/24/183513jhwjmm6h7o7uoicc.png", sizingMethod="crop");
}
.pic-list3 .hover .shadow { background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183513jhwjmm6h7o7uoicc.png[/img]) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://date.kevin-ying.com/bbs_up/album/201509/24/183513jhwjmm6h7o7uoicc.png", sizingMethod="crop");
}
.pic-list3 ins { top:198px; _top:199px; }
.pic-list4 li, .pic-list4 .pic { height:209px; }
.pic-list4 .shadow { height:229px; background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183417g23wg7x420zu4ur4.png[/img]) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://date.kevin-ying.com/bbs_up/album/201509/24/183417g23wg7x420zu4ur4.png", sizingMethod="crop");
}
.pic-list4 .hover .shadow { background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183533hk1u525ukdt1gtw2.png[/img]) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://date.kevin-ying.com/bbs_up/album/201509/24/183533hk1u525ukdt1gtw2.png", sizingMethod="crop");
}
.pic-list4 ins { top:160px; _top:161px; }
.rank-list { padding:6px 12px; background:#fff; word-break:break-all; }
.rank-list li { position:relative; height:26px; padding:0 0 0 23px; zoom:1; line-height:26px; overflow:hidden; vertical-align:middle; }
.rank-list a, .rank-list .n1, .rank-list .n2, .rank-list .down-num { vertical-align:baseline; }
.n1, .n2 { position:absolute; width:16px; height:16px; line-height:16px; color:#fff; text-align:center; overflow:hidden; left:0; top:6px; font-size:10px; -webkit-text-size-adjust:none; }
.n1 { background-position:-51px -313px; }
.n2 { background-position:-51px -329px; }
.rank-list li .title { display:block; *margin-top:1px;
height:26px; line-height:26px; overflow:hidden; }
.rank-list li .down-num { float:right; margin:0 0 0 6px; color:#999; font-size:12px; }
.rank-list .cur { height:125px; }
.rank-list .cur .down-img { clear:both; zoom:1; display:block; overflow:hidden; margin:1px 0 3px; }
.down-img img { padding:1px; display:block; border:1px solid #ccc; }
.rank-list .seriescur { height:110px; }
.notice { height:34px; line-height:34px; background:#fff; color:#666; text-indent:12px; }
.notice em { font-weight:700; color:#333; }
.download { width:978px; border:1px solid #E1E1E1; margin:15px auto 0; }
.download .mod-header a { font-weight:700; }
.download .friend { width:958px; padding:10px 8px 14px 12px; background:#fff; line-height:26px; color:#ccc; }
.download .friend a { margin:0 12px 0 0; color:#666; }
.location { padding:10px 0 0; color:#666; }
.location .collect { float:right; width:85px; height:23px; background-position:0 -184px; }
.location a { height:23px; line-height:23px; }
.location em { font-family:simsun; }
.sort { float:right; width:280px; margin:-1px -12px -1px 0; height:36px; font-size:12px; line-height:36px; _display:inline; _width:288px; }
.sort span { font-weight:400; color:#999; }
.sort ul { float:right; margin:0 0 0 4px; }
.sort li { float:left; width:71px; border-left:1px solid #e0e0e0; font-weight:400; color:#333; text-align:center; cursor:pointer; }
.sort li i { display:none; position:absolute; left:31px; top:33px; width:9px; height:6px; background-position:-120px -191px; }
.sort .hover { font-weight:700; }
.sort li a { color:#333; text-decoration:none; display:block; }
.sort .cur { position:relative; height:33px; line-height:33px; margin:0 -1px 0 0; border-top:2px solid #666; border-right:1px solid #e0e0e0; background-color:#fff; font-weight:700; cursor:auto; }
.sort .cur i { display:block; }
.not-foundbox { height:80px; padding:40px 0 0 225px; border:1px solid #e0e0e0; border-top:0 none; background:#fff; }
.not-foundbox span { display:block; width:240px; height:41px; line-height:41px; padding:0 0 0 53px; color:#666; font-size:14px; background-position:-88px -522px; }
.pagecon { height:30px; line-height:30px; padding:10px 0 5px 0; }
.pagecon .tip { font-size:14px; font-family:simsun; }
.page { float:right; }
.page a, .page span { display:inline-block; height:27px; line-height:27px; padding:0 10px; border:1px solid #ccc; background:#fff; text-align:center; font-size:16px; margin-left:3px; vertical-align:middle; }
.page .prev { padding:0 8px 0 19px; background-position:0 -568px; font-size:14px; }
.page .next { padding:0 19px 0 8px; background-position:-14px -568px; font-size:14px; }
.page span { background-color:#444; border:1px solid #444; color:#fff; font-weight:bold; }
.page em { display:inline-block; width:16px; height:29px; background-position:-84px -565px; margin:0 4px 0 10px; vertical-align:middle; }
.location-nav { border-bottom:1px solid #e4e4e4; background:#f5f5f5; height:27px; }
.location-nav .location { padding:0; line-height:27px; color:#666; }
.photo-tit { padding:10px 0; }
.photo-tit h1 { float:left; font:bold 16px/30px Microsoft YaHei; }
.photo-opt { float:right; position:relative; z-index:1; color:#999; line-height:30px; }
.photo-opt a { display:inline-block; height:30px; line-height:30px; margin:0 10px; padding:0 0 0 27px; font-size:14px; color:#666; }
.photo-opt a:hover { color:#c00; text-decoration:none; }
.photo-opt .favorite { background-position:-109px -328px; }
.photo-opt .favorite:hover { background-position:-109px -356px; }
.photo-opt .nolike { background-position:-109px -385px; }
.photo-opt .nolike:hover { background-position:-109px -415px; }
.photo-opt .down-btn { width:90px; padding:0 3px 0 0; *padding:0;
background-position:0 -209px; text-indent:-9999em; }
.photo-opt .down-btn:hover { background-position:0 -241px; }
.photo-opt .tip { font-size:12px; font-family:simsun; }
.photobox { position:relative; width:978px; height:550px; margin-bottom:-3px; padding:0 0 3px; border-top:1px solid #e9e9e9; border-left:1px solid #d9d9d9; border-right:1px solid #d8d9d9; border-bottom:0 none; }
.photo-side { float:right; width:168px; height:530px; padding:20px 20px 0; background:url([img]http://icon.zol-img.com.cn/sj/images/sjbz_photo-side-bg.jpg[/img]) 0 0 no-repeat #f5f5f5; }
.photo-side .code-img { display:block; border:1px solid #e4e4e4; }
.photo-side .code-img-infor { padding:10px 0 0; color:#333; }
.photo-side .code-img-infor a { color:#f60; }
.photo-side h3 { padding:5px 0; font-size:14px; line-height:30px; color:#666; }
.photo-side p { color:#999; line-height:22px; }
.photo, .photo-2 { float:left; position:relative; width:750px; height:530px; padding:10px; background:#fff; zoom:1; overflow:hidden; }
.photo img, .photo-2 img { vertical-align:top; }
.photo-2 { width:730px; height:510px; padding:20px; }
.photo-2 img { display:block; margin:0 auto; }
.photobox .tab-shadow { width:980px; top:550px; background:url([img]http://date.kevin-ying.com/bbs_up/album/201509/24/183853v5pxx4z45ku56zke.jpg[/img]) no-repeat; }
.photo-prev, .photo-next { position:absolute; top:0; width:50%; height:100%; cursor:pointer; }
.photo-prev { left:0; }
.photo-next { right:0; }
.photo-prev a, .photo-next a { position:absolute; top:238px; width:75px; height:75px; cursor:pointer; overflow:hidden; display:block; }
.photo-prev a { left:30px; }
.photo-next a { right:30px; }
.photo-prev .arrow-bg, .photo-next .arrow-bg { position:absolute; left:0; top:0; width:75px; height:75px; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:#000; filter:alpha(opacity=20); opacity:.2; }
.photo-prev .arrow-ico, .photo-next .arrow-ico { position:absolute; left:0; top:0; width:75px; height:75px; }
.photo-prev .arrow-ico { background-position:0 0; }
.photo-next .arrow-ico { background-position:-160px 0; }
.photo-prev a:hover .arrow-ico { background-position:-80px 0; }
.photo-next a:hover .arrow-ico { background-position:-240px 0; }
.pic-bg { position:absolute; left:0; top:0; background:#000; filter:alpha(opacity=0); opacity:0; width:100%; height:100%; }
.wallpaper-down dt, .wallpaper-down dd { float:left; }
.wallpaper-down dt { width:88px; background:#f5f5f5; line-height:34px; border-right:1px solid #e0e0e0; font-size:14px; font-weight:700; text-align:center; }
.wallpaper-down dd { position:relative; zoom:1; width:889px; background:#fff; }
.wallpaper-down dd a { position:relative; float:left; width:78px; height:34px; line-height:34px; border-right:1px solid #e0e0e0; text-align:center; background:#fff; }
.wallpaper-down dd a:hover, .wallpaper-down dd .current { z-index:10; width:78px; height:34px; line-height:34px; padding:1px 0 1px 1px; margin:-1px 0 -1px -1px; border-right:1px solid #f60; color:#fff; font-weight:700; background:#f60; text-decoration:none; }
.wallpaper-down dd .laiyuan { float:right; width:178px; font-size:14px; font-weight:700; border:0 none; }
.wallpaper-down dd .laiyuan:hover { width:178px; margin:0; padding:0; height:34px; line-height:34px; background:#fff; border:0 none; color:#333; text-decoration:none; }
.wallpaper-down dd .laiyuan span { color:#f60; text-decoration:none; }
.wallpaper-down dd .laiyuan:hover span { color:#f60; text-decoration:underline; }
.wallpaper-tag dt, .wallpaper-tag dd { float:left; height:34px; }
.wallpaper-tag dt { width:88px; background:#f5f5f5; font-size:14px; font-weight:700; line-height:34px; text-align:center; }
.wallpaper-tag dd { width:875px; padding:0 10px 0 4px; border-left:1px solid #e0e0e0; background:#fff; }
.wallpaper-tag .tag-link { float:left; line-height:34px; }
.wallpaper-tag .share { float:right; padding:4px 0 0; }
.wallpaper-tag .tag-link a { margin:0 6px; }
.photo-set { position:relative; width:638px; border:1px #e0e0e0 solid; padding:15px 170px 5px; background:#fff; zoom:1; }
.photo-set-prev, .photo-set-next { position:absolute; top:15px; width:130px; text-align:center; }
.photo-set-prev { left:20px; }
.photo-set-next { right:20px; }
.photo-set-prev span, .photo-set-next span { display:block; width:120px; height:90px; padding:3px 7px 7px 3px; background-position:0 -81px; }
.photo-set-prev span a, .photo-set-next span a { display:block; width:120px; height:90px; line-height:88px; *font-size:78px;
_font-size:79px; *font-family:Arial;
overflow:hidden; }
.photo-set-prev img, .photo-set-next img { vertical-align:middle; }
.photo-set-prev .txt, .photo-set-next .txt { display:block; width:130px; height:30px; line-height:30px; }
.photo-set-prev:hover, .photo-set-next:hover { color:#f90; }
.photo-set-scrlprev, .photo-set-scrlnext { position:absolute; top:7px; *top:4px;
display:block; width:19px; height:96px; }
.photo-set-scrlprev { left:0; }
.photo-set-scrlnext { right:0; }
.photo-set-scrlprev a, .photo-set-scrlnext a { display:block; width:19px; height:96px; cursor:pointer; }
.photo-set-scrlprev .forbida { background-position:0 -424px; }
.photo-set-scrlnext .forbida { background-position:-21px -424px; }
.photo-set-scrlprev .forbid { background-position:-42px -424px; cursor:default; }
.photo-set-scrlnext .forbid { background-position:-63px -424px; cursor:default; }
.photo-set-list { width:100%; min-height:1px; }
.photo-list-inner { position:relative; width:584px; padding:0 27px; zoom:1; }
.photo-list-box { position:relative; width:564px; height:128px; margin:-7px 10px 0; padding:7px 0 0; overflow:hidden; zoom:1; }
.photo-list-box ul { position:relative; left:0; margin:0 0 0 -10px; }
.photo-list-box li { position:relative; float:left; width:120px; margin:0 10px; background:#fff; display:inline; padding:2px; border:1px #e0e0e0 solid; }
.photo-list-box li.lihover { border-color:#f60; background:#f60; }
.photo-list-box li a { display:block; width:120px; height:90px; text-align:center; line-height:88px; *font-size:78px;
_font-size:79px; *font-family:Arial;
overflow:hidden; }
.photo-list-box li i { position:absolute; right:43px; top:103px; color:#666; padding:0 8px; height:20px; line-height:20px; font-style:normal; }
.photo-list-box li i em { font-size:14px; font-weight:700; }
.photo-list-box li img { margin:0; vertical-align:middle; }
.photo-list-box .arrow { display:none; position:absolute; z-index:3; left:57px; top:-8px; width:14px; height:7px; background-position:-26px -371px; }
.photo-list-box .cur { border-color:#f60; background:#f60; }
.photo-list-box .cur a { border-color:#f60; background:#fff; cursor:default; }
.photo-list-box .cur .arrow { display:block; }
.photo-list-box a:hover { text-decoration:none; }
.popup { position:absolute; left:50%; top:205px; width:468px; margin:0 0 0 -234px; padding:30px 0 10px 50px; background:#141414; border:1px #292929 solid; }
.popup .shut-btn { position:absolute; right:19px; top:9px; width:15px; height:15px; background-position:0 -273px; cursor:pointer; }
.pic-news, .pic-news h5, .pic-news p { overflow:hidden; zoom:1; }
.pic-news { margin:0 0 15px; }
.pic-news .pic { float:left; border:1px #333 solid; width:102px; margin:0 15px 0 0; _margin-right:12px; }
.pic-news .pic a { display:block; width:100px; height:75px; border:1px #000 solid; overflow:hidden; line-height:71px; line-height:73px\9; *font-size:66px;
_font-size:67px; *font-family:Arial;
color:#fff; text-align:center; }
@-moz-document url-prefix() {
.pic-news .pic a {line-height:73px;}
}
:root .pic-news .pic a { line-height:73px\0; }
.pic-news .pic img { vertical-align:middle; }
.pic-news h5 { font-weight:normal; font-size:14px; line-height:24px; }
.pic-news h5 a { color:#bfbfbf; }
.pic-news h5 a:hover { color:#f90; }
.pic-news p { margin:10px 0 0; line-height:30px; color:#666; }
.pic-news p a { display:inline-block; *display:inline;
zoom:1; height:25px; line-height:25px; border:1px #333 solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-raidus:2px; padding:0 8px; margin:0 14px; color:#999; }
.pic-news p a:hover { color:#f90; }
.pic-news .play-back { margin-left:0; background-position:-111px -450px; padding-left:25px; }
.pic-news .join { background-position:-114px -474px; padding-left:22px; }
.pic-news .joined { background-position:-119px -571px; }
.pic-news .join-each { background-position:-119px -591px; }
.pic-news .joined:hover, .pic-news .join-each:hover { cursor:text; text-decoration:none; color:#999; }
.popup .pic-list { margin:0 0 20px; padding:0; border:0 none; line-height:18px; }
.popup .pic-list h6 { font-size:14px; color:#999; }
.popup .pic-list h6 span { color:#f90; }
.popup .pic-list ul { overflow:hidden; zoom:1; }
.popup .pic-list li { float:left; width:122px; height:92px; border:1px #333 solid; margin:7px 23px 0 0; }
.popup .pic-list li a { position:relative; display:block; width:120px; height:90px; border:1px #000 solid; overflow:hidden; line-height:88px; *font-size:78px;
_font-size:79px; *font-family:Arial;
color:#fff; text-align:center; }
.popup .pic-list img { vertical-align:middle; }
.popup .pic-list .opt { position:absolute; left:0; bottom:0; width:120px; height:24px; line-height:24px; overflow:hidden; background:#000; filter:alpha(opacity=45); opacity:.45; }
.popup .pic-list .txt { position:absolute; font-size:12px; left:0; bottom:0; width:120px; height:24px; line-height:24px; overflow:hidden; color:#fff; text-align:center; }
.popup .pic-list a:hover, .popup .pic-list a:hover .txt { color:#f90; text-decoration:none; }
.page b { display:inline-block; font-family:tahoma; font-weight:normal; height:29px; margin:0 3px; text-align:center; vertical-align:middle; width:16px; }
.taga a:hover { color:#333; text-decoration:none; }
.marbot { margin-bottom:5px; }
.showtitle h1 { display:inline; font-size:12px; font-weight:normal; }
.martop { margin-top:5px; }
.footNew { font-size:0; margin-top:15px; }
.filter-item .set-btn, .tip-layer .hd, .tip-layer .close { background:url([img]http://icon.zol-img.com.cn/sj/images/sjbz_tip-bg.png[/img]) no-repeat; }
.filter-item .set-btn { float:right; width:88px; height:26px; padding:0; margin:0; line-height:26px; text-align:center; color:#fff; background-position:0 -36px; }
.filter-item .set-btn:hover { background-color:inherit; color:#fff; text-decoration:none; }
.layer-box { display:none; padding:5px; background:rgba(0,0,0,0.2); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#32000000, endColorstr=#32000000);
z-index:51; }
:root .layer-box { filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#00000000, endColorstr=#00000000);
}
.tip-layer { width:698px; border:1px solid #e0e0e0; background-color:#fff; }
.tip-layer .hd { position:relative; height:34px; line-height:34px; border-bottom:1px solid #e0e0e0; background-repeat:repeat-x; }
.tip-layer .hd h3 { padding:0 0 0 8px; font-size:14px; line-height:34px; }
.tip-layer .close { position:absolute; top:10px; right:10px; width:15px; height:15px; display:block; cursor:pointer; background-position:-73px -76px; margin:0; }
.tip-content .tip-left { float:left; width:152px; height:345px; padding:11px 0 0 10px; overflow-x:hidden; overflow-y:auto; }
.tip-content .tip-right { float:right; width:508px; height:345px; padding:11px 14px 0; overflow-x:hidden; overflow-y:auto; }
.tip-content .title { height:20px; line-height:20px; color:#999; }
.tip-content .brand-list { padding:10px 0 0; }
.tip-content .brand-list li { float:left; width:65px; height:20px; padding:2px 0; line-height:20px; overflow:hidden; }
.brand-list li a { display:inline-block; padding:0 5px; color:#333; }
.brand-list li a:hover { color:#fff; background-color:#f90; text-decoration:none; }
.brand-list .current a { background-color:#f60; color:#fff; }
.brand-list .current a:hover { background-color:#f60; color:#fff; text-decoration:none; }
.tip-content .phone-model-list { padding:0 0 10px; }
.tip-content .phone-model-list li { word-break:break-all; float:left; width:98px; height:20px; padding:2px 0; line-height:20px; }
.phone-model-list li { overflow:hidden; }
.phone-model-list li a { display:inline-block; padding:0 5px; color:#333; }
.phone-model-list li a:hover { color:#fff; background-color:#f90; text-decoration:none; }
.tip-content .phone-model-header { height:30px; line-height:30px; padding:6px 0 0; border-top:1px dotted #e0e0e0; font-size:12px; color:#999; font-weight:400; }
.tip-content .phone-model-header em { font-family:arial; font-size:18px; margin:0 5px; }
.layerbox-overlay { background:#000; filter:alpha(opacity=30); opacity:.3; -moz-opacity:.3; width:100%; height:100%; position:fixed; top:0; left:0; display:none; z-index:50; _position:absolute; _height:expression(documentElement.offsetHeight+"px");
_top:expression(documentElement.scrollTop+"px");
}
.code-box { width:159px; height:159px; border:1px solid #E4E4E4; overflow:hidden; vertical-align:middle; text-align:center; background-color:#fff; }
.code-box span { display:table-cell; width:159px; height:159px; vertical-align:middle; text-align:center; *display:block;
*font-size:138px;
*font-family:Airal;
}
.photo-side .code-box .code-img { border:0 none; vertical-align:middle; }
.ts_fy { background:url("http://icon.zol-img.com.cn/article/2011/tcbg.gif") repeat scroll 0 -26px transparent; color:#666; height:34px; left:-90px; line-height:30px; position:absolute; text-align:center; top:-35px; width:250px; }
.close { background:url("http://icon.zol-img.com.cn/article/2011/libg.gif") no-repeat scroll -1px -909px transparent; cursor:pointer; display:inline; float:right; height:7px; margin:6px 5px 0 0; width:8px; }
em { font-style:normal; }
.photo-opt .mobile-360link { padding:0; margin-right:14px; *margin-right:11px;
margin-left:0; }
.photo-opt .mobile-360link img { height:30px; margin-top:-2px; *margin-top:0;
vertical-align:middle; }
</style>
</head>
<body>
<!-- 代码开始 -->
<div class="wrapper top-main clearfix">
<div class="main tab mt15">
<!--切换图片-->
<div class="slide">
<ul id="bigSlideUl" class="slide-ul clearfix">
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" src="http://www.96kb.com/uploadfile/201312/19153358/images/1369383598982.jpg" alt="可爱的手机壁纸下载" /> <span class="pic-txt">可爱的手机壁纸下载(11张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" src="http://www.96kb.com/uploadfile/201312/19153358/images/1353485118249.jpg" alt="清纯非主流美女高清壁纸" /> <span class="pic-txt">清纯非主流美女高清壁(10张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" src="http://www.96kb.com/uploadfile/201312/19153358/images/1355218285736.jpg" alt="精选唯美风景手机壁纸" /> <span class="pic-txt">精选唯美风景手机壁纸(5张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1355742153253.jpg" alt="最新热门美女写真高清壁纸" /> <span class="pic-txt">最新热门美女写真高清(7张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1355468691609.jpg" alt="最新海贼王可爱动漫iPhone壁纸" /> <span class="pic-txt">最新海贼王可爱动漫i(8张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1354614801743.jpg" alt="卡通Q版手机壁纸" /> <span class="pic-txt">卡通Q版手机壁纸(8张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1372402137127.jpg" alt="经典动漫海贼王手机壁纸" /> <span class="pic-txt">经典动漫海贼王手机壁(10张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1370761386641.jpg" alt="文艺范高清卡通壁纸" /> <span class="pic-txt">文艺范高清卡通壁纸(11张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1372038703930.jpg" alt="小时代电影精美壁纸" /> <span class="pic-txt">小时代电影精美壁纸(15张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/137170892289.jpg" alt="可爱杨幂高清手机壁纸" /> <span class="pic-txt">可爱杨幂高清手机壁纸(13张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/13691345082.jpg" alt="可爱Q版海贼王one piece主题iPhone手机壁纸" /> <span class="pic-txt">可爱Q版海贼王one pi(10张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1368518565890.jpg" alt="安卓手机高清壁纸推荐" /> <span class="pic-txt">安卓手机高清壁纸推荐(11张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1368179008600.jpg" alt="潮人必备酷炫的美景壁纸" /> <span class="pic-txt">潮人必备酷炫的美景壁(15张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/136817468750.jpg" alt="高清美女安卓手机壁纸" /> <span class="pic-txt">高清美女安卓手机壁纸(11张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1367837316329.jpg" alt="非主流黑色背景文字手机壁纸" /> <span class="pic-txt">非主流黑色背景文字手(12张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1367138383721.jpg" alt="阳光下的美女手机壁纸图集" /> <span class="pic-txt">阳光下的美女手机壁纸(15张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1367062477163.jpg" alt="湖人高清手机壁纸下载" /> <span class="pic-txt">湖人高清手机壁纸下载(10张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1366770146652.jpg" alt="温馨笑容的美女手机壁纸" /> <span class="pic-txt">温馨笑容的美女手机壁(17张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1366622282843.jpg" alt="送给女孩的26个字母壁纸" /> <span class="pic-txt">送给女孩的26个字母壁(26张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1366375916978.png" alt="修丢丢十二星座卡通手机壁纸" /> <span class="pic-txt">修丢丢十二星座卡通手(12张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1364438734241.png" alt="三星Galaxy S4超漂亮全高清官方手机壁纸" /> <span class="pic-txt">三星Galaxy S4超漂亮(10张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1364279216643.jpg" alt="Showgirl人气萌主周嘉琪iphone壁纸" /> <span class="pic-txt">Showgirl人气萌主周嘉(10张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1363943359756.jpg" alt="唯美的氛围手机壁纸" /> <span class="pic-txt">唯美的氛围手机壁纸(11张)</span> </a></li>
<li> <a target="_blank" class="picimglink" href="http://www.kevin-ying.com/"> <img width="230" height="350" srch="http://www.96kb.com/uploadfile/201312/19153358/images/1363867851540.jpg" alt="阳光下的美景手机壁纸下载" /> <span class="pic-txt">懒人图库搜集整理</span> </a></li>
</ul>
</div>
<!--slide 切换按钮-->
<ul id="smallSlideUl" class="info-btn clearfix">
<li class="info-cur" id="mypic0" sid="0"><span>1</span></li>
<li id="mypic1" sid="1"><span>2</span></li>
<li id="mypic2" sid="2"><span>3</span></li>
<li id="mypic3" sid="3"><span>4</span></li>
<li id="mypic4" sid="4"><span>5</span></li>
<li id="mypic5" sid="5"><span>6</span></li>
<li id="mypic6" sid="6"><span>7</span></li>
<li id="mypic7" sid="7"><span>8</span></li>
</ul>
<em class="tab-shadow"></em></div>
</div>
<script>
$(".picimglink").css("text-decoration", "none");
$(".picimglink").bind({
mouseenter: function() {
$(this).children("span").animate({
bottom: "0px"
},
500)
},
mouseleave: function() {
$(this).children("span").clearQueue().animate({
bottom: "-30px"
},
500)
}
});
var biZhiDelayLoadImg = $("#bigSlideUl img");
var biZhiDelayLoadImgLength = biZhiDelayLoadImg.length;
for (var i = 3; i < biZhiDelayLoadImgLength; i++) {
var curDelayImg = biZhiDelayLoadImg.eq(i);
if (curDelayImg.attr("srch")) {
curDelayImg.attr("src", curDelayImg.attr("srch"));
curDelayImg.removeAttr("srch")
}
}
var _focus_num = $("#smallSlideUl > li").length;
var _focus_direction = true;
var _focus_pos = 0;
var _focus_max_length = _focus_num * 720;
var _focus_li_length = 720;
var _focus_dsq = null;
var _focus_lock = true;
function autoExecAnimate() {
$("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
var moveLen = _focus_pos * _focus_li_length;
$("#bigSlideUl").animate({
left: "-" + moveLen + "px"
},
600);
if (_focus_pos == (_focus_num - 1)) {
_focus_direction = false
}
if (_focus_pos == 0) {
_focus_direction = true
}
if (_focus_direction) {
_focus_pos++
} else {
_focus_pos--
}
}
_focus_dsq = setInterval("autoExecAnimate()", 6000);
$("#smallSlideUl > li").hover(function() {
_focus_pos = parseInt($(this).attr("sid"));
if (_focus_lock) {
clearInterval(_focus_dsq);
_focus_lock = false
}
$("#mypic" + _focus_pos).addClass("info-cur").siblings("li.info-cur").removeClass("info-cur");
var moveLen = _focus_pos * _focus_li_length;
$("#bigSlideUl").stop(true, true).animate({
left: "-" + moveLen + "px"
},
600)
},
function() {
if (_focus_lock == false) {
_focus_dsq = setInterval("autoExecAnimate()", 6000);
_focus_lock = true
}
});
$("#bigSlideUl").hover(function() {
if (_focus_lock) {
clearInterval(_focus_dsq);
_focus_lock = false
}
},
function() {
if (_focus_lock == false) {
_focus_dsq = setInterval("autoExecAnimate()", 6000);
_focus_lock = true
}
});
$(".pic-list2 li").hover(function() {
$(this).addClass("hover").siblings().removeClass("hover")
},
function() {
$(this).removeClass("hover")
});
</script>
<!-- 代码结束 -->
</body>
</html>
|
|
发表于 2015-9-24 18:39:55
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
转播
淘帖
|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记
