用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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
解析Vue.js中的组件
Feb 02 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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
第五节 克隆 [5]
2006/10/09 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
如何理解python面向对象编程
2020/06/01 Python
python drf各类组件的用法和作用
2021/01/12 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
大四学生毕业自荐信
2013/11/07 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
大班幼儿评语大全
2014/04/30 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
交警失职检讨书
2015/01/26 职场文书
保护校园环境倡议书
2015/04/28 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
利用Python+OpenCV三步去除水印
2021/05/28 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers