Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<!DOCTYPE HTML>
 +
<html lang="en-US">
<head>
<head>
-
<title>图片说明的显示和隐藏动画</title>
+
<meta charset="UTF-8">
-
<meta charset='utf-8'/>
+
<title>JS图片放大展示效果</title>
-
<style type="text/css">
+
<style>
-
body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;font-family:微软雅黑;}
+
* {margin:0; padding:0}
-
img{border:0px;}
+
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
-
.picList{width:100%;float:left;}
+
ul, li {list-style:none}
-
.picList .col{width:300px;height:200px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
+
.cf {zoom:1}
-
.picList .col img,.col a{position:absolute;top:0px;left:0px;}
+
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
-
.picList .col img{width:100%;}
+
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
-
.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;}
+
#banner {width:800px; margin:0 auto; position:relative; background:#FFF; height:400px; overflow:hidden}
-
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
+
#banner ul {}
 +
#banner li {float:left; width:190px; height:190px; cursor:pointer;padding:5px}
 +
#banner li img {width:190px; height:190px; position:absolute; z-index:4; left:5px; top:5px}
 +
#banner li span {display:block; width:170px; height:170px; border:10px solid #000; position:absolute; background:#CCC; opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
 +
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
 +
.btn_wrap {position:absolute; left:820px; top:150px; height:100px; width:37px}
 +
#goUp {background:url(images/nav.png) no-repeat 4px 4px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; top:0;}
 +
#goUp:hover {background-position:-34px 4px}
 +
#goDown {background:url(images/nav.png) no-repeat 4px -52px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; bottom:0;}
 +
#goDown:hover {background-position:-34px -52px}
</style>
</style>
</head>
</head>
<body>
<body>
-
<div class='picList'>
+
<div class="wrap">
-
<div class='col'>
+
<div id="banner">
-
<img src='/jscss/demoimg/wall_s5.jpg'/><a href='#'>古老巨石阵<br/>巨石阵又称索尔兹伯里石环、环状列石、太阳神庙、史前石桌、斯通亨治石栏、斯托肯立石圈等名，是欧洲著名的史前时代文化神庙遗址，位于英格兰威尔特郡索尔兹伯里平原。</a>
+
<ul class="cf">
-
</div>
+
<li><span></span><img src="/jscss/demoimg/wall1.jpg" alt="" /></li>
-
<div class='col'>
+
<li><span></span><img src="/jscss/demoimg/wall2.jpg" alt="" /></li>
-
<img src='/jscss/demoimg/wall_s9.jpg'/><a href='#'>加拿大自然风光<br/>加拿大国家森林公园在加拿大塞尔客克山和珞矶山上，掩映于积雪的峰巅、庞大的冰河和澄澈的湖沼之间的，是全世界最壮丽的国家公园。</a>
+
<li><span></span><img src="/jscss/demoimg/wall3.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall4.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall5.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall6.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall7.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall8.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall9.jpg" alt="" /></li>
 +
<li><span></span><img src="/jscss/demoimg/wall10.jpg" alt="" /></li>
 +
</ul>
 +
<div class="btn_wrap">
 +
<a href="javascript:;" id="goUp">向上走着</a>
 +
<a href="javascript:;" id="goDown">向下走着</a>
 +
</div>
</div>
</div>
</div>
</div>
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 
<script type="text/javascript">
<script type="text/javascript">
-
var temp=160;
+
var JSHELPER = {
-
$('.picList .col').hover(function(){
+
initi: function() {
-
$(this).find('a').stop(true).animate({top: temp=(temp==0?160:0) });
+
},
-
});
+
animate: function(obj, attrList, callback) {
 +
clearInterval(obj.timer);
 +
obj.timer = setInterval(function() {
 +
var isStop = true;
 +
for(var attr in attrList) {
 +
var curAttr = attr === "opacity" ? Math.round(parseFloat(JSHELPER.getStyle(obj, attr) * 100)) : parseInt(JSHELPER.getStyle(obj, attr));
 +
var speed = (attrList[attr] - curAttr) / 8;
 +
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 +
if(attr === "opacity") {
 +
obj.style.filter = "alpha(opacity=" + (curAttr + speed) + ")";
 +
obj.style.opacity = (curAttr + speed) / 100;
 +
} else {
 +
obj.style[attr] = curAttr + speed + "px";
 +
}
 +
curAttr != attrList[attr] && (isStop = false);
 +
}
 +
if(isStop) {
 +
clearInterval(obj.timer);
 +
!!callback && callback();
 +
}
 +
}, 15);
 +
},
 +
$: function(params) {
 +
switch (params.charAt(0)) {
 +
case "#":
 +
return document.getElementById(params.substring(1));
 +
break;
 +
case ".":
 +
return this.getByClass(document, params.substring(1));
 +
default:
 +
return document.getElementsByTagName(params);
 +
}
 +
},
 +
getStyle: function(obj, attr) {
 +
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
 +
},
 +
getByClass: function(pn, cn) {
 +
var ae = pn.getElementsByTagName("*"),
 +
rent = [],
 +
re = new RegExp('\\b' + cn + '\\b', 'i');
 +
for(var i = 0, len = ae.length; i < len; i++) {
 +
ae[i].className.search(re) != -1 && rent.push(ae[i]);
 +
}
 +
return rent;
 +
}
 +
};
 +
window.onload = function() {
 +
var btnDown = JSHELPER.$("#goDown"),
 +
btnUp = JSHELPER.$("#goUp"),
 +
wrap = JSHELPER.$("#banner"),
 +
liList = wrap.children[0].children,
 +
len = liList.length;
 +
wrap.style.overflow = "visible";
 +
//设置 left 和  top
 +
for(var i = 0; i < len; i++) {
 +
liList[i].style.left = liList[i].offsetLeft + "px";
 +
if(i >= 12) {
 +
liList[i].style.top = "400px";
 +
} else {
 +
liList[i].style.top = liList[i].offsetTop + "px";
 +
}
 +
}
 +
//添加 position:absolute
 +
for(var i = 0; i < len; i++) {
 +
liList[i].style.position = "absolute";
 +
}
 +
//把容器外的设置为透明
 +
for(var i = 8; i < len; i++) {
 +
liList[i].style.filter = "alpha(opacity=0)";
 +
liList[i].style.opacity = 0;
 +
liList[i].style.display = "none";
 +
}
 +
 +
var now = 0;
 +
//上一个
 +
btnUp.onclick = function() {
 +
if(now == 0) {
 +
return;
 +
}
 +
var i = now + 8;
 +
i = i >= len ? (len-1) : i;
 +
var timerDo = setInterval(function() {
 +
if(i < now) {
 +
liList[i].style.display = "block";
 +
JSHELPER.animate(liList[i], {top: 0, opacity: 100});
 +
} else if(i < now + 4) {
 +
JSHELPER.animate(liList[i], {top: 200});
 +
} else {
 +
JSHELPER.animate(liList[i], {top: 400, opacity: 0});
 +
}
 +
i--;
 +
if( i == now - 5 ) {
 +
now -= 4;
 +
for(var m = len-1; m > now+7; m--) {
 +
liList[m].style.display = "none";
 +
}
 +
clearInterval(timerDo);
 +
}
 +
}, 50);
 +
};
 +
//下一个
 +
btnDown.onclick = function() {
 +
if(now >= len - 8) {
 +
return;
 +
}
 +
var i = now;
 +
var timerDo = setInterval(function() {
 +
if(i < now + 4) {
 +
JSHELPER.animate(liList[i], {top: -200, opacity: 0});
 +
} else if(i < now + 8) {
 +
JSHELPER.animate(liList[i], {top: 0});
 +
} else {
 +
liList[i].style.display = "block";
 +
JSHELPER.animate(liList[i], {top: 200, opacity: 100});
 +
}
 +
i++;
 +
if( i == now + 12 ) {
 +
now += 4;
 +
for(var m = 0; m < now; m++) {
 +
liList[m].style.display = "none";
 +
}
 +
clearInterval(timerDo);
 +
}
 +
}, 50);
 +
};
 +
 +
//放大镜
 +
for(var i = 0; i < len; i++) {
 +
(function(i) {
 +
liList[i].children[0].onmouseover = function() {
 +
liList[i].style.zIndex = 100;
 +
JSHELPER.animate(liList[i].children[0], {width:280, height: 280, left: -50, top: -50});
 +
JSHELPER.animate(liList[i].children[1], {width:300, height: 300, left: -50, top: -50});
 +
};
 +
liList[i].children[0].onmouseout = function() {
 +
liList[i].style.zIndex = 10;
 +
JSHELPER.animate(liList[i].children[0], {width:170, height: 170, left: 5, top: 5});
 +
JSHELPER.animate(liList[i].children[1], {width:190, height: 190, left: 5, top: 5});
 +
};
 +
})(i);
 +
}
 +
 +
};
</script>
</script>
</body>
</body>
</html>
</html>

Revision as of 08:26, 6 September 2014

<!DOCTYPE HTML> JS图片放大展示效果

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