软件开发培训班 >> 编程开发 >> JavaScript

js 图片放大效果修正版

　　本文标签：js,图片放大

<!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" /> 
<meta name="Author" content="jelle.lu jelle.lu[at]gmail.com" /> 
<title>图片放大效果</title> 
</head> 
<body> 
<style type="text/css"> 
.img_box,.show_box{border:1px solid #CCC; width:200px;height:200px;float:left;float:left;margin:20px;margin:20px; overflow:hidden;} 
.img_box,.show_box{ background-position:0 0; background-repeat:no-repeat; } 
.ms_box{width:50px; height:50px;border:1px solid #CCC;background:#000;filter:alpha(opacity=20);opacity:0.2; display:none} 
.show_box{display:none} 
</style> 
 
<div class="img_box" id="j_warp"> 
<div class="ms_box" id="j_ms"></div> 
</div> 
<div class="show_box" id="j_show"></div> 
 
 
<div style="clear:both;"></div> 
<input type="button" value="OK!我想换张图片" style="margin-left:50px;" onclick="jelle(imgss[Math.floor(Math.random()*4)]);" /> 
 
<script type="text/javascript"> 
var $j=function(id){return document.getElementById(id);}; 
var getstyle=function (obj,attribute){ 
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute] 
}; 
var mp=function (e,j){//获取鼠标坐标 请传递evnet参数 
e = e || window.event; 
return (e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : 
{x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop + j}; 
}; 
var sys=(function(){//不必紧张这只是一个判断浏览器的函数,你可以使用很多方法来判断浏览器 
window.sys={}; 
var ua=navigator.userAgent.toLowerCase(); 
sys.firefox=ua.match(/firefox\/([\d\.]+)/); 
sys.ie=ua.match(/msie\s([\d\.]+)/); 
sys.chrome=ua.match(/chrome\/([\d\.]+)/); 
return sys; 
})() 
var zoomImg=function(imgs){ 
var o=$j("j_warp"),//鼠标相应的区域 
t=$j("j_ms"),//跟随鼠标移动的div 
s=$j("j_show"),//显示大图的div 
by_o={x:o.offsetLeft,y:o.offsetTop},//最外面容器 具体页面的 x,y 
msw=parseInt(getstyle(t,"width")),//跟随鼠标移动的DIV宽度 
msh=parseInt(getstyle(t,"height")),//高度 
maxy=parseInt(getstyle(o,"height"))-msh,//减去移动框的高度 MS_box的拖动界限 y 
maxx=parseInt(getstyle(o,"width"))-msw,//减去移动框的宽度 MS_box的拖动界限 x 
toggle=function(status){//用户鼠标激活以后显示或者隐藏需要的box 
t.style.display=status; 
s.style.display=status; 
}, 
setBackgroundImg=function(imgs){ 
o.style.backgroundImage=url(+imgs[small]+); 
s.style.backgroundImage=url(+imgs[big]+); 
}, 
j=0;//被卷曲的高度 --IE获得鼠标的坐标还要加上被卷曲的高度 
//当然其实还应该加上 --水平被卷曲的高度 。这里没做 。一般也不需要 
setBackgroundImg(imgs); 
if(sys.ie){ 
window.onscroll=function(){//哎 为了获取一个被卷去的高度 居然写了N多代码 。看样子是该写个通用的方法了 。 
j=parent?(parent.document.body.scrollTop+parent.document.documentElement.scrollTop) : 
(document.body.scrollTop+document.documentElement.scrollTop); 
} 
}; 
o.onmousemove=function(e){ 
toggle("block");//显示盒子 
//var by={x:t.offsetLeft,y:t.offsetTop}; 
var ms=mp(e,j),//获取当前鼠标位置 
jy=ms.y-by_o.y-msw/2, 
//获取当前移动的ms_box位置 计算方法是 鼠标坐标 - 最外面容器的坐标 - 盒子的宽(高)的/2 
jx=ms.x-by_o.x-msh/2, 
y= jy>=maxy ? maxy : jy<=-1? -1 : jy,//判断是否超过界限 
x= jx>=maxx ? maxx : jx<=-1? -1 : jx, 
xx= x*4 < 0 ? 0 : x*4,//计算显示box的背景 的 x y 
yy= y*4 < 0 ? 0 : y*4;//这里*4 是因为我的大图跟小图的比例是4:1 请注意大盒子与小盒子的比例也要4:1 
//不然可能会给你带来麻烦 。当然你也可以使用其他比例！ 
t.style.marginTop=y+"px";//设置ms_box的位置 
t.style.marginLeft=x+"px"; 
$j("j_show").style.backgroundPosition="-"+xx+"px -"+yy+"px";//设置背景的xy坐标 
} 
o.onmouseout=function(){ 
toggle("none"); 
} 
return setBackgroundImg;//我们返回这个换图的方法 。这样就可以变换图片了 。 
} 
//----------- 
var imgss=[ 
{big:"http://files.jb51.net/demoimg/201005/b1.jpg",small:"http://files.jb51.net/demoimg/201005/r_s1.jpg"}, 
{big:"http://files.jb51.net/demoimg/201005/b2.jpg",small:"http://files.jb51.net/demoimg/201005/r_s2.jpg"}, 
{big:"http://files.jb51.net/demoimg/201005/b3.jpg",small:"http://files.jb51.net/demoimg/201005/r_s3.jpg"}, 
{big:"http://files.jb51.net/demoimg/201005/b4.jpg",small:"http://files.jb51.net/demoimg/201005/r_s4.jpg"} 
];//img地址数据 
var jelle=zoomImg(imgss[3])//开始，了我比较喜欢最后一组图片 
</script> 
</body> 
</html>

技术文章快速查找

jQuery中获取Radio元素值的方法

AJAX是否能够取代桌面应用程序

aspx中利用js实现确认删除代码

js下用层来实现select的title提示属性

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

jQuery表格行换色的三种实现方法

javascript 精粹笔记

js 实现 input type="file" 文件上传示例代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

js 图片放大效果 修正版

js 图片放大效果修正版