用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 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JavaScript获取路径设计源码
May 22 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
php中使用websocket详解
2016/09/23 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python实现名片管理系统
2020/02/14 Python
Python实现井字棋小游戏
2020/03/09 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
新护士岗前培训制度
2014/02/02 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
干部培训简讯
2015/07/20 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python