html⿏标划过显⽰图⽚,jquery实现⿏标滑过⼩图查看⼤图的⽅
法
本⽂实例讲述了jquery实现⿏标滑过⼩图查看⼤图的⽅法。分享给⼤家供⼤家参考。具体实现⽅法如下：
1. CSS部分：
ul{
list-style:none;
}
li{
float:left;
jquery在线图片margin-left:10px;
}
img{
border:#CCCCCC solid 1px;
}
#max{
position:absolute;
display:none; /*隐藏层*/
}
2. HTML部分：
苹果产品列表：
3. javascript部分：
$(document).ready(function(){
/
/e 事件对象，可以通过该事件对象获取事件的参数 e.pageX - X轴，距浏览器的左边的距离 e.pageY - y轴，距浏览器的顶端的距离$("a").mouseover(function(e){
//⿏标移上去 向body追加⼤图元素
//⼤图的路径：当前连接的href属性值为⼤图的路径
var $imgSrc = $(this).attr("href");
var $maxImg ="
";
//在body中添加元素
$("body").append($maxImg);
//设置层的top和left坐标，并动画显⽰层
$("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow'); }).mouseout(function(){
//⿏标移开删除⼤图所在的层
$("#max").remove();
}).mousemove(function(e){
//⿏标移动时改变⼤图所在的层的坐标
$("#max").css("top", e.pageY+20).css("left",e.pageX+10);
});
});
希望本⽂所述对⼤家的jquery程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。