浏览 9520 次
|
精华帖 (2) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-03-24
最后修改：2009-06-25
最近帮一个朋友做网站，想要一个类似京东网展示手机图片的功能。 mouseout的时候隐藏div~~
最后加了点说明， 一共130行代码~~
--------------------------
ps：
v0.1：实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-03-24
/**
qsoft.PopBigImage
author： kimmking@163.com
date： 2009年3月24日16:03:13
功能描述：
一般页面的的图片为了布局考虑，显示大小都小于实际大小。
鼠标在图片上移动时，在旁边展示一个跟此图片显示大小一样的层。
并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
参数描述：
origImageId： 要绑定的img对象的id
dx：展示大图相对于绑定的img对象右方的x轴偏移量
dy：展示大图相对于绑定的img对象上方的y轴偏移量
用法：
window.onload = function(){
var pbi = new qsoft.PopBigImage("orig",10,-2);
pbi.render();
}
**/
if(typeof(qsoft) == "undefined")
qsoft = {};
qsoft.PopBigImage = function (origImageId,dx,dy)
{
this.oim = document.getElementById(origImageId);
this.oim.style.cursor = "crosshair";
this.ow = this.oim.width;
this.oh = this.oim.height;
this.detaX = dx?dx : 30;
this.detaY = dy?dy : 0;
this.getAbsSize = function (obj)
{
return obj.getBoundingClientRect();
};
var rect = this.getAbsSize(this.oim);
this.ol = rect.left + this.detaX + this.ow;
this.ot = rect.top + this.detaY;
this.src = this.oim.src;
this.getImageSize = function (img)
{
var im = new Image();
im.src = img.src;
var size = {};
size.width = im.width;
size.height = im.height;
im = null;
delete im;
return size;
};
var rsize = this.getImageSize(this.oim);
this.w = rsize.width;
this.h = rsize.height;
var qObj = this;
this.createMask = function ()
{
if(typeof(this.mask) == "undefined")
{
this.mask = document.createElement("div");
this.mask.id = this.oim.id + "_mask";
this.mask.style.position = "absolute";
this.mask.style.width = this.ow;
this.mask.style.height = this.oh;
this.mask.style.left = this.ol;
this.mask.style.top = this.ot;
this.mask.style.backgroundImage = "url("+this.src+")";
this.mask.style.backgroundRepeat = "no-repeat";
this.mask.style.display ="none";
document.body.appendChild(this.mask);
//this.mask.style = "position: absolute; ";//left: "+this.ol+"; top: "+this.ot+";width: " + this.ow + "; height: " + this.oh + ";
///*display: none;*/ background: url(" + this.src + ") left top no-repeat;";
}
};
this.regEvent = function ()
{
this.oim.onmousemove = function ()
{
var x = Math.ceil(event.offsetX * qObj.w/qObj.ow) - qObj.ow/2;
var y = Math.ceil(event.offsetY * qObj.h/qObj.oh) - qObj.oh/2;
if(x<0) x = 0;
if(y<0) y = 0;
var maxx = Math.ceil((qObj.w-qObj.ow));
var maxy = Math.ceil((qObj.h-qObj.oh));
if(x>maxx) x = maxx;
if(y>maxy) y = maxy;
qObj.mask.style.backgroundPositionX = -x;
qObj.mask.style.backgroundPositionY = -y;
};
this.oim.onmouseout = function (e)
{
qObj.mask.style.display = "none";
};
this.oim.onmouseenter = function (e)
{
qObj.mask.style.display = "block";
};
};
this.render = function ()
{
this.createMask();
this.regEvent();
};
};
qsoft.version = 0.1;
<script type="text/javascript" src="qsoft.PopBigImage.js"></script>
<script type="text/javascript">
window.onload = function (){
var pbi = new qsoft.PopBigImage("orig",24,-2);
pbi.render();
var pbi1 = new qsoft.PopBigImage("win7",24,-2);
pbi1.render();
}
</script>
<img width="160" height="120" id="orig" src="dota.jpg" alt="" />
<img width="160" height="120" id="win7" src="win7.jpg" alt="" />
|
| 返回顶楼 | |
|
发表时间：2009-03-25
/**
qsoft.PopBigImage
version：0.2
author： kimmking@163.com
date： 2009年3月25日3:54:50
功能描述：
一般页面的的图片为了布局考虑，显示大小都小于实际大小。
鼠标在图片上移动时，在旁边展示一个跟此图片显示大小一样的层。
并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
v0.1：实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。
v0.2：实现了Firefox的兼容支持，修改了IE下传递偏移0,0时有空隙的对不齐问题。
参数描述：
origImageId： 要绑定的img对象的id
dx：展示大图相对于绑定的img对象右方的x轴偏移量
dy：展示大图相对于绑定的img对象上方的y轴偏移量
用法：
window.onload = function(){
var pbi = new qsoft.PopBigImage("orig",20,0);
pbi.render();
}
**/
var qsoft = {
version : 0.2,
isIE : document.all?true:false
}
qsoft.PopBigImage = function (origImageId,dx,dy)
{
this.oim = document.getElementById(origImageId);
this.oim.style.cursor = "crosshair";
this.ow = this.oim.width;
this.oh = this.oim.height;
this.detaX = (typeof(dx) == "undefined")?30 : dx;
this.detaY = (typeof(dy) == "undefined")?0 : dy;
this.getAbsSize = function (obj)
{
return obj.getBoundingClientRect();
};
var rect = this.getAbsSize(this.oim);
this.ol = rect.left + this.detaX + this.ow - (qsoft.isIE ?2:0);
this.ot = rect.top + this.detaY - (qsoft.isIE ?2:0);
this.src = this.oim.src;
this.getImageSize = function (img)
{
var im = new Image();
im.src = img.src;
var size = {};
size.width = im.width;
size.height = im.height;
im = null;
delete im;
return size;
};
var rsize = this.getImageSize(this.oim);
this.w = rsize.width;
this.h = rsize.height;
var qObj = this;
this.createMask = function ()
{
if(typeof(this.mask) == "undefined")
{
this.mask = document.createElement("div");
this.mask.style.position = "absolute";
this.mask.style.width = this.ow + "px";
this.mask.style.height = this.oh + "px";
this.mask.style.left = this.ol + "px";
this.mask.style.top = this.ot + "px";
this.mask.style.backgroundImage = "url("+this.src+")";
this.mask.style.backgroundRepeat = "no-repeat";
this.mask.style.display ="none";
document.body.appendChild(this.mask);
}
};
this.regEvent = function ()
{
this.oim.onmousemove = function ()
{
var e = arguments[0] || window.event;
var sz = qObj.getAbsSize(e.target|| e.srcElement);
var ox = qsoft.isIE ? e.offsetX: (e.pageX - sz.left);
var oy = qsoft.isIE ? e.offsetY: (e.pageY - sz.top);
var x = Math.ceil(ox * qObj.w/qObj.ow) - qObj.ow/2;
var y = Math.ceil(oy * qObj.h/qObj.oh) - qObj.oh/2;
if(x<0) x = 0;
if(y<0) y = 0;
var maxx = Math.ceil((qObj.w-qObj.ow));
var maxy = Math.ceil((qObj.h-qObj.oh));
if(x>maxx) x = maxx;
if(y>maxy) y = maxy;
qObj.mask.style.backgroundPosition = -x + "px " + -y + "px";
};
this.oim.onmouseout = function ()
{
qObj.mask.style.display = "none";
};
this.oim.onmouseover = function ()
{
qObj.mask.style.display = "block";
};
};
this.render = function ()
{
this.createMask();
this.regEvent();
};
};
|
| 返回顶楼 | |
|
发表时间：2009-06-25
firefox3下不兼容。。
|
| 返回顶楼 | |
|
发表时间：2009-06-25
tianyazjq110 写道 firefox3下不兼容。。 firefox 3.0.8 没有问题 |
| 返回顶楼 | |
|
发表时间：2009-06-25
kimmking 写道 tianyazjq110 写道 firefox3下不兼容。。 firefox 3.0.8 没有问题 新上传了v0.4版本 /** qsoft.PopBigImage version：0.40 author： kimmking@163.com date： 2009年3月25日3:54:50 功能描述： 一般页面的的图片为了布局考虑，显示大小都小于实际大小。 鼠标在图片上移动时，在旁边展示一个跟此图片显示大小一样的层。 并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。 v0.1：实现了IE下的鼠标滑动小图动态展示对应的放大局部图的功能。 v0.2：实现了Firefox的兼容支持，修改了IE下传递偏移0,0时有空隙的对不齐问题。 v0.3：实现了鼠标第一次进入图片时动态创建显示层。提供了一个静态创建方法。 v0.35：加入了对google chrome浏览器的支持。 修改了滚动页面后，展示层位置不对。 v04：修改了ie6下图片晃动的bug。 修改了在展示层大小有时超出浏览器窗口右边和下边边界的bug。 ie6/ie7/ff3/chrome下通过。 对于ie7，存在浏览器缓存图片后，获取图片大小为旧值的bug。 参数描述： origImageId： 要绑定的img对象的id dx：展示大图相对于绑定的img对象右方的x轴偏移量 dy：展示大图相对于绑定的img对象上方的y轴偏移量 mx：展示层的宽 mx在0到1之间时，取大图的宽*mx的值与小图的宽中的较大者 mx在1到10之间时，取小图的宽*mx的值与大图的宽中的较小者 mx大于10时，确保mx在大小图的宽之间，超出的话，取边界值 my：展示层的高 参照mx的值 bflag：create方法中渲染完后是否将展示层显示出来， 在onmouseover事件中使用true参数 在页面加载时初始化的话使用false参数 用法： 1、页面加载后统一预先加载，在页面上添加JavaScript脚本 window.onload = function(){ new qsoft.PopBigImage("orig",20,0,2,2).render(); //或是 qsoft.PopBigImage.create("orig",20,0,2,2,false).render(); } 或是 2、鼠标第一次进入图片时才加载本图片的显示层，在img标签中添加 onmouseover="qsoft.PopBigImage.create(this,20,0,2,2,true);" **/ |
| 返回顶楼 | |
|
发表时间：2009-06-29
不错！很是细致
|
| 返回顶楼 | |
