2.8w+
社区成员
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
wumingfei 2008-03-27
用ajax就可以完成了
一把编程的菜刀 2008-03-27
http://blog.csdn.net/chinmo/archive/2008/03/16/2187211.aspx
chenguang79 2008-03-27
帮帖一下
<script language="JavaScript">
<!--
var smallX = 150; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){ //初始化数据
head.innerHTML="图片已载入";
isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异
if (srcX==-1 || srcY==-1){srcX=bigpic.width;srcY=bigpic.height;} // 如果有一个为-1,则使用原图大小
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX; //按比例计算出缩略图的高
viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //得到缩放比例
smallpic.width=smallX; //初始化实例属性
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE; //(+border*2*isIE),如果是IE就加上2倍边框以修正模型差异,FF无变化
smallbox.style.height=smallpic.offsetHeight+border*2*isIE; //以下的isIE同理,修正ie盒模型bug
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e; //得到IE或FF的event
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft; //分别在FF与IE下获得相对坐标
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2; //得到缩略图的预览窗位置
vY+=-viewY/2;
if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl; //刷新预览窗口
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border; //刷新缩略图中预览窗口
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px green solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px green solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px silver solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:lime}
//-->
</style>
<div id="head">图片loading...</div>
<div id="smallbox"><!--缩略图窗口//-->
<img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49455.jpg" border="0" onmousemove="move(event)">
</div>
<div id="bigbox"><!--预览窗口//--><div id="bigpico"><!--大图片容器//-->
<img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49457.jpg" border="0">
</div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div><!--缩略图上的预览窗//-->
<script language="JavaScript">
<!--
var smallX = 150; //缩略图宽度
var bigX = 600; //预览窗大小,可以任意设置
var bigY = 450;
var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var srcY = -1;
var border = 5; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY;
window.onload=function (){ //初始化数据
head.innerHTML="图片已载入";
isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异
if (srcX==-1 || srcY==-1){srcX=bigpic.width;srcY=bigpic.height;} // 如果有一个为-1,则使用原图大小
else{bigpic.width=srcX;bigpic.height=srcY;}
smallY=srcY*smallX/srcX; //按比例计算出缩略图的高
viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小
viewY=bigY/srcY*smallY;
bl=srcX/smallX; //得到缩放比例
smallpic.width=smallX; //初始化实例属性
smallpic.height=smallY;
smallbox.style.borderWidth=border;
smallbox.style.width=smallpic.offsetWidth+border*2*isIE; //(+border*2*isIE),如果是IE就加上2倍边框以修正模型差异,FF无变化
smallbox.style.height=smallpic.offsetHeight+border*2*isIE; //以下的isIE同理,修正ie盒模型bug
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2*isIE;
bigbox.style.height=bigY+border*2*isIE;
view.style.left=smallbox.offsetLeft + border;
view.style.top=smallbox.offsetTop + border;
view.style.width=viewX- !isIE*3+1;
view.style.height=viewY- !isIE*3+1;
}
function move(e){
var e = window.event?window.event:e; //得到IE或FF的event
if (!isIE){vX=e.pageX-border-smallbox.offsetLeft; //分别在FF与IE下获得相对坐标
vY=e.pageY-border-smallbox.offsetTop}
else{vX=e.offsetX;vY=e.offsetY}
vX+=-viewX/2; //得到缩略图的预览窗位置
vY+=-viewY/2;
if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
if (vY < 0) vY = 0;
if (vX > smallX - viewX) vX = smallX - viewX;
if (vY > smallY - viewY) vY = smallY - viewY;
bigpico.style.marginLeft = - vX * bl; //刷新预览窗口
bigpico.style.marginTop = - vY * bl;
view.style.left = vX + smallbox.offsetLeft + border; //刷新缩略图中预览窗口
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
img{display:block;}
#smallbox{border:1px green solid;float:left;width:0;height:0;overflow:hidden;font-size:0px}
#bigbox{border:1px green solid;width:0px;height:0px;float:left;overflow:hidden;font-size:0px}
#view{border:1px silver solid;width:0px;height:0px;position:absolute;font-size:0px}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:lime}
//-->
</style>
<div id="head">图片loading...</div>
<div id="smallbox"><!--缩略图窗口//-->
<img id="smallpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49455.jpg" border="0" onmousemove="move(event)">
</div>
<div id="bigbox"><!--预览窗口//--><div id="bigpico"><!--大图片容器//-->
<img id="bigpic" src="http://images2.wowchina.com/images_wow/download/wallpapers/2007/7/9/49457.jpg" border="0">
</div></div>
<div id="view" onmousemove="if (!isIE) move(event)"></div><!--缩略图上的预览窗//-->
www_7di_net 2008-03-27
你看看我的论坛就有这个效果http://www.7di.net，你自己抠代码用吧。
yowbell 2008-03-27
up
好心封装工具类，结果被领导怒怼：“会不会写代码！” 先上脑图，不理解的可以看下面文章！身为程序员，你可能没有系统的学习过设计模式，但是你一定知道单例模式，因为它相对简单，而且最常被大家所用到。既然大家都用到过，也都知道为什么我还要单独列出一...
【源码开放】Hexo+Github+Coding 博客butterfly 和 matery 主题 搭建完全教程【整理】 Hexo+Github博客搭建完全教程 下面这位大佬总共写了四篇，这里我就链接了他的第一篇，剩下几篇去主页找找就好了，和上面洪卫大佬主题风格不一样，而且还专门写了一篇pwa，真是好心人！不过我更喜欢这位大佬的主题...
基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了，在各种行业里面也都掀起一阵阵的热潮，很多APP应用被简化为小程序的功能迅速推出，同时也根据小程序的特性推出各种独具匠心的应用，相对传统的APP来说，微信小程序确实能够大大...
提示：正在导出/正在加载，执行完成后关掉提示框（遮罩层），即判断form表单执行结束 导入过程中，由于数据量过大，页面会反应一段时间。客户提出加一个’正在导出中，请稍后…’ 遮罩层提示。如果不是导出需求，直接用ajax的beforeSend 和complete方法即可。但是，ajax不支持返回二进制流文件，所以一...
技术小问题解决tips笔记 1、解决 webpack-dev-server 不能使用 IP 访问 (如mac下虚拟中通过ip访问, 通过host可以访问mac下ip, ...第一种方法： webpack.dev.conf.js const HOST = '192.168.x.xx:8080 第二种方法： package.json “dev”: ...
Linux内核移植和根文件系统制作（详细步骤精讲） 第一章移植内核 1.1 Linux内核基础知识 1.1.1 Linux版本 1.1.2 什么是标准内核 1.1.3 Linux操作系统的分类 1.1.4 linux内核的选择 1.2 Linux内核启动过程概述 1.2.1 Bootloader启动过程 ...
Angular 从 0 到 1 (六）史上最简单的 Angular 教程 第一节：初识Angular-CLI第二节：登录组件的构建第三节：建立一个待办事项应用第四节：进化！模块化你的应用第五节：多用户版本的待办事项应用第六节：使用第三方样式库及模块优化用第七节：给组件带来活力Rx--隐藏...
WEB开发文档2 总结 datagrid翻页前如何先执行一段js脚本 我想实现forms验证，共有3种角色用户，分别对应三个目录，这样的要求，应该如何设置 web.config 及程序中如何实现？ 请问在ActiveX控件里怎样调用客户端页面的javascript函数，...
我们的微信小程序开发 腾讯推出微信小程序也有一段时间了，在各种行业里面也都掀起一阵阵的热潮，很多APP应用被简化为小程序的功能迅速推出，同时也根据小程序的特性推出各种独具匠心的应用，相对传统的APP来说，微信小程序确实能够大大...
[译] 将 React 作为 UI 运行时 原文地址：overreacted.io/react-as-a-… 原文作者：Dan Abramov 大多数教程把 React 称作...但是本篇文章将以一种不同的方式来讲述 React — 因为它更像是一种编程运行时。 本篇文章不会教你任何有关如何创建用户...
【让我们再聊聊浏览器资源加载优化】 几乎每一个前端程序员都知道应该把script标签放在页面底部。...Javasript 这本书的第一章Loading and Execution中，他之所以建议这么做是因为：Put all <script> tags at the bottom of the page, just in...
让我们再聊聊浏览器资源加载优化 关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中，他之所以建议这么做是因为： Put all tags at the bottom of the page, just inside of the ...
react 环境 全家桶 ...提取公共代码 ...A: 每一级包含上一级的功能，比如 state-0 包含 state-1 的功能，以此类推。 state-0 功能最全。具体可以看这篇文章： babel配置-各阶段的stage的区别 参考地址： ...
