原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
PAGE 1
实验报告
题目：商品图片自动放大效果
实验目的：
用JQuery实现某电商网站的商品图片自动放大效果。
实验原理：
两张图片，一张小图，一张大图，先获取鼠标在小图上面的坐标，然后以一个div来显示大图，并根据大图和小图的大小比例，来获取大图所显示的横纵坐标。
获取鼠标在小图内的横纵坐标；
根据小图中鼠标的坐标来计算得出小框的横纵坐标，给小框定位；
根据大图和小图的大小比例，推算出大图所显示的横纵坐标。
程序清单：
!DOCTYPE html
html
head
titlejQuery放大镜效果/title
script type=text/javascript src=js/jquery-3.6.0.min.js/script
script src=zoom.js/script
script
$(function(){
$(#goods).mouseover(
function(){
$(#indiv).show();
$(#bigpic).show();
}
);
$(#goods).mousemove(
function(e){
mousex = e.pageX-$(#goods).offset().left;
mousey = e.pageY-$(#goods).offset().top;
if(mousex0 mousex324 mousey0 mousey244){
marginleft=mousex+130;
margintop=mousey-550;
}
$(#indiv).css(margin-left,marginleft+px);
$(#indiv).css(margin-top,margintop+px);
imgposx = -1600*(mousex-25)/320;
imgposy = -1200*(mousey-25)/240;
$(#pos).html(鼠标在小图的左上角相对坐标：+(mousex-25)+|+(mousey-25)+； 大图的左上角相对坐标：+imgposx+|+imgposy);
$(#bigpic).css(background-position, imgposx +px +imgposy +px);
}
);
$(#goods).mouseout(
function(){
$(#indiv).hide();
$(#bigpic).hide();
}
);
var $div = $(#div);
$(document).mousemove(function(e){
$div.css({
left : (e.pageX-100)+px,
top : (e.pageY-100)+px
})
})
});
/script
style
#pic{
width:320px;
height:240px;
}
#goods{
width:324px;
height:244px;
border:2px solid #FFEEEE;
margin-left:200px;
}
#indiv{
display:none;
filter:alpha(opacity=50); /*是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写*/
-moz-opacity:0.5;
opacity:0.5;/*设置 div 元素的不透明级别*/
width:66px;
height:66px;
/*border:1px solid #FAAAAA;*/
background-color:#FFEEEE;
}
#bigpic{
display:none;
margin-left:200px;
/*background-image:url(1.jpg);*/
background-image: url(img/1.jpg);
width:300px;
height:300px;
background-repeat:no-repeat;
}
/style
/head
body
div id=goods
img id=pic src=img/1.jpg /
/div
div id=bigpicnbsp/div
div id=indiv/div
/body
/html
四、实验心得：
通过本次实
文档评论（0）