小案例之手风琴和多图片中心点放大
Posted Beyrl.pan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小案例之手风琴和多图片中心点放大相关的知识，希望对你有一定的参考价值。
手风琴：
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{list-style-type: none;margin: 0;padding: 0;}
#box{position: relative;margin: 50px auto;border: 1px solid black;
width:700px;height: 300px;overflow: hidden;
}
#box li{width:500px;height: 300px;position: absolute;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var aLi=oBox.children;
var w=50;
for(var i=1;i<aLi.length;i++){
aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+‘px‘;
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i<=this.index){
move(aLi[i],{left:w*i});
//aLi[i].style.left=w*i+‘px‘;
}else{
//aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+‘px‘;
move(aLi[i],{left:oBox.offsetWidth-w*(aLi.length-i)}) ;
}
}
};
}
}
</script>
</head>
<body>
<ul id="box">
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
</ul>
</body>
</html>
引进的move.js为：
/**
* Created by 潘泽慧 on 2016/11/7.
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function move(obj, json, options) {
clearInterval(obj.timer);
options = options || {};
options.time = options.time || 500;
options.easeing = options.easeing || ‘ease-out‘;
var dis = {};
var start = {};
for (var name in json) {
start[name] = parseFloat(getStyle(obj, name));
dis[name] = json[name] - start[name];
}
var count = Math.floor(options.time / 30);
var n = 0;
obj.timer = setInterval(function () {
n++;
for (var name in json) {
switch (options.easeing) {
case ‘linear‘:
var a = n / count;
var cur = start[name] + dis[name] * a;
break;
case ‘ease-in‘:
var a = n / count;
var cur = start[name] + dis[name] * a * a * a;
break;
case ‘ease-out‘:
var a = 1 - n / count;
var cur = start[name] + dis[name] * (1 - a * a * a);
}
if (name == ‘opacity‘) {
obj.style.opacity = cur;
obj.style.filter = ‘alpha(opacity:‘ + cur * 100 + ‘)‘;
} else {
obj.style[name] = cur + ‘px‘;
}
}
if (n == count) {
clearInterval(obj.timer);
options.fn && options.fn();
}
}, 30);
}
多图片中心点放大：
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{list-style-type: none;margin: 0;padding: 0;}
#box ul li{width:100px;height:100px;float: left;margin:10px;background: #ececec;}
#box{width:366px;height: 366px;margin: 100px auto;border: 1px solid black;}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var aLi=document.getElementsByTagName(‘li‘);
var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]={
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
}
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position=‘absolute‘;
aLi[i].style.left=arr[i].left+‘px‘;
aLi[i].style.top=arr[i].top+‘px‘;
aLi[i].style.margin="0px";
}
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
// this.style.width=‘200px‘;
// this.style.marginLeft=‘-50px‘;
// this.style.marginTop=‘-50px‘;
// this.style.height=‘200px‘;
move(this,{width:200,marginLeft:-50,marginTop:-50,height:200},{time:2000,easeing:‘ease-in‘});
this.style.index=999;
};
aLi[i].onmouseout=function(){
move(this,{width:100,margin:0,height:100});
this.style.index=0;
}
}
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
以上是关于小案例之手风琴和多图片中心点放大的主要内容，如果未能解决你的问题，请参考以下文章