两种方法实现，第一种js，第二种jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{padding:0px;margin:0px;background:#aaaaaa;}
#small_pic{
margin:10px 0 0 10px;width:375px;height:275px;cursor:crosshair;
}
#zoom{
border:1px solid red;width:120px;height:120px;background:#FFFFFF;position:absolute;top:20px;left:20px;
opacity:0.5;filter:alpha(opacity=50);
display:none;
}
#big_pic{
width:240px;height:240px;border:1px solid red;position:absolute;top:10px;left:500px;overflow:hidden;display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small_pic = document.getElementById('small_pic');
var big_pic = document.getElementById('big_pic');
var zoomer = document.getElementById('zoom');
var pic2 =document.getElementById('pic2');
//移动跟随
small_pic.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var l = ev.clientX-small_pic.offsetLeft-zoomer.offsetWidth/2;
var h = ev.clientY-small_pic.offsetTop-zoomer.offsetHeight/2;
if(l<0){l=0;}
else if(l>small_pic.offsetWidth-zoomer.offsetWidth){l=small_pic.offsetWidth-zoomer.offsetWidth+1;}
if(h<0){h=0;}
else if(h>small_pic.offsetHeight-zoomer.offsetHeight){h=small_pic.offsetHeight-zoomer.offsetHeight+1;}
document.getElementById("zoom").style.left = l+small_pic.offsetLeft+"px";
document.getElementById("zoom").style.top = h+small_pic.offsetTop+"px";
var percent = big_pic.clientWidth/zoomer.clientWidth;
pic2.style.left = big_pic.style.left-percent*l+'px';
pic2.style.top = big_pic.style.top-percent*h+'px';
}
small_pic.onmouseover = function(){
zoomer.style.display = 'block';
big_pic.style.display = 'block';
mouseMove();
};
small_pic.onmouseout = function(){
zoomer.style.display ='none';
big_pic.style.display='none';
};
};
</script>
</head>
<body>
<div id="small_pic">
<img id="pic1" src="images/00001.jpg" style="width:375px;height:275px;border:1px solid #aaaaaa;">
<span id="zoom">
</span>
</div>
<div id="big_pic">
<img id="pic2" src="images/00001.jpg" style="width:750px;height:550px;position:absolute;">
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
*{
padding:0px;
margin:0px;
border:0px;}
.all{
margin:0 auto;
width:960px;
}
.big{
float:left;
width:160px;
height:160px;
border:2px solid #CCC;
padding:3px;
margin-top:100px;}
.big .small{
width:50px;
height:50px;
position:absolute;
top:0px;
left:300px;
background:#CFF;
opacity:0.75;
display:none;}
.big .show{
width:275px;
height:150px;
padding:3px;
position:absolute;
top:100px;
left:500px;
display:none;
background:url(images/00001.jpg) no-repeat left top;
border:1px solid #666;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
var topset=0;
var leftset=0;
$(document).ready(function(e) {
$(".big").mouseleave(function(){
$(".small").css({"top":LTY,"left":LTX,"display":"none"});
$(".show").css("display","none");
}).mousemove(function(e){
topset=$(this).offset().top;
leftset=$(this).offset().left;
if(e.pageX<185)
LTX=160;
else if(e.pageX>301)
LTX=276;
else
LTX=e.pageX-25;
if(e.pageY<125)
LTY=100;
else if(e.pageY>241)
LTY=221;
else
LTY=e.pageY-25;
$(".small").css({"top":LTY,"left":LTX,"display":"block"});
position_x="-"+Math.round((LTX-160)/160*550)+"px";
position_y="-"+Math.round((LTY-100)/160*375)+"px";
pl=position_x+" "+position_y;
$(".show").css({"display":"block","background-position":pl});
});
});
</script>
<body>
<div class="all">
<div class="big">
[img]images/00001.jpg" width="160px;" height="160px[/img]
<div class="small"></div>
<div class="show"></div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
白色大气风格的旅游酒店企业网站模板.zip
python实现用户注册
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；
内容概要：文档名为《平方表，派表集合.docx》，主要内容是1至1000的平方值以及1至1000与π的乘积结果。每个数字从1开始，逐步增加至1000，对应地计算了平方值和乘以π后的值。所有计算均通过Python脚本完成，并在文档中列出了详细的计算结果。 适合人群：需要进行数学计算或程序验证的学生、教师和研究人员。 使用场景及目标：用于快速查找特定数字的平方值或其与π的乘积，适用于教学、科研及程序测试等场景。 阅读建议：可以直接查阅所需的具体数值，无需从头到尾逐行阅读。建议在使用时配合相应的计算工具，以验证和拓展数据的应用范围。
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于计算机科学与技术等相关专业，更为适合；
白色大气风格的健身私人教练模板下载.zip
白色简洁风的商务网站模板下载.zip
白色大气风格的前端设计案例展示模板.zip
内容概要：本文介绍了两个有趣的圣诞树项目方向：一是使用Arduino或Raspberry Pi开发可编程的圣诞树灯光控制系统；二是基于MATLAB开发一个圣诞树模拟器。前者通过硬件连接、编写Arduino/Raspberry Pi程序、MATLAB控制程序来实现LED灯带的闪烁；后者则通过创建圣诞树图形、添加动画效果、用户交互功能来实现虚拟的圣诞树效果。 适合人群：具备基本电子工程和编程基础的爱好者和学生。 使用场景及目标：①通过硬件和MATLAB的结合，实现实际的圣诞树灯光控制系统；②通过MATLAB模拟器，实现一个有趣的圣诞树动画展示。 阅读建议：读者可以根据自己的兴趣选择合适的项目方向，并按照步骤进行动手实践，加深对硬件编程和MATLAB编程的理解。
白色扁平风格的温室大棚公司企业网站源码下载.zip
Navicat.zip
内容概要：本文详细介绍了主成分分析（PCA）技术的原理及其在Scikit-learn库中的Python实现。首先讲解了PCA的基本概念和作用，接着通过具体示例展示了如何使用Scikit-learn进行PCA降维。内容涵盖了数据准备、模型训练、数据降维、逆转换数据等步骤，并通过可视化和实际应用案例展示了PCA的效果。最后讨论了PCA的局限性和参数调整方法。 适合人群：数据科学家、机器学习工程师、数据分析从业者及科研人员。 使用场景及目标：适用于高维数据处理，特别是在需要降维以简化数据结构、提高模型性能的场景中。具体目标包括减少计算复杂度、提高数据可视化效果和改进模型训练速度。 其他说明：本文不仅提供了详细的代码示例，还讨论了PCA在手写数字识别和机器学习模型中的应用。通过比较原始数据和降维后数据的模型性能，读者可以更好地理解PCA的影响。
VOC格式的数据集转COCO格式数据集 VOC格式的数据集转YOLO格式数据集。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
数字信号处理课程设计.doc
白色扁平化风格的灯饰灯具销售企业网站模板.zip
华豫佰佳组合促销视图.sql
白色大气风格的商务团队公司模板下载.zip
白色大气风格的VPS销售网站模板.zip