小弟菜鸟大家多指点

xiaosuper 2010-01-04 03:07:26
function g(id)
{
return document.getElementById(id);
}

var srcX = 720; //原图长宽 (bigbox内图片大小)
var srcY = 720;
var smallX = 360; //缩略图大小,要与原大小成比例 (smallbox内图片大小)
var smallY = 360;

var bigX = 390; //原比例预览大小,可以设置成任意大(view的长宽及smallbox等比长宽)
var bigY = 257;
var viewX = smallX*bigX/srcX; //预览范围(缩略图宽:放大区宽 = 大图宽:bigbox宽)
var viewY = smallY*bigY/srcY;
var bl = bigX / viewX ;//缩小比例
var border = 1; //边框

//初始化小图高度
window.onload=function (){

g("bigbox").style.borderWidth=border + "px";
g("bigbox").style.width=bigX+ "px";
g("bigbox").style.height=bigY+ "px";
g("ImgChange").width=smallX;
g("ImgChange").height=smallY;

g("view").style.width=viewX + "px";
g("view").style.height=viewY+ "px";

g("smallbox").style.width=smallX+ "px";
g("smallbox").style.height=smallY + "px";
var strurl = document.getElementById("ImgChange").src;
document.getElementById("bigbox").style.background = "url('"+strurl+"') no-repeat";
g("bigbox").style.display = "none";
g("view").style.display = "none";
g("cons").style.display = "none";
}

var leftTemp;
var topTemp;
function DragListener(){
this.outs=function(){
g("bigbox").style.display = "none";
g("view").style.display = "none";
g("cons").style.display = "none";
return false;
},
this.move=function(e){
var e=e||window.event;
g("bigbox").style.display = "block";
g("view").style.display = "block";
g("cons").style.display = "block";
var viewlefts=Event.pointerX(e) - viewX/2; //捕获鼠标坐标 并将坐标定位在View的中心位置
var viewtop=Event.pointerY(e) - viewY/2;
if(viewlefts>getLeft($("smallbox")) && viewlefts<(getLeft($("smallbox"))+smallX-viewX))
{
g("view").style.left = viewlefts + "px";
leftTemp=viewlefts;
}
else
{
g("view").style.left=leftTemp + "px";
}

if(viewtop>getTop($("smallbox")) && viewtop<(getTop($("smallbox"))+smallY-viewY))
{
g("view").style.top = viewtop + "px";
topTemp=viewtop;
}
else
{
g("view").style.top=topTemp + "px";
}

g("cons").style.left = getLeft($("divgoods1")) + 360 + "px";
g("cons").style.top = getTop($("divgoods1")) + 38 + "px";

var vX=getLeft($("view"))-getLeft($("smallbox"));
var vY=getTop($("smallbox"))-getTop($("view"));
var bigboxbackXY = - vX * bl + "px " + vY * bl + "px";
g("bigbox").style.backgroundPosition= bigboxbackXY;

return false;
}
}


var obj=new DragListener();
$("smallbox").onmousemove = obj.move;
$("view").onmousemove = obj.move;
$("smallbox").onmouseout = obj.outs;
$("view").onmouseout = obj.outs;
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}

function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

...全文
93 7 打赏 收藏 举报
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
打字员 2010-01-15
  • 打赏
  • 举报
回复
顶一下!
haijiaoxiaowu 2010-01-15
  • 打赏
  • 举报
回复
楼主的意思是,他写了一个东西,让大家看看写的怎么样,有什么需要修改的……
不过这个是什么啊?图片特效?
wwq0123 2010-01-15
  • 打赏
  • 举报
回复
什么问题?
antony1029 2010-01-15
  • 打赏
  • 举报
回复
给一段代码。也不知道 你要问什么啊。
2010-01-15
  • 打赏
  • 举报
回复
没看懂你想说什么```
xiaosuper 2010-01-15
  • 打赏
  • 举报
回复
UP下我给分啊!
有分没人要呢!
xiaosuper 2010-01-15
  • 打赏
  • 举报
回复
这是一个放大镜的效果吧!

不知道对不对~原理有搞不打懂。


这张贴放了有一段时间了,一个留言也没有,我也不好结贴给分,
有留言我就给分结贴了!
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-04 03:07
社区公告
暂无公告