功能:放大缩小,拖动,变换样式(图片)问题:修改图片透明度时会闪
<!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>
分享到:
相关推荐
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图层控制器小部件...
4.2.2自定义切片地图图层——百度地图 4.2.3自定义图层——三维建筑图 4.3地图操作 4.3.1地图窗口操作 4.3.2地图属性获取 4.3.3事件处理 4.4地图参数的基本配置 4.4.1漫游与缩放动画的参数配置 4.4.2比例滚动条的...
飞机根据路线进行轨迹飞行,利用Cesium,适用于新手操作
演示版快速开始: 单击“更多操作”,选择“设置”,输入地图将居中的所需纬度,经度和海拔高度,然后调整“缩放”。 在地图上,按住鼠标左键的同时绘制路径,如果需要,可以删除使用“删除”按钮绘制的最后一点。 ...
星星我的目的地实时模拟游戏 ■ 征服银河系! ■ <怎么玩> 在你自己的星球上进行一次舰队出击,占领另一个星球。行星上方的数字是力。如果你点击或触摸你自己的星球,它会以绿色指向,所以如果你把它拖到你想出击...
LowRes NX受到真正的8位和16位系统的启发,并模拟用于图形,声音和I / O的芯片,这些芯片实际上就像经典硬件一样工作。 它支持硬件精灵以及硬件视差滚动,甚至提供垂直的空白和光栅中断以创建真实的复古效果。 老式...
如果您想了解这个项目是如何操作和遍历 DOM 的,请查看 。 浏览本课程中的视频和作业,学习构建简历所需的 JavaScript。 根据项目评分细则(下一页)检查您的工作。 当您对您的项目感到满意时,请按照下一页的...
第7章 物理模拟与碰撞检测 192 7.1 概述 192 7.2 游戏中的碰撞检测 193 7.3 碰撞检测的方法 194 7.3.1 平面几何在碰撞检测中的应用 194 7.3.2 物体的包围盒 197 7.3.3 AABB碰撞检测技术 198 7.4 基本物理知识 199 ...
谷歌地图动画标记 使用Google Maps API在预定的设定路径上模拟车辆的运动。 以下代码可以执行以下操作。 以虚线绘制路径 有条件地为路径设置动画。 在路径上绘制运动对象 这是实际的样子。 要创建自己的动画路径...
Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...
11.7 创建站点地图 231 11.8 站点测试、管理和发布 234 11.8.1 站点测试 234 11.8.2 站点管理和发布 234 本章小结 235 思考题 235 第12章 Fireworks 8入门 236 12.1 Fireworks 8概述 236 12.2 Fireworks工作...
该实用程序有助于快速模拟配色方案,以及您要应用的剪贴和地图样式。 特征 栅格颜色处理 网址中的所有状态 单色图块URL作为输入 裁剪为形状(以获得更好的可视化效果) 通过网址塑造文件 通过上传对文件进行...
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...
应用程序中有一个开发钩子,用于模拟在BSVE中运行。 这将在预生成的查询上调用地图的显示方法。 npm install npm start 然后打开浏览器到 。 部署到BSVE 你需要有BSVE CLI SDK安装有根据。 将bsve应用程序放在路径...
13.4 数据库操作 452 13.4.1 插入 452 13.4.2 更新 454 13.4.3 删除 454 13.4.4 管理并发 455 13.4.5 处理并发冲突 455 13.5 EntityDataSource控件 459 13.5.1 显示数据 459 13.5.2 获取关联数据 ...
6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用...