首先：我们需要一个可以移动的DIV
复制代码 代码如下:
<div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;>
这个DIV 可以移动，你可以测试下。
</div>
<script type="text/javascript">
var getMouseP=function (e){//获取鼠标坐标 请传递evnet参数
e = e || window.event;
var m=(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 };
return m;
};
move=function(o,t){
o=$j(o);
t=$j(t);
o.onmousedown=function(ev){
var mxy=getMouseP(ev);//获取当前鼠标坐标
var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)};
o.style.cursor="move";
document.onmousemove=function(ev){
var mxy=getMouseP(ev);
t.style.left=mxy.x-by.x+"px";
t.style.top=mxy.y-by.y+"px";
};
document.onmouseup=function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.onmousemove=null;
}
}
}
move("jelle_test_div","jelle_test_div");
</script>
然后：我们需要控制他的移动范围
复制代码 代码如下:
<div style="border:1px solid #CCC; width:500px; height:415px; background:url(xxx/c.jpg);" id="jelle_warpper">
<div style="width:100px; height:50px; border:1px solid #CCC;" id="jelle_move"></div>
</div>
<script type="text/javascript">
var mp=function (e){//获取鼠标坐标 请传递evnet参数
e = e || window.event;
var m=(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 };
return m;
}
var move2=function(o,t){//请提前设置CSS position:absolute;并激活filter:alpha(opacity=100);
//o相应鼠标拖动的区域ID T被移动对象的ID
o=$j(o);
t=$j(t);
by_o={x:o.offsetLeft,y:o.offsetTop};
o.onmousemove=function(ev){
//var mxy=Jelle.getMouseP(ev);//获取当前鼠标坐标
var by={x:t.offsetLeft,y:t.offsetTop};
var ms=mp(ev);
t.innerHTML=(by_o.x-by.x)+"---"+(by_o.x-by.y);
jy=ms.y-by_o.y-25;
jx=ms.x-by_o.x-50;
maxy=415-50;//减去移动框的高度
maxx=500-100;//减去移动框的宽度
var y=jy>=maxy?maxy:jy<=0?0:jy;
var x=jx>=maxx?maxx:jx<=0?0:jx;
t.style.marginTop=y+"px";
t.style.marginLeft=x+"px";
}
}
move2("jelle_warpper","jelle_move")
</script>
解决了上面的我问题。那么这个效果就不难了。！
我们可以获得了 一个 x y, 恰好这个 x y 可以用来设置大图背景的 x y。
这里我们值得注意的事。要把握好大图与小图的比例。
还有就是显示图片的DIV 与移动的DIV 比例。
比如我这里的比例： 大图800*800 小图是200*200
显示大图的DIV 200*200 移动的div 50*50。
其实我还没总结出这个公式。绕的有点头晕呵呵。
下面我贴出全部代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
复制代码 代码如下:
<div style="border:1px solid #CCC;position:absolute; width:200px; height:100px; cursor:move;" id="jelle_test_divquot;>
这个DIV 可以移动，你可以测试下。
</div>
<script type="text/javascript">
var getMouseP=function (e){//获取鼠标坐标 请传递evnet参数
e = e || window.event;
var m=(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 };
return m;
};
move=function(o,t){
o=$j(o);
t=$j(t);
o.onmousedown=function(ev){
var mxy=getMouseP(ev);//获取当前鼠标坐标
var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)};
o.style.cursor="move";
document.onmousemove=function(ev){
var mxy=getMouseP(ev);
t.style.left=mxy.x-by.x+"px";
t.style.top=mxy.y-by.y+"px";
};
document.onmouseup=function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.onmousemove=null;
}
}
}
move("jelle_test_div","jelle_test_div");
</script>
然后：我们需要控制他的移动范围
复制代码 代码如下:
<div style="border:1px solid #CCC; width:500px; height:415px; background:url(xxx/c.jpg);" id="jelle_warpper">
<div style="width:100px; height:50px; border:1px solid #CCC;" id="jelle_move"></div>
</div>
<script type="text/javascript">
var mp=function (e){//获取鼠标坐标 请传递evnet参数
e = e || window.event;
var m=(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 };
return m;
}
var move2=function(o,t){//请提前设置CSS position:absolute;并激活filter:alpha(opacity=100);
//o相应鼠标拖动的区域ID T被移动对象的ID
o=$j(o);
t=$j(t);
by_o={x:o.offsetLeft,y:o.offsetTop};
o.onmousemove=function(ev){
//var mxy=Jelle.getMouseP(ev);//获取当前鼠标坐标
var by={x:t.offsetLeft,y:t.offsetTop};
var ms=mp(ev);
t.innerHTML=(by_o.x-by.x)+"---"+(by_o.x-by.y);
jy=ms.y-by_o.y-25;
jx=ms.x-by_o.x-50;
maxy=415-50;//减去移动框的高度
maxx=500-100;//减去移动框的宽度
var y=jy>=maxy?maxy:jy<=0?0:jy;
var x=jx>=maxx?maxx:jx<=0?0:jx;
t.style.marginTop=y+"px";
t.style.marginLeft=x+"px";
}
}
move2("jelle_warpper","jelle_move")
</script>
解决了上面的我问题。那么这个效果就不难了。！
我们可以获得了 一个 x y, 恰好这个 x y 可以用来设置大图背景的 x y。
这里我们值得注意的事。要把握好大图与小图的比例。
还有就是显示图片的DIV 与移动的DIV 比例。
比如我这里的比例： 大图800*800 小图是200*200
显示大图的DIV 200*200 移动的div 50*50。
其实我还没总结出这个公式。绕的有点头晕呵呵。
下面我贴出全部代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
标签：
js,图片放大
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“js 图片放大效果 修正版”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。