当前位置:网站首页>Picture zoom Center
Picture zoom Center
2022-07-06 18:25:00 【Full stack programmer webmaster】
Hello everyone , I meet you again , I'm the king of the whole stack .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Picture zoomed in and centered </title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
*{margin:0; padding:0;}
ul,li{margin-right: 0; padding:0;}
li{list-style:none;}
a{text-decoration: none;}
.clearfix:before,.clearfix:after{display: table; content: "";}
.clearfix:after{overflow: hidden; clear: both;}
.clearfix{zoom:1;}
body{width: 100%; height: 100%; background-color: #000; overflow:hidden;}
#box{width:330px; margin:100px auto; position: relative;}
#box li{width:100px; height:100px; background:red; margin:10px 10px 0 0; float:left; color:#fff; line-height:24px;}
</style>
</head>
<body>
<ul id="box" class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/app/move.js"></script>
<script>
window.onload = function(){
var aLi = document.getElementById('box').getElementsByTagName('li');
var arr = [];
var i=0;
var zIndex = 1;
for(i=0; i<aLi.length; i++){
aLi[i].innerHTML = 'left:'+aLi[i].offsetLeft + 'px' + '<br>top:'+ aLi[i].offsetTop + 'px';
arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
}
for(i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].style.left = arr[i].left + 'px';
aLi[i].style.top = arr[i].top + 'px';
aLi[i].style.position ='absolute';
aLi[i].style.margin = 0;
aLi[i].onmouseover = function(){
this.style.background = 'green';
this.style.zIndex=zIndex++;
startMove(this,{
width:200,
height:200,
left:arr[this.index].left - 50,
top:arr[this.index].top - 50
});
}
aLi[i].onmouseout = function(){
this.style.background = 'red';
startMove(this,{
width:100,
height:100,
left:arr[this.index].left,
top:arr[this.index].top
});
}
}
}
</script>
</body>
</html>
Copyright notice : This article is an original blog article . Blog , Without consent , Shall not be reproduced .
Publisher : Full stack programmer stack length , Reprint please indicate the source :https://javaforall.cn/117400.html Link to the original text :https://javaforall.cn
边栏推荐
- Echart simple component packaging
- Running the service with systemctl in the container reports an error: failed to get D-Bus connection: operation not permitted (solution)
- Markdown syntax for document editing (typera)
- 287. Find duplicates
- Interesting - questions about undefined
- Distiller les connaissances du modèle interactif! L'Université de technologie de Chine & meituan propose Virt, qui a à la fois l'efficacité du modèle à deux tours et la performance du modèle interacti
- STM32+ESP8266+MQTT协议连接OneNet物联网平台
- Blue Bridge Cup real question: one question with clear code, master three codes
- Alibaba cloud international ECS cannot log in to the pagoda panel console
- 第三季百度网盘AI大赛盛夏来袭,寻找热爱AI的你!
猜你喜欢
Interesting - questions about undefined
Tree-LSTM的一些理解以及DGL代码实现
UDP protocol: simple because of good nature, it is inevitable to encounter "city can play"
Four processes of program operation
Jerry is the custom background specified by the currently used dial enable [chapter]
關於這次通信故障,我想多說幾句…
【.NET CORE】 请求长度过长报错解决方案
Rb157-asemi rectifier bridge RB157
Windows连接Linux上安装的Redis
Docker安装Redis
随机推荐
TOP命令详解
测试1234
关于这次通信故障,我想多说几句…
Windows connects redis installed on Linux
Insert dial file of Jerry's watch [chapter]
Interesting - questions about undefined
Maixll dock camera usage
Heavy! Ant open source trusted privacy computing framework "argot", flexible assembly of mainstream technologies, developer friendly layered design
STM32+ENC28J60+UIP协议栈实现WEB服务器示例
The difference between parallelism and concurrency
2019 Alibaba cluster dataset Usage Summary
node の SQLite
从交互模型中蒸馏知识!中科大&美团提出VIRT,兼具双塔模型的效率和交互模型的性能,在文本匹配上实现性能和效率的平衡!...
Jerry's setting currently uses the dial. Switch the dial through this function [chapter]
MS-TCT:Inria&SBU提出用于动作检测的多尺度时间Transformer,效果SOTA!已开源!(CVPR2022)...
最新财报发布+天猫618双榜第一,耐克蓄力领跑下个50年
递归的方式
Docker安装Redis
【剑指 Offer】 60. n个骰子的点数
celery最佳实践