基于jquery的焦点轮换特效资源-CSDN文库

共63个文件

svn-base：33个

png：17个

jpg：4个

HTML

JQUERY

焦点轮换

网页特效

需积分: 9 74 浏览量 2010-03-06 11:57:35 上传评论收藏 525KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery.focusChain.rar （63个子文件）

images

02.jpg 42KB

04.jpg 40KB

selected_background.gif 909B

03.jpg 45KB

01.jpg 30KB

界面效果.png 185KB

scripts

jquery-ui-1.7.2.custom.js 299KB

jquery-1.3.2.js 118KB

index.html 4KB

styles

jquery

jquery-ui-1.7.2.custom.css 27KB

images

ui-icons_f7a50d_256x240.png 5KB

ui-bg_glass_45_0078ae_1x400.png 136B

ui-bg_glass_75_79c9ec_1x400.png 132B

ui-icons_d8e7f3_256x240.png 4KB

ui-icons_056b93_256x240.png 4KB

ui-bg_inset-hard_100_fcfdfd_1x100.png 88B

ui-bg_gloss-wave_45_e14f1c_500x100.png 4KB

ui-icons_e0fdff_256x240.png 4KB

ui-icons_0078ae_256x240.png 4KB

ui-icons_f5e175_256x240.png 5KB

ui-bg_flat_75_aaaaaa_40x100.png 180B

ui-bg_gloss-wave_35_f6a828_500x100.png 4KB

ui-bg_glass_55_f8da4e_1x400.png 131B

ui-icons_fcd113_256x240.png 4KB

.svn

props

Thumbs.db.svn-work 53B

prop-base

ui-bg_gloss-wave_75_2191c0_500x100.png.svn-base 53B

ui-icons_f5e175_256x240.png.svn-base 53B

ui-icons_d8e7f3_256x240.png.svn-base 53B

ui-icons_fcd113_256x240.png.svn-base 53B

ui-icons_e0fdff_256x240.png.svn-base 53B

ui-bg_glass_45_0078ae_1x400.png.svn-base 53B

ui-bg_gloss-wave_35_f6a828_500x100.png.svn-base 53B

ui-icons_056b93_256x240.png.svn-base 53B

ui-bg_glass_55_f8da4e_1x400.png.svn-base 53B

ui-bg_gloss-wave_45_e14f1c_500x100.png.svn-base 53B

ui-bg_glass_75_79c9ec_1x400.png.svn-base 53B

ui-bg_gloss-wave_50_6eac2c_500x100.png.svn-base 53B

ui-bg_inset-hard_100_fcfdfd_1x100.png.svn-base 53B

ui-bg_flat_75_aaaaaa_40x100.png.svn-base 53B

ui-icons_0078ae_256x240.png.svn-base 53B

ui-icons_f7a50d_256x240.png.svn-base 53B

tmp

props

prop-base

text-base

ui-bg_gloss-wave_75_2191c0_500x100.png.svn-base 3KB

ui-icons_f5e175_256x240.png.svn-base 5KB

ui-icons_d8e7f3_256x240.png.svn-base 4KB

ui-icons_fcd113_256x240.png.svn-base 4KB

ui-icons_e0fdff_256x240.png.svn-base 4KB

ui-bg_glass_45_0078ae_1x400.png.svn-base 136B

ui-bg_gloss-wave_35_f6a828_500x100.png.svn-base 4KB

ui-icons_056b93_256x240.png.svn-base 4KB

ui-bg_glass_55_f8da4e_1x400.png.svn-base 131B

ui-bg_gloss-wave_45_e14f1c_500x100.png.svn-base 4KB

ui-bg_glass_75_79c9ec_1x400.png.svn-base 132B

ui-bg_gloss-wave_50_6eac2c_500x100.png.svn-base 5KB

ui-bg_inset-hard_100_fcfdfd_1x100.png.svn-base 88B

ui-bg_flat_75_aaaaaa_40x100.png.svn-base 180B

ui-icons_0078ae_256x240.png.svn-base 4KB

ui-icons_f7a50d_256x240.png.svn-base 5KB

entries 3KB

ui-bg_gloss-wave_75_2191c0_500x100.png 3KB

ui-bg_gloss-wave_50_6eac2c_500x100.png 5KB

Thumbs.db 36KB

.svn

props

prop-base

tmp

props

prop-base

text-base

jquery-ui-1.7.2.custom.css.svn-base 27KB

entries 365B

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>焦点轮换特效</title> <link rel="stylesheet" type="text/css" href="scripts/jquery/jquery-ui-1.7.2.custom.css"> <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script> <script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.js"></script> <style type="text/css"> .author-information{background: #BBBBBB; width: 500px; height: 100px; margin: auto; text-align: left; padding: 5px 5px;} .author-information-label{clear: both; float: left; color: white; width: 80px; text-align: right; margin: 3px 0;} .author-information-information{color: blue; font-weight: bold; float: left; text-align: left; width: 420px; margin: 3px 0;} .outer-wrapper{} .inner-wrapper{margin: auto; width: 525px; height: 245px; border: 1px solid #BBBBBB; background: #F8F8F8;} .large-area{margin: 9px 9px 0 9px; width: 410px; height: 225px; position: relative; border: 1px solid #FFFFFF; overflow: hidden;} .image-list{position: absolute; left: 0px; top: 0px;} .image-item{width: 410px; height: 225px;} .image-item img{width: 410px; height: 225px;} .title-area{width: 410px; height: 35px; position: absolute; bottom: 0px; filter: alpha(opacity=50); background: #000000; overflow: hidden;} .title-list{position: absolute; left: 0px; top: 0px; width: 410px;} .title-item{width: 400px; height: 25px; line-height: 25px; margin: 5px 10px; color: #FFFFFF;} .small-area{position: relative; left: 421px; top: -226px; width: 90px; height: 225px;} .image-button-list{width: 90px; height: 225px; overflow: hidden;} .image-button-item{width: 90px; height: 57px;} .image-button-border{width: 90px; height: 57px; background: #F8F8F8; filter: alpha(opacity=50); cursor: pointer;} .image-button-border:hover{background: url("images/selected_background.gif"); filter: none;} /*.image-button-border-selected{background: url("images/selected_background.gif"); filter: none;}*/ .image-button-item img{width: 75px; height: 45px; margin: 7px 0 0 11px;} </style> <script type="text/javascript"> $(function() { $('.image-button-item').mouseover(function() { $('.image-list').css('top', -(($(this).attr('index') - 1) * 225)); $('.title-list').css('top', -(($(this).attr('index') - 1) * 30)); $(this).addClass('selected'); }); }); </script> </head> <body> <div class="outer-wrapper"> <div class="author-information"> <div class="author-information-label">网络昵称:</div><div class="author-information-information">selfimpr</div> <div class="author-information-label">个人博客:</div><div class="author-information-information"><a href="http://blog.csdn.net/lgg201">http://blog.csdn.net/lgg201</a></div> <div class="author-information-label">E-mail:</div><div class="author-information-information"><a href="mailto:lgg860911@yahoo.com.cn">lgg860911@yahoo.com.cn</a></div> <div class="author-information-label">声明:</div><div class="author-information-information">任何形式的转载请保留原作者信息.</div> </div> </div> <hr> <div class="outer-wrapper"> <div class="inner-wrapper"> <div class="large-area"> <div class="image-list"> <div class="image-item"> <img src="images/01.jpg"> </div> <div class="image-item"> <img src="images/02.jpg"> </div> <div class="image-item"> <img src="images/03.jpg"> </div> <div class="image-item"> <img src="images/04.jpg"> </div> </div> <div class="title-area"> <div class="title-list"> <div class="title-item">标题1</div> <div class="title-item">标题2</div> <div class="title-item">标题3</div> <div class="title-item">标题4</div> </div> </div> </div> <div class="small-area"> <div class="image-button-list"> <div class="image-button-item" index="1"> <div class="image-button-border"> <img src="images/01.jpg"> </div> </div> <div class="image-button-item" index="2"> <div class="image-button-border"> <img src="images/02.jpg"> </div> </div> <div class="image-button-item" index="3"> <div class="image-button-border"> <img src="images/03.jpg"> </div> </div> <div class="image-button-item" index="4"> <div class="image-button-border"> <img src="images/04.jpg"> </div> </div> </div> </div> </div> </div> </body> </html>

评论收藏

内容反馈