图片的点击缩放（zoom插件实现）

最新推荐文章于 2024-10-08 20:27:05 发布

置顶 604673868

最新推荐文章于 2024-10-08 20:27:05 发布

阅读量2.7k

点赞数

分类专栏：成长文章标签： html css 插件 zoom

本文链接：https://blog.csdn.net/qq_37659176/article/details/79456007

版权

成长专栏收录该内容

8 篇文章 0 订阅

订阅专栏

图片的点击缩放（zoom插件实现）

zoom插件：
页面引入js文件和css文件

 <link href="css/zoom.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="js/zooming.js"></script>

页面结构：

html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZOOM插件实现图片的点击放大</title>
    <link href="css/zoom.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/zooming.js"></script>
    <style type="text/css">
        #container {
            margin: 0 auto;
        }
        .content {
            max-width: 660px;
            margin: 0 auto;
        }
        .content img {
            max-width: 100%;
        }
        @media (max-width: 800px) {
            .content {
                max-width: 100%;
                margin: 20px;
            }
        }
    </style>
</head>
<body>
<div id="container">
    <section class="content">
        <img src="images/obeas.jpg" alt="暂无图片" title="点击放大" data-action="zoom" style="width: 50vw;height: 50vh">
        <img src="images/trim.jpg" alt="暂无图片" title="点击放大" data-action="zoom" style="width: 50vw;height: 50vh">
    </section>
</div>
</body>

css文件

body, html { font-size: 100%;   padding: 0; margin: 0;}
body{
    background: #494A5F;
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;

data-action=”zoom”标识在图片中使用这个插件
style=”width: 50vw;height: 50vh”
其中img标签中的style属性的vw和vh表示当前图片相对于当前窗口大小得百分比的宽和高
zoom.js插件的可用配置参数有：

参数	默认值	描述
url	false	显示大图的url地址。如果没有提供，默认使用第一个img子元素的url地址。
on	‘mouseover’	触发图片放大的事件。可用类型有：mouseover, grab, click, toggle。
duration	120	淡入淡出效果的持续时间。
。。。	。。。	。。。。