<script type="text/javascript" src="${path}/front/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//图片放大镜
$(".imagess").mouseover(function(event){
//获取新的图片
var bigImage = $("<img id='bimg' src='"+$(this).attr("src")+"' />");
//给图片设置样式
$(bigImage).css({
"top":event.pageY+5, //鼠标坐标偏移
"left":event.pageX+10,
"width":this.width*3,
"height":this.height*3,
"position":"absolute", //绝对定位
"border":"2px solid #FFBB77",
"border-radius":"20px",
"display":"none",
});
//将图片放到body中
$("body").append(bigImage);
//动画效果展示
$(bigImage).show(1000);
}).mouseout(function(){
//鼠标移出删除图片
$("#bimg").remove();
}).mousemove(function(event){
$("#bimg").css({
"top":event.pageY+5, //鼠标坐标偏移
"left":event.pageX+10,
"width":this.width*3,
"height":this.height*3,
"position":"absolute", //绝对定位
"border":"2px solid #FFBB77 ",
"border-radius":"20px",
});
});
});
</script>
jquery图片放大镜代码
最新推荐文章于 2023-07-25 18:00:00 发布