- 技术
- JQ实现鼠标经过显示大图简单示例
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta http
-equiv
="content-type" content
="text/html; charset=utf-8" />
<title
>JQ实现鼠标经过显示大图效果
</title
>
<meta name
="description" content
="JQ实现鼠标经过显示大图效果" /><meta name
="keywords" content
="JQ实现鼠标经过显示大图效果" />
<script type
="text/javascript" src
="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script
>
<script type
="text/javascript">
$(function () {
var x
= 10;
var y
= 20;
$("a.tooltip").mouseover(function (e
) {
this.myTitle
= this.title
;
this.title
= "";
var imgTitle
= this.myTitle
? "<br />" + this.myTitle
+ " 产品预览图" : "";
var tooltip
= "<div id='tooltip'><img src='" + this.href
+ "' alt='产品' width='765' height='574' />" + imgTitle
+ "</div>";
$("body").append(tooltip
);
$("#tooltip")
.css({
"top": (e
.pageY
+ y
) + "px",
"left": (e
.pageX
+ x
) + "px"
}).show("fast");
}).mouseout(function (e
) {
this.title
= this.myTitle
;
$("#tooltip").remove();
}).mousemove(function (e
) {
$("#tooltip").css({
"top": (e
.pageY
+ y
) + "px",
"left": (e
.pageX
+ x
) + "px"
});
});
})
</script
>
<style
>
ul
{margin
: 30px auto
; width
:1440px
;}
ul li
{float
: left
; padding
-right
: 20px
; list
-style
: none
;}
ul li img
{width
: 77px
; height
: 57px
; padding
: 6px
; border
: 1px solid #ccc
; background
-color
:#eee
; -webkit
-border
-radius
: 8px
;}
#tooltip
{
position
: absolute
;
background
-color
: #eee
;
border
: 1px solid #
999;
width
: 765px
;
height
: 590px
;
-webkit
-border
-radius
: 8px
;
font
-family
: "微软雅黑";
padding
: 20px
;
}
</style
>
</head
>
<body
>
<div
>
<ul
>
<li
><a href
="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" title
="1" class="tooltip"><img src
="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" alt
="1" /></a
></li
>
<li
><a href
="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" title
="2" class="tooltip"><img src
="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" alt
="2" /></a
></li
>
<li
><a href
="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" title
="3" class="tooltip"><img src
="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" alt
="3" /></a
></li
>
<li
><a href
="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" title
="4" class="tooltip"><img src
="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" alt
="4" /></a
></li
>
</ul
></div
><div
>提醒：把光标移动到图片上查看效果。
</div
>
</body
>
</html
>
最新优化代码：
function bindBigImage() {
$(".tooltip1").unbind();
var x
= 10;
var y
= 20;
var size
= 400;
var minHeight
= 0;
var windowWidth
= $(window
).width();
var windowHeight
= $(window
).height();
$(".tooltip1").mouseover(function (e
) {
this.myTitle
= this.title
;
this.title
= "";
var tooltip
= "<div id='tooltip'><img src='" + $(this).attr('href') + "' alt='大图' width='" + size
+ "' style='max-width:400px;max-height:600px;' /></div>";
$("body").append(tooltip
);
var aimHeiht
= $("#tooltip").height();
var imgWidth
= windowWidth
- e
.pageX
;
var imgHeight
= windowHeight
- e
.pageY
;
if (aimHeiht
< size
)
minHeight
= size
;
else
minHeight
= aimHeiht
;
if (imgWidth
< size
) {
if (imgHeight
< (aimHeiht
+ y
)) {
$("#tooltip")
.css({
"top": (e
.pageY
- y
- minHeight
+ imgHeight
) + "px",
"right": (e
.pageX
- x
- size
) + "px",
"position": "absolute",
"z-index": 999
}).show("fast");
}
else {
$("#tooltip")
.css({
"top": (e
.pageY
+ y
) + "px",
"right": (e
.pageX
- x
- size
) + "px",
"position": "absolute",
"z-index": 999
}).show("fast");
}
}
else {
if (imgHeight
< (aimHeiht
+ y
)) {
$("#tooltip")
.css({
"top": (e
.pageY
- y
- minHeight
+ imgHeight
) + "px",
"left": (e
.pageX
+ x
) + "px",
"position": "absolute",
"z-index": 999
}).show("fast");
}
else {
$("#tooltip")
.css({
"top": (e
.pageY
+ y
) + "px",
"left": (e
.pageX
+ x
) + "px",
"position": "absolute",
"z-index": 999
}).show("fast");
}
}
}).mouseout(function (e
) {
this.title
= this.myTitle
;
$("#tooltip").remove();
}).mousemove(function (e
) {
var aimHeiht
= $("#tooltip").height();
var imgWidth
= windowWidth
- e
.pageX
;
var imgHeight
= windowHeight
- e
.pageY
;
if (aimHeiht
< size
)
minHeight
= size
;
else
minHeight
= aimHeiht
;
if (imgWidth
< size
) {
if (imgHeight
< (aimHeiht
+ y
)) {
$("#tooltip").css({
"top": (e
.pageY
- y
- minHeight
+ imgHeight
) + "px",
"right": (e
.pageX
- x
- size
) + "px"
});
}
else {
$("#tooltip").css({
"top": (e
.pageY
+ y
) + "px",
"right": (e
.pageX
- x
- size
) + "px"
});
}
}
else {
if (imgHeight
< (aimHeiht
+ y
)) {
$("#tooltip").css({
"top": (e
.pageY
- y
- minHeight
+ imgHeight
) + "px",
"left": (e
.pageX
+ x
) + "px"
});
}
else {
$("#tooltip").css({
"top": (e
.pageY
+ y
) + "px",
"left": (e
.pageX
+ x
) + "px"
});
}
}
});
}
Processed:
0.010, SQL:
9
