JS图片loading及放大查看效果(兼容IE,FF)
<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.οnlοad=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" οnmοusemοve="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" οnmοusemοve="if (!isIE) move(event)"></div><!--缩略图上的预览窗//-->
JS图片loading及放大查看效果(兼容IE,FF)相关推荐
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 貌似说我用招商银行信用卡在今年的6月23日借了招商银行 ...
- Android的实现既能相册选择，拍照选择，点击每张图片又能放大查看！
最近很长一段时间没有更新博客了实在是比较忙最近需要使用一个功能:选择本机相册或者拍照返回图片显示到九宫格中,并且可以点击九宫格每一张放大查看,滑动等功能! 在网上也看到一些大神写的演示和第三方库,不过 ...
- grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器
grayscale实现全站及局部变黑的效果 – 兼容IE/FF等浏览器 时间:11-11-10所属栏目:前端效果 来源: james.padolsey.com 点击:470次 大小:0.04 MB 下 ...
- JS图片放大查看效果!
http://bbs.blueidea.com/thread-2812683-1-1.html http://bbs.blueidea.com/thread-2814846-1-1.html 应用效果 ...
- mysql写放大,canvas实现图片根据滑块放大缩小效果
效果图: 图(1) 原始图 图(2) 缩小后 图(3) 放大后 代码如下: #canvas1{ box-shadow: 3px 3px 10px black; } var canvas = docum ...
- Javascript实现整站黑白效果(兼容IE/FF等浏览器)
本文非原创,点击查看原帖 今天在网上看到有人推荐的一个不错的方法,试了一下,效果还是可以的,可以自定义让网页的某一部分变成灰度颜色(黑白),演示效果:http://james.padolsey.com ...
- 如何制作鼠标hover后图片列表的放大效果
图片列表是产品经理常用的展示方式,今天就和大家分享一下,在摹客RP里如何制作一个鼠标hover到图片上能够查看大图的图片列表. 先看看效果: 鼠标hover到图片上时,图片有一个放大的效果,鼠标离开图 ...
- html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）...
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（二）
js电影图片滑动放大展示特效 jQuery列表图片全图滚动预览 jQuery游戏图片手风琴切换代码 响应式图片文字横幅布局代码 swiper新闻大图滚动组合特效 swiper图文标题滚动轮播特效 js ...
最新文章
- 优化定制化abap代码必须遵守的经典黄金规则
- php试卷A高质量含答案,php试卷A高质量含答案
- postgresql 数据表【转】
- 如何解决文件不存在_传奇微端配置Pak密码文件不存在怎么解决？传奇分享汇
- LeetCode 1146. 快照数组（哈希map + 有序map）
- php mysql上传多张图片_PHP实现一次性多张图片上传功能
- 在Linux中模拟击键和鼠标移动
- js比较日期大小 判断日期
- IPv6的地址表达形式
- MP3转换器下载 - 通用mp3转换器
- 超全AD软件3D封装库 免费分享！
- axure html图标 图片大小,Axure 图标解决方案_html/css_WEB-ITnose
- FTP客户端-C++
- Web 组件完整介绍
- 图片批量重命名编号不要括号
- php获取微信授权,微信开发之网页授权获取用户信息(二)
- linux如何查看读写权限,Linux系统下如何查看及修改文件读写权限
- 史上最拉跨的导线平差程序（ by C#）
- Android 节操视频播放器jiecaovideoplayer使用
- 小米路由器微信连接到服务器,小米路由器怎么设置微信好友免密码直接链接上网?...