关于JQuery开发放大镜相册的求助 jquery 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 div#ab div.mainshow img+ div.zoombox div.list div.bigzoom通过绑定mainshow的mouseover \ mouseout的方法来做就可以了 还是不行,鼠标一进去,生成zoombox就产生mouseout事件了能稍微详细点不? _mainshow.mouseover(function(event) { $("#debug2").text("over"); _zoomBox = _mainobj.find("div.ZoomBox"); _zoomBox = (_zoomBox.length > 0) ? _zoomBox : _mainshow.append('<div class="ZoomBox"> </div>').children('div.ZoomBox'); _zoomBox.css({ "top": event.clientY + "px", "left": event.clientX + "px" }); _mainobj.mousemove(function(event) { _zoomBox.css({ "top": event.clientY - 10 + "px", "left": event.clientX - 10 + "px" }); $("#debug").text("x:" + _zoomBox.css("top") + "y:" + _zoomBox.css("left")); }); }); _mainshow.mouseout(function(event) { /* Act on the event */ $("#debug2").text("out"); _zoomBox.remove(); _mainobj.unbind("mousemove"); }); 无论我采用的是zoombox remove 还是hidden如果在mainshow中有zoombox慢慢移动由于zoombox一直在鼠标下面,移开到mainshow边界,不会产生mouseout事件除非非常快速移动,mousemove跟不上鼠标速度,鼠标在zoombox外,经过mainshow边框才产生mouseout事件 <!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>test</title><style>*{margin:0;padding:0;}.mainshow{position:relative;width:200px;height:200px;border:1px solid #ccc;overflow:hidden;}.mainshow img{display:block;width:200px;height:200px;}.ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;}</style></head><body><div id="ab"> <div class="mainshow"> <img src="http://images.csdn.net/20140606/538702d5489bf.png" alt=""> <div class="ZoomBox"></div> </div></div><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" >var _mainshow = $(".mainshow");_mainshow.mouseover(function(event) { _zoomBox = $(this).find("div.ZoomBox"); _zoomBox.css({ "top": event.clientY + "px", "left": event.clientX + "px", "display":"block" }); _mainshow.mousemove(function(event) { _zoomBox.css({ "top": event.clientY - 10 + "px", "left": event.clientX - 10 + "px" }); }); _mainshow.mouseout(function(event) { _mainshow.unbind("mousemove"); _zoomBox.css({ "display":"none" }); });});</script></body></html>精简了一下,只显示放大镜,其他显示图片你可以自己补充一下 你的这个例子可行,但是我加入一句#ab{margin:auto;width: 400px;},立马就不行了。不知何故?貌似是因为position:relative;的缘故,去除则是我前面提出的特殊情况,mouseout事件不触发。 你的这个例子可行,但是我加入一句#ab{margin:auto;width: 400px;},立马就不行了。不知何故?貌似是因为position:relative;的缘故,去除则是我前面提出的特殊情况,mouseout事件不触发。不是不行,你要明白event.clientX是什么位置,你要 - (#ab距离左边的距离) 大致猜到点前面我代码的问题,是因为使用了绝对定位,未对父div.mainshow设置相对定位。但是有个疑问我未对div.mainshow设置相对定位,则zoombox跟随body级别,但是为何mainshow的mouseout不触发呢?<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>test</title><style>*{margin:0;padding:0;}#ab{margin:auto;width: 400px;border:1px solid blue;text-align: center;}.mainshow{width:200px;height:200px;border:1px solid #ccc;overflow:hidden;margin:auto;}.mainshow img{display:block;width:200px;height:200px;}.ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;border:1px solid red;}</style></head><body><div id="ab"> <div class="mainshow"> <img src="http://images.csdn.net/20140606/538702d5489bf.png" alt=""> <div class="ZoomBox"></div> </div></div><div style="clear:both"></div><div id="debug">debug</div><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" >var _mainshow = $(".mainshow");var startX = $(".mainshow").offset().left;_mainshow.mouseover(function(event) { _zoomBox = $(this).find("div.ZoomBox"); _zoomBox.css({ "top": event.clientY - 10 + "px", "left": event.clientX - 10 + "px", "display":"block" }); _mainshow.mousemove(function(event) { _zoomBox.css({ "top": event.clientY - 10 + "px", "left": event.clientX - 10 + "px" }); $("#debug").text("Y:"+event.clientY+"X:" + event.clientX + "ab-x:" + $("#ab").offset().left + "ab-y:" + $("#ab").offset().top); }); _mainshow.mouseout(function(event) { _mainshow.unbind("mousemove"); _zoomBox.css({ "display":"none" }); });});</script></body></html> ZoomBox 也是属于mainshow的,只要鼠标还在zoombox上,就没执行mouseout ,所以不能让zoombox跑出mainshow <!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>test</title><style>*{margin:0;padding:0;}#ab{margin:auto;width: 400px;border:1px solid blue;text-align: center;}.mainshow{width:200px;height:200px;border:1px solid #ccc;overflow:hidden;margin:auto;overflow:hidden;position:relative;}.mainshow img{display:block;width:200px;height:200px;}.ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;border:1px solid red;}</style></head><body> <div id="ab"> <div class="mainshow"> <img src="http://images.csdn.net/20140606/538702d5489bf.png" alt=""> <div class="ZoomBox"></div> </div></div><div style="clear:both"></div><div id="debug">debug</div><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" >var _mainshow = $(".mainshow");var startX = $(".mainshow").offset().left;_mainshow.mouseover(function(event) { _zoomBox = $(this).find("div.ZoomBox"); _zoomBox.css({ "top": event.clientY - 10 + "px", "left": event.clientX - 10 - startX + "px", "display":"block" }); _mainshow.mousemove(function(event) { _zoomBox.css({ "top": event.clientY - 10 + "px", "left": event.clientX - 10 - startX + "px" }); //$("#debug").text("Y:"+event.clientY+"X:" + event.clientX + "ab-x:" + $("#ab").offset().left + "ab-y:" + $("#ab").offset().top); }); _mainshow.mouseout(function(event) { _mainshow.unbind("mousemove"); _zoomBox.css({ "display":"none" }); });});</script></body></html> 也就是说,只要对mainshow加上overflow:hidden就解决问题了?我试一试,谢谢。 打开一个网址时怎么把里面的密码文本框的值也一并的写上 extjs中如何让列的值可以点击呢? 请问如何用js验证当前gridview里面一条数据都没有? select option 问题 格式判断问题 怎么判断input输入框的值 来控制创建li的数量 请问在框架页中用脚本设置src的指向 switch的問題 onload执行什么操作?运行哪段代码?不运行哪段代码? 前端 jquer主中animate的一些小问题 怎样才能捕捉到Delete window.alter 这个动作吗?
div.mainshow
img+ div.zoombox
div.list
div.bigzoom
通过绑定mainshow的mouseover \ mouseout的方法来做就可以了
还是不行,鼠标一进去,生成zoombox就产生mouseout事件了能稍微详细点不?
_mainshow.mouseover(function(event) {
$("#debug2").text("over");
_zoomBox = _mainobj.find("div.ZoomBox");
_zoomBox = (_zoomBox.length > 0) ? _zoomBox : _mainshow.append('<div class="ZoomBox"> </div>').children('div.ZoomBox');
_zoomBox.css({
"top": event.clientY + "px",
"left": event.clientX + "px"
});
_mainobj.mousemove(function(event) {
_zoomBox.css({
"top": event.clientY - 10 + "px",
"left": event.clientX - 10 + "px"
});
$("#debug").text("x:" + _zoomBox.css("top") + "y:" + _zoomBox.css("left"));
});
}); _mainshow.mouseout(function(event) {
/* Act on the event */
$("#debug2").text("out");
_zoomBox.remove();
_mainobj.unbind("mousemove"); });
如果在mainshow中有zoombox慢慢移动由于zoombox一直在鼠标下面,移开到mainshow边界,不会产生mouseout事件
除非非常快速移动,mousemove跟不上鼠标速度,鼠标在zoombox外,经过mainshow边框才产生mouseout事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
*{margin:0;padding:0;}
.mainshow{position:relative;width:200px;height:200px;border:1px solid #ccc;overflow:hidden;}
.mainshow img{display:block;width:200px;height:200px;}
.ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;}
</style>
</head>
<body>
<div id="ab">
<div class="mainshow">
<img src="http://images.csdn.net/20140606/538702d5489bf.png" alt="">
<div class="ZoomBox"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
var _mainshow = $(".mainshow");
_mainshow.mouseover(function(event) {
_zoomBox = $(this).find("div.ZoomBox");
_zoomBox.css({
"top": event.clientY + "px",
"left": event.clientX + "px",
"display":"block"
});
_mainshow.mousemove(function(event) {
_zoomBox.css({
"top": event.clientY - 10 + "px",
"left": event.clientX - 10 + "px"
});
});
_mainshow.mouseout(function(event) {
_mainshow.unbind("mousemove");
_zoomBox.css({
"display":"none"
});
});
});
</script>
</body>
</html>
精简了一下,只显示放大镜,其他显示图片你可以自己补充一下
你的这个例子可行,但是我加入一句#ab{margin:auto;width: 400px;},立马就不行了。
不知何故?
貌似是因为position:relative;的缘故,去除
则是我前面提出的特殊情况,mouseout事件不触发。
你的这个例子可行,但是我加入一句#ab{margin:auto;width: 400px;},立马就不行了。
不知何故?
貌似是因为position:relative;的缘故,去除
则是我前面提出的特殊情况,mouseout事件不触发。不是不行,你要明白event.clientX是什么位置,你要 - (#ab距离左边的距离)
但是有个疑问
我未对div.mainshow设置相对定位,则zoombox跟随body级别,但是为何mainshow的mouseout不触发呢?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
*{margin:0;padding:0;}
#ab{margin:auto;width: 400px;border:1px solid blue;text-align: center;}
.mainshow{width:200px;height:200px;border:1px solid #ccc;overflow:hidden;margin:auto;}
.mainshow img{display:block;width:200px;height:200px;}
.ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;border:1px solid red;}
</style>
</head>
<body><div id="ab">
<div class="mainshow">
<img src="http://images.csdn.net/20140606/538702d5489bf.png" alt="">
<div class="ZoomBox"></div>
</div>
</div>
<div style="clear:both"></div>
<div id="debug">debug</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
var _mainshow = $(".mainshow");
var startX = $(".mainshow").offset().left;
_mainshow.mouseover(function(event) {
_zoomBox = $(this).find("div.ZoomBox");
_zoomBox.css({
"top": event.clientY - 10 + "px",
"left": event.clientX - 10 + "px",
"display":"block"
});
_mainshow.mousemove(function(event) {
_zoomBox.css({
"top": event.clientY - 10 + "px",
"left": event.clientX - 10 + "px"
});
$("#debug").text("Y:"+event.clientY+"X:" + event.clientX + "ab-x:" + $("#ab").offset().left + "ab-y:" + $("#ab").offset().top);
});
_mainshow.mouseout(function(event) {
_mainshow.unbind("mousemove");
_zoomBox.css({
"display":"none"
});
});
});
</script>
</body>
</html>
ZoomBox 也是属于mainshow的,只要鼠标还在zoombox上,就没执行mouseout ,所以不能让zoombox跑出mainshow <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<style>
*{margin:0;padding:0;}
#ab{margin:auto;width: 400px;border:1px solid blue;text-align: center;}
.mainshow{width:200px;height:200px;border:1px solid #ccc;overflow:hidden;margin:auto;overflow:hidden;position:relative;}
.mainshow img{display:block;width:200px;height:200px;}
.ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;border:1px solid red;}
</style>
</head>
<body>
<div id="ab">
<div class="mainshow">
<img src="http://images.csdn.net/20140606/538702d5489bf.png" alt="">
<div class="ZoomBox"></div>
</div>
</div>
<div style="clear:both"></div>
<div id="debug">debug</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
var _mainshow = $(".mainshow");
var startX = $(".mainshow").offset().left;
_mainshow.mouseover(function(event) {
_zoomBox = $(this).find("div.ZoomBox");
_zoomBox.css({
"top": event.clientY - 10 + "px",
"left": event.clientX - 10 - startX + "px",
"display":"block"
});
_mainshow.mousemove(function(event) {
_zoomBox.css({
"top": event.clientY - 10 + "px",
"left": event.clientX - 10 - startX + "px"
});
//$("#debug").text("Y:"+event.clientY+"X:" + event.clientX + "ab-x:" + $("#ab").offset().left + "ab-y:" + $("#ab").offset().top);
});
_mainshow.mouseout(function(event) {
_mainshow.unbind("mousemove");
_zoomBox.css({
"display":"none"
});
});
});
</script>
</body>
</html>