当前位置:网站首页>图片缩放中心
图片缩放中心
2022-07-06 10:19:00 【全栈程序员站长】
大家好,又见面了,我是全栈君。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片放大居中</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>
版权声明:本文博客原创文章。博客,未经同意,不得转载。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/117400.html原文链接:https://javaforall.cn
边栏推荐
- Recursive way
- 2022 Summer Project Training (II)
- 测试123
- SAP Fiori 应用索引大全工具和 SAP Fiori Tools 的使用介绍
- 微信小程序中给event对象传递数据
- Pytest learning ----- pytest confitest of interface automation test Py file details
- Implementation of queue
- 2022暑期项目实训(一)
- DNS hijacking
- MS-TCT:Inria&SBU提出用于动作检测的多尺度时间Transformer,效果SOTA!已开源!(CVPR2022)...
猜你喜欢
Distill knowledge from the interaction model! China University of science and Technology & meituan proposed virt, which combines the efficiency of the two tower model and the performance of the intera
The easycvr authorization expiration page cannot be logged in. How to solve it?
Comparative examples of C language pointers *p++, * (p++), * ++p, * (++p), (*p) + +, +(*p)
Compilation Principle -- C language implementation of prediction table
F200 - UAV equipped with domestic open source flight control system based on Model Design
ASEMI整流桥DB207的导通时间与参数选择
Distinguish between basic disk and dynamic disk RAID disk redundant array
Grafana 9.0 正式发布!堪称最强!
std::true_ Type and std:: false_ type
小程序在产业互联网中的作用
随机推荐
2022暑期项目实训(一)
UDP协议:因性善而简单,难免碰到“城会玩”
declval(指导函数返回值范例)
ADB common commands
Interesting - questions about undefined
微信小程序中给event对象传递数据
Pytest learning ----- detailed explanation of the request for interface automation test
Take you through ancient Rome, the meta universe bus is coming # Invisible Cities
1700C - Helping the Nature
Fleet tutorial 13 basic introduction to listview's most commonly used scroll controls (tutorial includes source code)
Coco2017 dataset usage (brief introduction)
Getting started with pytest ----- test case pre post, firmware
微信为什么使用 SQLite 保存聊天记录?
Cobra 快速入门 - 专为命令行程序而生
Recursive way
Excel usage record
What is the reason why the video cannot be played normally after the easycvr access device turns on the audio?
C语言通过指针交换两个数
IP, subnet mask, gateway, default gateway
關於這次通信故障,我想多說幾句…