Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html lang="en">
<head>
<head>
-
<title>百度校园jQuery焦点图</title>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<script type="text/javaScript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
+
<title>jquery鼠标悬停上下显示遮罩标题与内容</title>
 +
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 +
<script type="text/javascript" src="/ajaxjs/jquery.easing.min.js"></script>
 +
<script>
 +
$(document).ready(function () {
 +
style = 'easeOutQuart';
 +
$('.photo').hover(
 +
function() {
 +
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
 +
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
 +
},
 +
function() {
 +
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
 +
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
 +
}
 +
);
 +
});
 +
</script>
<style>
<style>
-
html, form, h1, h2, h3, h4, h5, h6, p{margin:0; padding:0;}
+
.photo { position:relative; font-family:arial; width:800px; margin:0 auto; text-align:center; overflow:hidden; border:5px solid #000; width:350px; height:233px; }
-
body {
+
.photo .heading, .photo .caption { position:absolute; background:#000; height:50px; width:350px; opacity:0.6; }
-
margin:0; padding:0; border:none;
+
.photo .heading { top:-50px; }
-
font-size:12px;
+
.photo .caption { bottom:-50px; left:0px; }
-
line-height:150%;
+
.photo .heading span { color:#26c3e5; top:-50px; font-weight:bold; display:block; padding:5px 0 0 10px; }
-
color:#676767;
+
.photo .caption span { color:#999; font-size:9px; display:block; padding:5px 10px 0 10px; }
-
background:#fff;
+
-
font-family:Arial, Helvetica, sans-serif;
+
-
/*font-family:'\5FAE\8F6F\96C5\9ED1';*/
+
-
font-family:'\5B8B\4F53';
+
-
}
+
-
img{ margin:0; padding:0; border:none;}
+
-
ol, ul, li, dl, dt, dd{
+
-
margin:0; padding:0;
+
-
list-style: none;
+
-
}
+
-
.fl{ float:left;}
+
-
.fr{ float:right;}
+
-
a{ color:#0068CC; text-decoration:none;}
+
-
a:hover{ color:#0151A7; text-decoration:underline;}
+
-
.w1003{ width:800px; margin:0 auto;}
+
-
.w733{ width:733px; overflow:hidden;}
+
-
.w256{ width:256px; overflow:hidden;}
+
-
.highlight_tip{ padding:7px 0 0; z-index:10; position:relative; position:absolute; left:0; bottom:0; width:733px; height:57px;}
+
-
.highlight_tip ul li{ position:absolute; z-index:20; top:10px; cursor:pointer;}
+
-
ul li.tab1{ left:8px}
+
-
ul li.tab2{ left:110px}
+
-
ul li.tab3{ left:212px}
+
-
ul li.tab4{ left:316px}
+
-
ul li.tab5{ left:419px}
+
-
ul li.tab6{ left:524px}
+
-
ul li.tab7{ left:628px}
+
-
.v_content_list ul{ position:absolute}
+
-
.v_content_list ul li{ width:733px; float:left; overflow:hidden; position:relative}
+
-
li.navigation img{width:95px;border: 1px #fff solid;position:absolute;opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5; filter:alpha(opacity=50);}
+
-
li.current img{border: 2px #0076A8 solid;opacity:1;-moz-opacity:1;-webkit-opacity:1;filter:alpha(opacity=100)}
+
-
#slider_container_2 { float: left; margin: 0 0 0 -15px; padding: 15px; width: 700px; background: url(../img/bg.png) no-repeat 0 0; }
+
-
.SliderName_2 {
+
-
float: left;
+
-
height: 337px;
+
-
overflow: hidden;
+
-
}
+
-
.SliderNamePrev_2 {
+
-
background: url(../img/left.png) no-repeat left center;
+
-
width: 50px;
+
-
height: 450px;
+
-
display: block;
+
-
position: absolute;
+
-
top: 0;
+
-
left: 0;
+
-
text-decoration: none;
+
-
}
+
-
.SliderNameNext_2 {
+
-
background: url(../img/right.png) no-repeat right center;
+
-
width: 50px;
+
-
height: 450px;
+
-
display: block;
+
-
position: absolute;
+
-
top: 0;
+
-
right: 0;
+
-
text-decoration: none;
+
-
}
+
-
.SliderName_2Description {
+
-
padding: 10px;
+
-
font-family: Tahoma,Arial,Helvetica;
+
-
font-size: 14px;
+
-
line-height: 30px;
+
-
letter-spacing: 1px;
+
-
text-align: center;
+
-
color: #ffffff;
+
-
text-shadow: 0 1px 3px #000000;
+
-
}
+
-
#SliderNameNavigation_2 { margin: 0; padding: 0; text-align: center; position: absolute;bottom: 0px;z-index: 100;left:9px; }
+
-
#SliderNameNavigation_2 a:link, #SliderNameNavigation_2 a:active, #SliderNameNavigation_2 a:visited, #SliderNameNavigation_2 a:hover{
+
-
margin: 0;
+
-
padding: 0;
+
-
font-size: 0;
+
-
line-height: 0;
+
-
text-decoration: none;
+
-
}
+
-
#SliderNameNavigation_2 a img
+
-
{
+
-
border: 1px #fff solid;
+
-
width: 95px;
+
-
opacity:0.5;
+
-
-moz-opacity:0.5;
+
-
-webkit-opacity:0.5;
+
-
filter:alpha(opacity=50);
+
-
height: 44px;
+
-
}
+
-
#SliderNameNavigation_2 a.active img
+
-
{
+
-
border: 2px #0076A8 solid;
+
-
opacity:1;
+
-
-moz-opacity:1;
+
-
-webkit-opacity:1;
+
-
filter:alpha(opacity=100);
+
-
}
+
-
div.w733{ position:relative;left:0px;top:0px;}
+
</style>
</style>
</head>
</head>
<body>
<body>
-
<div class="w1003 main">
+
<div class="photo">
-
<div class="boxa" style="margin-top:10px;">
+
<div class="heading"><span>源码爱好者网站</span></div>
-
<script type="text/javascript">
+
<img src="/jscss/demoimg/201402/fall.jpg" width="350" height="233" alt="" />
-
$(document).ready(function(){
+
<div class="caption"><span>提供精品开源源码、网页特效、教程文章等建站资源和素材。</span></div>
-
var picWidth = $(".v_content_list").width(); //获取显示焦点图的宽度
+
-
var len = $(".v_content_list ul li").length; //获取焦点图个数
+
-
var img_container = $(".v_content_list ul"); //定义变量
+
-
var button_container = $(".highlight_tip li"); //定义变量
+
-
var index = 0; //初始化index=0
+
-
//设置tab按钮的背景透明度为0.5
+
-
//$(".highlight_bg").css("opacity","0.5")
+
-
//为tab按钮添加鼠标滑入事件，以显示相应的内容
+
-
button_container.mouseenter(function() {
+
-
index = button_container.index(this);
+
-
showPics(index);
+
-
}).eq(0).trigger("mouseenter");
+
-
//计算出外围ul元素的宽度
+
-
img_container.css("width",picWidth * (len));
+
-
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
+
-
$(".v_content_list").hover(function() {
+
-
clearInterval(picTimer);
+
-
},function() {
+
-
picTimer = setInterval(function() {
+
-
showPics(index);
+
-
index++;
+
-
if(index == len) {index = 0;}
+
-
},4000); //4000代表自动播放的间隔，单位：毫秒，1秒=1000毫秒
+
-
}).trigger("mouseleave");
+
-
//显示图片函数，根据接收的index值显示相应的内容
+
-
function showPics(index) { //默认效果
+
-
var nowLeft = -index*picWidth; //根据index值计算ul元素的left值
+
-
//alert(nowLeft);
+
-
img_container.stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
+
-
button_container.eq(index).addClass("current").siblings().removeClass("current"); //为当前的tab按钮添加class="current"
+
-
//button_container.eq(index).stop(true).animate({"opacity":"1","top":-5+"px"},300).siblings().stop(true).animate({"opacity":"0.6","top":10+"px"},300); //为当前的tab按钮添加选中的效果
+
-
}
+
-
})
+
-
</script>
+
-
<div class="w733 fl" style="height:337px;">
+
-
<div class="highlight_tip">
+
-
<ul class="tab clear">
+
-
<li class="tab1 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="99" height="48" /></a>
+
-
</li>
+
-
<li class="tab2 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="99" height="48" /></a>
+
-
</li>
+
-
<li class="tab3 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="99" height="48" /></a>
+
-
</li>
+
-
<li class="tab4 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="99" height="48" /></a>
+
-
</li>
+
-
<li class="tab5 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="99" height="48" /></a>
+
-
</li>
+
-
<li class="tab6 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="99" height="48" /></a>
+
-
</li>
+
-
<li class="tab7 navigation">
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="99" height="48" /></a>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
<div class="v_content_list">
+
-
<ul class="clear">
+
-
<li></a>
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_5281c48354ddb.jpg" width="733" height="337" /></a></li>
+
-
<li><a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_529707516da03.jpg" width="733" height="337" /></a></li>
+
-
<li><a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_5289cedae6005.png" width="733" height="337" /></a></li>
+
-
<li>
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_52689f01d614e.jpg" width="733" height="337" /></a></li>
+
-
<li>
+
-
<a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_529703723c8d7.jpg" width="733" height="337" /></a></li>
+
-
<li><a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_50594c1f97227.jpg" width="733" height="337" /></a></li>
+
-
<li><a href="/" target="_blank">
+
-
<img src="/jscss/demoimg/201402/up_514fc23184f3d.jpg" width="733" height="337" /></a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
</div>
</div>
<div style="text-align:center;clear:both">
<div style="text-align:center;clear:both">

Revision as of 08:16, 6 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> jquery鼠标悬停上下显示遮罩标题与内容

源码爱好者网站
提供精品开源源码、网页特效、教程文章等建站资源和素材。

Retrieved from "http://2014.igem.org/Team:LZU-China/tempfortest"