基于jQuery实现的焦点轮换效果
2010-03-06 11:58
846 查看
上面就是界面效果.
源码下载: http://d.download.csdn.net/down/2100796/lgg201
源码: 注意, 需要引入jquery, 请到官方网站下载
<!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" mce_href="scripts/jquery/jquery-ui-1.7.2.custom.css">
<mce:script type="text/javascript" src="scripts/jquery-1.3.2.js" mce_src="scripts/jquery-1.3.2.js"></mce:script>
<mce:script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.js" mce_src="scripts/jquery-ui-1.7.2.custom.js"></mce:script>
<mce: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;}
--></mce:style><style type="text/css" mce_bogus="1">.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>
<mce: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');
});
});
// --></mce: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" mce_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" mce_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" mce_src="images/01.jpg">
</div>
<div class="image-item">
<img src="images/02.jpg" mce_src="images/02.jpg">
</div>
<div class="image-item">
<img src="images/03.jpg" mce_src="images/03.jpg">
</div>
<div class="image-item">
<img src="images/04.jpg" mce_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" mce_src="images/01.jpg">
</div>
</div>
<div class="image-button-item" index="2">
<div class="image-button-border">
<img src="images/02.jpg" mce_src="images/02.jpg">
</div>
</div>
<div class="image-button-item" index="3">
<div class="image-button-border">
<img src="images/03.jpg" mce_src="images/03.jpg">
</div>
</div>
<div class="image-button-item" index="4">
<div class="image-button-border">
<img src="images/04.jpg" mce_src="images/04.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于jquery实现图片广告轮换效果代码
- 基于JQuery实现图片轮播效果(焦点图)
- 基于JQuery的实现图片轮播效果(焦点图)
- 基于JQuery的实现图片轮播效果(焦点图)
- 基于Jquery实现焦点图淡出淡入效果
- 基于jquery实现图片广告轮换效果代码
- 基于Jquery实现焦点图淡出淡入效果
- 基于JQuery的实现图片轮播效果(焦点图)
- 带滑动的jquery焦点图轮换效果
- 基于jQuery实现简单的折叠菜单效果
- 基于jquery实现省市联动效果
- jquery实现焦点轮播效果
- jquery点击回车键实现登录效果并默认焦点
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
- 基于jquery的手风琴图片展示效果实现方法
- 基于jquery的热点内容轮换效果
- JavaScript / Jquery 实现纵向图片焦点轮换
- 基于jquery的网站幻灯片切换效果焦点图代码