满足1.对于页面上的一幅图片，鼠标悬停在图片上时切换成另一幅图，鼠标离开时，还原成原来的图片 2. 实现在页面上的一幅图片，能够跟随鼠标移动。 3. 实现在页面上的一幅图片，可以通过上下左右键控制图片在页面上移动。 4.在页面上建立一个自定义菜单，菜单内容如图所示，当单击菜单选项时，可以改变页面上文字相应设置。 5.在页面上有两个div块，实现内部div块可以在其外部容器div块中随意拖动，并实现磁吸效果。 6.页面上有一张图片和一个自定义滚动条，实现如下效果：拖动滚动条，可以改变图片大小。的html文件
时间: 2024-02-21 07:02:14 浏览: 24
这里是一个简单的 HTML 文件，包含了实现上述功能的代码。
```html
<!DOCTYPE html>
<html>
<head>
<title>Image Manipulation</title>
<style>
#container {
position: relative;
width: 600px;
height: 400px;
border: 1px solid black;
margin: 20px auto;
}
#image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease-in-out;
}
#menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 600px;
margin: 20px auto;
}
.menu-item {
padding: 10px;
border: 1px solid black;
cursor: pointer;
}
#text {
font-size: 24px;
text-align: center;
margin: 20px auto;
}
#outer {
position: relative;
width: 600px;
height: 400px;
border: 1px solid black;
margin: 20px auto;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid black;
cursor: move;
}
#scrollbar {
width: 20px;
height: 300px;
background-color: gray;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
#thumb {
width: 20px;
height: 50px;
background-color: white;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<img id="image" src="image1.jpg" width="300" height="200">
</div>
<div id="menu">
<div class="menu-item" onclick="changeText('Option 1')">Option 1</div>
<div class="menu-item" onclick="changeText('Option 2')">Option 2</div>
<div class="menu-item" onclick="changeText('Option 3')">Option 3</div>
</div>
<div id="text">Default Text</div>
<div id="outer">
<div id="inner"></div>
<div id="scrollbar">
<div id="thumb"></div>
</div>
</div>
<script>
// Image manipulation
var image = document.getElementById('image');
image.addEventListener('mouseenter', function() {
this.src = 'image2.jpg';
});
image.addEventListener('mouseleave', function() {
this.src = 'image1.jpg';
});
image.addEventListener('mousemove', function(e) {
this.style.left = e.clientX - this.width / 2 + 'px';
this.style.top = e.clientY - this.height / 2 + 'px';
});
document.addEventListener('keydown', function(e) {
var key = e.key;
switch (key) {
case 'ArrowUp':
image.style.top = parseInt(image.style.top) - 10 + 'px';
break;
case 'ArrowDown':
image.style.top = parseInt(image.style.top) + 10 + 'px';
break;
case 'ArrowLeft':
image.style.left = parseInt(image.style.left) - 10 + 'px';
break;
case 'ArrowRight':
image.style.left = parseInt(image.style.left) + 10 + 'px';
break;
}
});
// Menu manipulation
function changeText(text) {
var textDiv = document.getElementById('text');
textDiv.innerHTML = text;
}
// Div dragging
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var thumb = document.getElementById('thumb');
var isDragging = false;
var lastX, lastY;
inner.addEventListener('mousedown', function(e) {
isDragging = true;
lastX = e.clientX;
lastY = e.clientY;
});
document.addEventListener('mousemove', function(e) {
if (isDragging) {
var deltaX = e.clientX - lastX;
var deltaY = e.clientY - lastY;
inner.style.left = parseInt(inner.style.left) + deltaX + 'px';
inner.style.top = parseInt(inner.style.top) + deltaY + 'px';
lastX = e.clientX;
lastY = e.clientY;
var outerRect = outer.getBoundingClientRect();
var innerRect = inner.getBoundingClientRect();
if (innerRect.left < outerRect.left) {
inner.style.left = outerRect.left + 'px';
}
if (innerRect.right > outerRect.right) {
inner.style.left = outerRect.right - inner.offsetWidth + 'px';
}
if (innerRect.top < outerRect.top) {
inner.style.top = outerRect.top + 'px';
}
if (innerRect.bottom > outerRect.bottom) {
inner.style.top = outerRect.bottom - inner.offsetHeight + 'px';
}
}
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
// Scrollbar manipulation
var scrollbar = document.getElementById('scrollbar');
var thumb = document.getElementById('thumb');
var image = document.getElementById('image');
var minHeight = 100;
var maxHeight = 400;
thumb.addEventListener('mousedown', function(e) {
e.preventDefault();
var startY = e.clientY;
var startHeight = thumb.offsetHeight;
document.addEventListener('mousemove', resizeImage);
document.addEventListener('mouseup', removeListeners);
function resizeImage(e) {
var deltaY = e.clientY - startY;
var newHeight = startHeight + deltaY;
if (newHeight < minHeight) {
newHeight = minHeight;
} else if (newHeight > maxHeight) {
newHeight = maxHeight;
}
image.style.height = newHeight + 'px';
var thumbHeight = newHeight / maxHeight * scrollbar.offsetHeight;
thumb.style.height = thumbHeight + 'px';
var thumbTop = newHeight / maxHeight * (scrollbar.offsetHeight - thumbHeight);
thumb.style.top = thumbTop + 'px';
}
function removeListeners() {
document.removeEventListener('mousemove', resizeImage);
document.removeEventListener('mouseup', removeListeners);
}
});
</script>
</body>
</html>
```
相关推荐
最新推荐
Eclipse中Debug时鼠标悬停不能查看变量值解决办法
主要介绍了Eclipse中Debug时鼠标悬停不能查看变量值解决办法，以及分享了一个简单补全代码的方法，还是比较不错的，需要的朋友可以参考下。
CSS实现让文字半透明显示在图片上的方法
主要为大家介绍了CSS实现让文字半透明显示在图片上的方法,实例分析了css使用filter:alpha控制半透明效果的技巧,需要的朋友可以参考下
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示，离开后，继续滚动，具体实现如下，喜欢的朋友可以参考下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB取整函数与Web开发的作用：round、fix、floor、ceil在Web开发中的应用
# 1. MATLAB取整函数概述**
MATLAB取整函数是一组强大的工具，用于对数值进行
我想做python的算法工程师，我应该学什么？学习的顺序是什么？网上有什么推荐的免费课程吗？回答具体精确一点不要太笼统
对于想要成为 Python 算法工程师的人来说，他们应该先从掌握 Python 的基础语法开始，然后学习数据结构和算法，并且要深入了解 Python 中的一些科学计算和数据处理库，比如 NumPy、Pandas 等。
学习的顺序可以是先学习基础语法和编程技巧，然后再学习数据结构和算法相关的知识，最后深入了解数据处理和科学计算相关的库。
对于免费课程的推荐，我建议你可以先去 Coursera、edX、Udacity 等网站上寻找相关课程，这些网站上有很多优质的 Python 编程和算法课程，你可以根据自己的需求和学习进度进行选择。此外，还可以考虑一些在线编程网站，如 HackerRank、L
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
"互动学习：行动中的多样性与论文攻读经历"
多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
MATLAB取整函数与数据分析的应用：round、fix、floor、ceil在数据分析中的应用
# 1. MATLAB取整函数概述
MATLAB提供了一系列取整函数，用于对数值进行四舍五入或截断操作。这些函数包括：
- `round`：四舍五入到最接近的整数
- `floor`：向下取整到最小的整数
- `ceil`：向上取整到最大的整数
- `fix`：截断小数部分，返回整数部分
这些函数在数据分析、可视化和特定领域（如金融