书签分享收藏举报版权申诉 / 27

立即下载加入VIP,免费下载

当前位置：首页 > 医药卫生 > 临床医学 > 原生javascript实现图片放大镜效果.docx

原生javascript实现图片放大镜效果.docx

文档编号：10515114
上传时间：2023-02-17
格式：DOCX
页数：27
大小：24.48KB

原生javascript实现图片放大镜效果.docx

《原生javascript实现图片放大镜效果.docx》由会员分享，可在线阅读，更多相关《原生javascript实现图片放大镜效果.docx（27页珍藏版）》请在冰豆网上搜索。

原生javascript实现图片放大镜效果.docx

原生javascript实现图片放大镜效果

DOCTYPEhtml>

--savedfromurl=（0042）-->

原生javascript实现图片放大镜效果-依然仰望-博客园

768px）"type="text/css"rel="stylesheet"href="./原生javascript实现图片放大镜效果-依然仰望-博客园_files/bundle-darkgreentrip-mobile.css">

varcurrentBlogApp='wswq',cb_enable_mathjax=false;varisLogined=false;

--PageBeginHtmlBlockBegin-->

--PageBeginHtmlBlockEnd-->

--done-->

--done-->

人生苦短，必须果敢。

--end:

blogTitle博客的标题和副标题-->

---->

随笔-18

文章-0

评论-28

--end:

blogStats-->

--end:

navigator博客导航栏-->

--end:

header头部-->

--done-->

原生javascript实现图片放大镜效果

当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。

今天我对这一技术，进行简单实现，实现图片放大镜效果。

我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码：

void（0）;"onclick="copyCnblogsCode（this）"title="复制代码">

#008080;">1<!

doctypehtml>

#008080;">2<html>

#008080;">3<head>

#008080;">4<metacharset="UTF-8">

#008080;">5<title>Document</title>

#008080;">6<styletype="text/css">

#008080;">7*

#000000;">{margin:

0px;padding:

0px;}

#008080;">8.small-

#000000;">box{

#008080;">9

#000000;">width:

300px;

#008080;">10

#000000;">height:

300px;

#008080;">11margin-

#000000;">left:

100px;

#008080;">12margin-

#000000;">top:

100px;

#008080;">13

#000000;">border:

1px#cccsolid;

#008080;">14

#000000;">cursor:

move;

#008080;">15

#0000ff;">float

#000000;">:

left;

#008080;">16

#000000;">position:

relative;

#008080;">17

#000000;">}

#008080;">18.small-

#000000;">boximg{

#008080;">19

#000000;">width:

300px;

#008080;">20

#000000;">height:

300px;

#008080;">21

#000000;">}

#008080;">22

#000000;">.tool{

#008080;">23

#000000;">width:

150px;

#008080;">24

#000000;">height:

150px;

#008080;">25background-

#000000;">color:

gold;

#008080;">26opacity:

0.6

#000000;">;

#008080;">27filter:

alpha（opacity=60

#000000;">）;

#008080;">28

#000000;">position:

absolute;

#008080;">29

#000000;">left:

0px;

#008080;">30

#000000;">top:

0px;

#008080;">31

#000000;">display:

none;

#008080;">32

#000000;">}

#008080;">33

#000000;">.tool.active{

#008080;">34

#000000;">display:

block;

#008080;">35

#000000;">}

#008080;">36.big-

#000000;">box{

#008080;">37

#000000;">width:

300px;

#008080;">38

#000000;">height:

300px;

#008080;">39

#000000;">border:

1px#cccsolid;

#008080;">40

#000000;">overflow:

hidden;

#008080;">41

#0000ff;">float

#000000;">:

left;

#008080;">42margin-

#000000;">top:

100px;

#008080;">43

#000000;">position:

relative;

#008080;">44

#000000;">display:

none;

#008080;">45

#000000;">}

#008080;">46.big-

#000000;">box.active{

#008080;">47

#000000;">display:

block;

#008080;">48

#000000;">}

#008080;">49.big-

#000000;">boximg{

#008080;">50

#000000;">width:

600px;

#008080;">51

#000000;">height:

600px;

#008080;">52

#000000;">position:

absolute;

#008080;">53

#000000;">}

#008080;">54</style>

#008080;">55</head>

#008080;">56<body>

#008080;">57<divclass="small-box"id="smallBox">

#008080;">58<imgsrc="img1.jpg"/>

#008080;">59<divclass="tool"id="tool"></div>

#008080;">60</div>

#008080;">61<divclass="big-box"id="bigBox">

#008080;">62<imgsrc="img1.jpg"id="bigImg"/>

#008080;">63</div>

#008080;">64<script>

#008080;">65

#008000;">/*

#008080;">66

#008000;">第一步：

当页面加载完后，获取所要操作的节点对象。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 原生 javascript 实现图片放大镜效果

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：原生javascript实现图片放大镜效果.docx
链接地址：https://www.bdocx.com/doc/10515114.html

相关资源更多

相关搜索

原生 javascript 实现图片 放大镜 效果

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起

展开