解决方案 »
- json.stringify()解析数组问题
- 如何上传图片!各种急!!!
- 用jquery隐藏左侧导航,增大右侧内容显示宽度后,右侧内容中应用的放大镜效果magnify消失了?搞不定不让上WC,我现在手都抖了,%>_<%
- 很简单,哪错了,来好人啊!
- 整理了下自己写的框架类,欢迎板砖~!
- 请问如何实现js打印局部例如某一个框架中的页面内容?
- 大家帮我解释下这段JS代码,有些地方看不懂
- 谁可以帮我解释下这段代码实现继承的机制,谢谢
- 如何取得history中的地址呢
- 教授快和我急了,又有问题!
- 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>