功能：放大缩小，拖动，变换样式（图片）问题：修改图片透明度时会闪
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.drag{position:relative;cursor:hand}
</style>
<script language="javascript">
var dragapproved = false;
var picture,x,y
function move(){ //拖动鼠标
if(event.button==1&&dragapproved){
picture.style.pixelLeft=temp1+event.clientX-x
picture.style.pixelTop=temp2+event.clientY-y
return false;
}
}
function drags(){ //拖动前的初始化工作
if(!document.all) return
if(event.srcElement.className=="drag"){
dragapproved = true
picture=event.srcElement;
temp1=picture.style.pixelLeft
temp2=picture.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags //按下鼠标左键
document.onmouseup=new Function("dragapproved=false") //松开鼠标左键
</script><!-- 拖动鼠标，实现图像拖动功能-->
<script language="javascript">
function Counting(count){
if(event.wheelDelta>=120) //event.wheelDelta设置或获取滚轮按钮滚动的距离和方向。
count++;
else if(event.wheelDelta<=-120)
count--;
return count;
}//滚轮每滚动一次使count加/减1
var count=10;
function Picture(){
count=Counting(count);
Resize(count);
return false;
}//滚轮滚动后适当控制图片的缩放比例
var pic = "img1.jpg";
var opacity = 100;
function Resize(count){
var m = document.getElementById('map');
if (count <= 8)
{
if (m.src.indexOf("img2.jpg") > 0 && opacity == 100)
{
pic= "img1.jpg";
var num=setInterval(function(){ChangePic(num)},200);
}
} else
{
if (m.src.indexOf("img1.jpg") > 0 && opacity == 100)
{
pic= "img2.jpg";
var num=setInterval(function(){ChangePic(num)},200);
}
}
m.style.zoom=count+'0%';
}//设置图片缩放大小
function ChangePic(num)
{
var m = document.getElementById("map");
opacity = opacity - 20;
if (opacity <= 0)
{
clearInterval(num);
opacity = 100;
m.src = pic;
}
m.style.filter = "alpha(opacity=" + opacity + ")";
}
</script><!-- 滚动鼠标滚轮，实现图像缩放功能-->
<img src="img1.jpg" width="1337" height="905" border="0" alt="" align="middle" id="map" class="drag" style="margin:0" onmousewheel="Picture()">
</head>
<body>
</body>
</html>
分享到：
相关推荐
在这个特定的项目中，"javascript高德地图鹰眼轨迹，仿百度鹰眼功能"，我们讨论的是利用JavaScript来实现高德地图的一项高级功能，即鹰眼轨迹。这个功能模仿了百度地图的鹰眼视图，提供了一个全面、直观的方式来查看...
为了模拟地图上图标的移动，你需要创建一个定时器，在每个时间间隔内更新经纬度。在QML中，使用`Timer`组件来实现定时任务，当定时器触发时，修改绑定到JavaScript的经纬度变量。JavaScript端监听到变化后，会自动...
要实现这一功能，你需要集成百度地图JavaScript API，并调用街景服务接口，设置全景视图的初始位置和视角。同时，可以添加交互控件，让用户自由探索周围环境。 其次，线路规划是地图应用的核心功能之一。百度地图...
项目的目标不仅仅是实现基本的地图缩放和平移功能，还希望能够模拟地图上的标记点功能，即“打点”。此外，还需要支持同时显示多个点，这对于展示地理位置数据等场景非常有用。 ### 二、关键技术点分析 #### 核心...
2. **地图瓦片系统**：类似于谷歌地图和百度地图，这类应用通常采用地图瓦片系统，即将地图分割成多个小图片（瓦片），根据用户的滚动和缩放操作加载相应的瓦片，实现平滑的浏览体验。 3. **JavaScript库**：创建...
总的来说，利用ArcGIS API for JavaScript构建轨迹移动和模拟行程，不仅涉及到地图显示、地理编码、路径规划等基础GIS功能，还需要掌握事件驱动编程、性能优化等高级技术。通过对API的深入理解和灵活运用，我们可以...
结合百度地图API，还可以实现缩放、平移等地图操作。 6. 动态更新与动画效果：ECharts支持数据动态更新和动画效果，可以用于实时展示变化中的大数据，比如流动人口、交通流量等。 总的来说，"echarts3_map_demo-...
高德地图API为开发者提供了丰富的地图操作功能，包括加载地图、设置中心点、添加图层、响应地图事件等。在这个项目中，开发者需要通过API获取地图的当前缩放级别和鼠标点击位置，以便在正确的位置生成水波纹。 接...
ArcGIS API for JavaScript 提供了丰富的地图操作和图形绘制功能，可以很好地处理这个问题。 1. **轨迹数据**：轨迹数据通常是以时间戳为索引的一系列地理位置点，每个点包含经度、纬度和可能的时间信息。在...
ArcGIS JavaScript API 提供了丰富的地图操作接口和图层管理功能，包括加载地图服务、添加图层、查询数据、编辑要素、标注显示等。通过API，开发者可以轻松地创建出具有交互性的地图应用，将地理信息以图形化的方式...
2. JavaScript API：大多数地图接口是基于JavaScript实现的，因为网页端的交互主要由JavaScript驱动。通过JavaScript，你可以控制地图的显示、获取用户位置、添加自定义图层等。 3. 定位功能：地图接口通常提供定位...
在JavaScript编程中，实现图片的缩放效果可以用于创建类似Google地图那样的交互式用户体验。这种效果使得用户能够通过鼠标滚轮或手势来放大或缩小图片，以查看图像的更多细节或者整体视图。以下是一些关于如何使用...
卷帘效果通常用于地图展示，例如逐步揭示地图的不同区域，模拟窗帘拉开或关闭的过程。这种效果在地理信息展示、数据可视化或者地图故事叙述中都有广泛的应用。 **一、卷帘效果的核心技术** 1. **CSS `clip`属性**...
本文将深入探讨如何利用百度地图API来实现全景效果、线路规划以及模拟运动轨迹。 全景效果，通常指的是360度全景视图，这种技术允许用户通过鼠标或触摸操作在虚拟环境中自由查看周围环境。百度地图提供了全景服务，...
百度地图API是一套基于JavaScript语言的Web服务接口，它允许开发者在网页中嵌入地图，进行位置查询、路线规划等操作。要实现自定义覆盖物，我们需要用到`BMap.Overlay`类，这是一个抽象基类，用于创建覆盖物。我们...
这通常涉及到定时器（如`setTimeout`或`requestAnimationFrame`）和DOM操作，以平滑地改变元素的位置、大小、颜色等属性，模拟出方块消除的视觉效果。 3. **用户交互**：JavaScript监听用户的点击事件，根据点击...
百度地图API（Baidu Maps API）是百度提供的一套基于JavaScript语言的Web服务接口，它允许开发者在网页上嵌入地图，并进行各种地图相关的操作，如定位、绘制、标注等。在API中，我们可以获取到地图的坐标系统、地图...
4.3地图操作 4.3.1地图窗口操作 4.3.2地图属性获取 4.3.3事件处理 4.4地图参数的基本配置 4.4.1漫游与缩放动画的参数配置 4.4.2比例滚动条的参数配置 4.4.3跨域访问参数配置 4.5图层控制器 4.5.1图层控制器小部件...
它提供了丰富的地图操作、图层管理、地理编码、空间分析以及可视化功能，让开发者能够轻松地在网页上展示和操作地理数据。 在描述中提到的“轨迹移动”效果，是指在地图上模拟物体（比如小车或台风）沿着特定路径...
13. 地图集成：如Google Maps API，结合JavaScript实现地图交互和定位功能。 14. 图片裁剪工具：允许用户预览并裁剪上传的图片，如cropper.js。 15. 树形结构：构建层级关系，如文件目录或组织结构，可以使用递归...