js小方框中浏览大图类似google earth效果
作者：misshjn 来源：蓝色理想 发布时间：2007-10-28 19:30:00
今天在玩 google earth 4.0b，发现 Print Screen 下来的图片很大，如果直接放在网页上，因为尺寸太大又不合适，又不想压缩图片的尺寸，于是乎就想到了这种方法，没想到实现起来比预想的要容易。这段代码还兼容 firefox。
限定滚动的范围，不会出现背景。
用到onmousemove事件，图片实时随鼠标移动而移动。
主要js代码如下：
<script type="text/javascript">
<!--
var p = new Array();
var speed = 0.05; //速度
var picWidth = 1280; // 大图的宽高
var picHeight = 971;
var x,y // 鼠标点下去时背景的坐标
var x_new,y_new //位移
var haveclick = false;
function getmouseposition(event)
{
if(document.all)
{
x = document.body.scrollLeft+event.clientX;
y = document.body.scrollTop+event.clientY;
}else
{
x = event.layerX;
y = event.layerY;
}
haveclick = true;
}
function movestop()
{
haveclick = false;
}
function movestart(event)
{
if(haveclick)
{
if(document.getElementById('pic').style.backgroundPosition.length==0)
{document.getElementById('pic').style.backgroundPosition="0px 0px";}
p = document.getElementById('pic').style.backgroundPosition.split(" ")
if(document.all)
{
x_new = document.body.scrollLeft+event.clientX;
y_new = document.body.scrollTop+event.clientY;
}else
{
x_new = event.layerX;
y_new = event.layerY;
}
x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10); // 计算位移量
y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
if (x2<-picWidth+420) x2=-picWidth+420;
if (y2>0) y2=0;
if (x2>0) x2=0;
if (y2<-picHeight+300) y2=-picHeight+300;
document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
}
}
-->
</script>
运行代码框
0
投稿猜你喜欢
- 一、节点的定义dom节点树图中可见节点HTML文档中的每个成分都是一个节点:整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTM
- 当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（包括机器故障、介质故障、误操作等），数据库有时也可能遭到
启发式评估法（Heuristic Evaluation）是一种用来发现用户界面设计中的可用性问题从而使这些问题作为再设计过程中的一部分被重视- © 版权符号显示不清楚，就是那个圈C，在某些网站上就是显示太小，看不清楚。一开始还以为是字体大小的原因，调大以后，还是一样
- 流程，通俗来讲，就是许多人，在做一系列的事情时，怎样相互协调，安排好这一系列事情的先后顺序，有什么事先的约定，需要达到怎样的预期目标。在UE
- 1 新建类库MyTestDLL2 右击项目“MyTestDLL”-》属性-》生成-》勾选“为COM互操作注册”3 打开 AssemblyIn
- 产品使用者可分为三个类别，分别是：初级用户、中级用户、高级用户。这三个类别分别代表了用户使用产品的三个阶段，其中初级用户是占最大比例的，中级
- Yahoo发布了一款基于FireFox的插件，名叫YSlow，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则而进行优
- 很早前就遇到这个空值的属性，它既出现在 html 文档中，也出现在 xml 中，一直都回避，放之任之，反正也不影响文档的正确性。隐隐约约过了
- 请教：如何在现存的文档中动态嵌入一段JS？如果是一段CSS呢？创建一个<script></script>并在scri
- MySQL数据库线程缓冲池的相关知识是本文我们主要要介绍的内容，MySQL数据库支持线程缓存，在多线程连接模式下，如果连接断开后，将这个线程
- 如何在SQL2000的查询中使用XML-Data？具体程序如下：orders.asp<％@ Language=VBScrip
- 1.删除所有的目录，只保留datasharebin2.删除BIN下面除以下三个文件之外的所有文件：libmysql.dll(MYSQL5中的
- 生成HTML方法主要步骤只有两个：一、获取要生成的html文件的内容二、将获取的html文件内容保存为html文件我在这里主要说明的只是第一
- 经过一轮的项目封闭开发，页面制作的动手能力提高了不少，用AW的话说就是被复杂的东西虐过以后很多问题都变得容易了，的确很有道理。我个人觉得技术
- 在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的编写，刚开始不会体会出SQL语句各种写法的性能优劣，但是如果将应
- 如何用ASP获知机器的网络配置？看看我们的例子：Option Explicit Dim WSHShell&nb
- 本文的目的是探讨JS相关技术，并不是以杀毒为主要目的，杀毒只是为讲解一些JS做铺垫的，呵呵，文章有点长，倒杯咖啡或者清茶慢慢看，学习切勿急躁
- 样式表是一种为超文本标签语言提供增强补充服务的技术，可对每一个html的标签做精雕细刻的修饰。只用html制作的网页，对页面内各部分的修饰能
- 在页面中自定义了changejs函数后页面提示错误：Active Server Pages 错误 'ASP 0138' 嵌套
