js 鼠标放置图片展示大图并跟随鼠标移动

html 页面中，鼠标放置图片上方，显示大图并跟随鼠标移动，当鼠标移出图片内容时，大图消失
源码内容如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 鼠标放到图片上显示大图并跟随鼠标移动</title>
<script type="text/javascript">//展示
function showBigPic(filepath) {//将文件路径传给img大图document.getElementById('pre_view').src = filepath;//获取大图div是否存在var div = document.getElementById("bigPic");if (!div) {return;}//如果存在则展示document.getElementById("bigPic").style.display="block";//获取鼠标坐标var intX = window.event.clientX;var intY = window.event.clientY;//设置大图左上角起点位置div.style.left = intX +10+ "px";div.style.top = intY + 10+"px";
}//隐藏
function closeimg(){document.getElementById("bigPic").style.display="none";
}
</script>
</head>
<body>
<div id="sta">
<img src="D:\JPG\00000000000000.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
<img src="D:\JPG\2.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
<img src="D:\JPG\10.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
</div><div id="bigPic" style="position:absolute;display:none;">
<img src="" width="600px" id="pre_view"/><br />
</div>
</body>
</html>

js 鼠标放置图片展示大图并跟随鼠标移动相关推荐

jQuery实现鼠标划过展示大图的方法
这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标划过展示大图 ...
鼠标经过，显示层并跟随鼠标
效果图: HTML: <script src="../js/jquery-1.7.2.min.js" type="text/javascript"> ...
HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
html鼠标感应图片,jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 超个性的感应鼠标悬停图片色彩渐显效果 ul.gallery { width: 750px; /* ...
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){$(".MAX_div").remove();$("#Cover_Div&q ...
qgraphicsview鼠标移动图片_QGraphicsView中的QGraphicsItem鼠标拖动
gif录制软件没有录到鼠标方法1:通过设置QGraphicsTextItem的属性实现(推荐) QGraphicsScene scene; QGraphicsTextItem *text = sce ...
html鼠标在图片上显示文字说明,鼠标路过图片，出现说明文字，是怎么做的？...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 style.pixelTop = window.event.clientY + window.document.body.scrollTop + 9; } ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
[读码时间] 跟随鼠标移动（大图展示）
说明:代码取自网络,css中注释为笔者学习时添加,js中的注释为原文所有! <!DOCTYPE html> <html> <head><meta charse ...
[HTML/JS]用HTML、JS实现放大图片效果（放大镜）
购物软件普遍自带的商品放大镜可以让卖家浏览商品细节,当使用者的鼠标移动时,放大镜也随之移动,想要自己实现如下. 具体效果及代码如下: 京东苏宁代码如下: 样式部分 //display:none使& ...

js 鼠标放置图片展示大图并跟随鼠标移动

js 鼠标放置图片展示大图并跟随鼠标移动

js 鼠标放置图片展示大图并跟随鼠标移动相关推荐

最新文章

热门文章