用javascript实现在小方框中浏览大图的代码


Posted in Javascript onAugust 14, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#pic {
 height: 300px;
 width: 420px;
 border: 3px solid #ccc;
 background-image: url(http://www.happyshow.org/sample/20060619/3.jpg);
 background-repeat: no-repeat;
 background-position: 0px 0px;
 background-color: #333;
 cursor: crosshair;
}
-->
</style>
<script type="text/javascript">
<!--
var p = new Array();
var speed = 1.0;  // 1 表示1倍速度,即原速
var x,y // 鼠标点下去时背景的坐标
var x_new,y_new  //位移
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;
 } 
}
function setmouseposition(event)
{
 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);
 document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
}
-->
</script>
</head>
<body>
<div id="pic" onmousedown="getmouseposition(event)" onmouseup="setmouseposition(event)"></div>
今天在玩 google earth 4.0b,发现 Print Screen 下来的图片很大,如果直接放在网页上,因为尺寸太大又不合适,又不想压缩图片的尺寸,于是乎就想到了这种方法,没想到实现起来比预想的要容易。呵呵,该死的是,这段代码还兼容 firefox。
</body>
</html>
今天在玩 google earth 4.0b,发现 Print Screen 下来的图片很大,如果放在网页不合适,又不想压缩图片的尺寸,于是乎就想到了这种方法,没想到实现起来比预想的要容易。呵呵,该死的是,这段代码还兼容 firefox。

--------------------------------------------------------------------------------------
2006.6.20 修改:

·添加了滚动的范围,不会出现背景
·用到onmousemove事件,图片实时随鼠标移动而移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#pic {
 width:420px;
 height:300px;
 border: 3px solid #ccc;
 background-image: url(http://www.happyshow.org/sample/20060619/3.jpg);
 background-repeat: no-repeat;
 background-position: 0px 0px;
 cursor: move;
}
-->
</style>
<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>
</head>
<body>
<div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>
</body>
</html>

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 #Javascript
用js实现计算代码行数的简单方法附代码
Aug 13 #Javascript
js 事件小结 表格区别
Aug 13 #Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 #Javascript
javascript下给元素添加事件的方法与代码
Aug 13 #Javascript
javascript引用对象的方法代码
Aug 13 #Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 #Javascript
You might like
深入php数据采集的详解
2013/06/02 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python实现控制COM口的示例
2019/07/03 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python中图像通道分离与合并实例
2020/01/17 Python
python regex库实例用法总结
2021/01/03 Python
pandas按条件筛选数据的实现
2021/02/20 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
.NET面试问题集
2015/12/08 面试题
中秋节祝酒词
2015/08/12 职场文书
《藏戏》教学反思
2016/02/23 职场文书
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python