html在指定位置鼠标悬停显示出图片,简单实现鼠标悬停显示图片
预览HTML部分展示位置${p.productImg}创建一个放图片的容器去掉当图片没有路径时默认的边框img[src=""],img:not([src]){opacity:0;}JavaScript部分/*** 显示图片详情,鼠标移入时执行*/function on(productImg) {if (productImg == "undefined" || productImg == null
预览
HTML部分
展示位置
${p.productImg}创建一个放图片的容器
去掉当图片没有路径时默认的边框
img[src=""],img:not([src]){
opacity:0;
}
JavaScript部分
/**
* 显示图片详情,鼠标移入时执行
*/
function on(productImg) {
if (productImg == "undefined" || productImg == null || productImg == "") {
return;
}
//给图片容器赋值路径
$("#s").attr("src", "${pageContext.request.contextPath}/static/images/upload/" + productImg);
$(document).mousemove(function(e) {
$("#s").css("position", "absolute").css("left", e.pageX+1+"px").css("top", e.pageY+1+"px");
})
}
/**
* 关闭图片,当鼠标移出时执行
*/
function off() {
$("#s").attr("src", "");
$(document).mousemove(function(e) {
$("#s").css("position", "absolute").css("left", "-400px").css("top", "-400px");
})
}
原文:https://www.cnblogs.com/yxmhl/p/11622706.html
更多推荐
所有评论(0)