用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 非图片动态loading效果实现代码
Apr 09 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
canvas时钟效果
Feb 16 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 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 COOKIE设置为浏览器进程
2009/06/21 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Python ZipFile模块详解
2013/11/01 Python
python计算两个数的百分比方法
2018/06/29 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
Python爬虫文件下载图文教程
2018/12/23 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
车间班组长岗位职责
2013/11/13 职场文书
个人近期表现材料
2014/02/11 职场文书
小班幼儿评语大全
2014/04/30 职场文书
党支部综合考察材料
2014/05/19 职场文书
民政局个人整改措施
2014/09/24 职场文书
消夏晚会主持词
2015/06/30 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python