小案例之手风琴和多图片中心点放大

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>


 

 

以上是关于小案例之手风琴和多图片中心点放大的主要内容,如果未能解决你的问题,请参考以下文章

214 jQuery案例:王者荣耀手风琴效果

在微信小程序上,帮助中心界面实现类似手风琴案例

JavaScript 案例之 手风琴特效(jQuery实现)

qt语言,以鼠标为中心点进行放大和缩小。

iOS 多图像分页和缩放问题

openlayers小案例(输入地名查询拖动图层切换图层透明度鹰眼图层显示与隐藏定位放大缩小)新手必备