Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<title>图片放大</title>
+
<html>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
<head>
 +
<title>图片说明的显示和隐藏动画</title>
 +
<meta charset='utf-8'/>
<style type="text/css">
<style type="text/css">
-
*{padding:0;margin:0}
+
body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;font-family:微软雅黑;}
-
img{display:block;}
+
img{border:0px;}
-
#www_zzjs_net{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
+
.picList{width:100%;float:left;}
-
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
+
.picList .col{width:300px;height:200px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
-
#www_zzjs__net{border:1px #ddd solid;width:0px;height:0px;position:absolute}
+
.picList .col img,.col a{position:absolute;top:0px;left:0px;}
-
#zzjs_net{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
+
.picList .col img{width:100%;}
 +
.picList .col a{display:block;width:280px;height:180px;top:160px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
 +
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
</style>
</style>
-
<script language="JavaScript">
+
</head>
-
<!--
+
<body>
-
var srcX = 1024; //原图大小,可以任意设置
+
<div class='picList'>
-
var srcY = 768;
+
<div class='col'>
-
var bigX = 384; //预览窗大小,可以任意设置
+
<img src='/jscss/demoimg/wall_s5.jpg'/><a href='#'>古老巨石阵<br/>巨石阵又称索尔兹伯里石环、环状列石、太阳神庙、史前石桌、斯通亨治石栏、斯托肯立石圈等名，是欧洲著名的史前时代文化神庙遗址，位于英格兰威尔特郡索尔兹伯里平原。</a>
-
var bigY = 512;
+
</div>
-
var smallX = 384; //缩略图宽度
+
<div class='col'>
-
var smallY = srcY * smallX / srcX;
+
<img src='/jscss/demoimg/wall_s9.jpg'/><a href='#'>加拿大自然风光<br/>加拿大国家森林公园在加拿大塞尔客克山和珞矶山上，掩映于积雪的峰巅、庞大的冰河和澄澈的湖沼之间的，是全世界最壮丽的国家公园。</a>
-
var www_zzjs__netX = bigX / srcX * smallX; //预览范围
+
</div>
-
var www_zzjs__netY = bigY / srcY * smallY;
+
-
var bl = srcX / smallX;//缩小比例
+
-
var border = 1; //边框
+
-
window.onload=function (){
+
-
smallpic.width=smallX;
+
-
smallpic.height=smallY;
+
-
bigpic.width=srcX;
+
-
bigpic.height=srcY;
+
-
www_zzjs__net.style.width=www_zzjs__netX;
+
-
www_zzjs__net.style.height=www_zzjs__netY;
+
-
www_zzjs_net.style.borderWidth=border;
+
-
bigbox.style.borderWidth=border;
+
-
if (window.event){
+
-
www_zzjs_net.style.width=smallpic.offsetWidth+border*2;
+
-
www_zzjs_net.style.height=smallpic.offsetHeight+border*2;
+
-
bigbox.style.width=bigX+border*2;
+
-
bigbox.style.height=bigY+border*2;
+
-
}else{
+
-
www_zzjs_net.style.width=smallpic.offsetWidth;
+
-
www_zzjs_net.style.height=smallpic.offsetHeight;
+
-
bigbox.style.width=bigX;
+
-
bigbox.style.height=bigY;
+
-
}
+
-
move(event);
+
-
}
+
-
function move(e){
+
-
var e = window.event?window.event:e;
+
-
var iebug = 0;
+
-
if (window.event){
+
-
var vX = e.offsetX - www_zzjs__netX/2;
+
-
var vY = e.offsetY - www_zzjs__netY/2;
+
-
}else{
+
-
var vX = e.pageX - www_zzjs__netX/2 - www_zzjs_net.offsetLeft - border;
+
-
var vY = e.pageY - www_zzjs__netY/2 - www_zzjs_net.offsetTop - border;
+
-
iebug = 2;
+
-
}
+
-
if (vX < 0) vX = 0;
+
-
if (vY < 0) vY = 0;
+
-
if (vX > smallX - www_zzjs__netX - iebug) vX = smallX - www_zzjs__netX - iebug;
+
-
if (vY > smallY - www_zzjs__netY - iebug) vY = smallY - www_zzjs__netY - iebug;
+
-
bigpico.style.marginLeft = - vX * bl
+
-
bigpico.style.marginTop = - vY * bl
+
-
www_zzjs__net.style.left = vX + www_zzjs_net.offsetLeft + border;
+
-
www_zzjs__net.style.top = vY + www_zzjs_net.offsetTop + border;
+
-
}
+
-
</script>
+
-
<div id="zzjs_net"></div>
+
-
<div id="www_zzjs_net"><img src="/jscss/demoimg/wall_s3.jpg" name="smallpic" width="384" height="512" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('www_zzjs__net').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('www_zzjs__net').style.display='none'"></div>
+
-
<div id="bigbox"  style="display:none"><div id="bigpico"><img src="/jscss/demoimg/wall3.jpg" name="bigpic" width="384" height="512"  border="0" id="bigpic"></div>
+
</div>
</div>
-
<div id="www_zzjs__net" onmousemove="move(event) "style="display:none"></div>
+
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 +
<script type="text/javascript">
 +
var temp=160;
 +
$('.picList .col').hover(function(){
 +
$(this).find('a').stop(true).animate({top: temp=(temp==0?160:0) });
 +
});
 +
</script>
 +
</body>
 +
</html>

Revision as of 08:25, 6 September 2014

图片说明的显示和隐藏动画

古老巨石阵
巨石阵又称索尔兹伯里石环、环状列石、太阳神庙、史前石桌、斯通亨治石栏、斯托肯立石圈等名，是欧洲著名的史前时代文化神庙遗址，位于英格兰威尔特郡索尔兹伯里平原。
加拿大自然风光
加拿大国家森林公园在加拿大塞尔客克山和珞矶山上，掩映于积雪的峰巅、庞大的冰河和澄澈的湖沼之间的，是全世界最壮丽的国家公园。

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