网站 › 『编程语言讨论求助区』 › 请前端帮忙看看 为什么使用这个js 无效 指导怎么使用

plaodj 发表于 2021-5-24 04:15

请前端帮忙看看 为什么使用这个js 无效 指导怎么使用

本帖最后由 plaodj 于 2021-5-24 04:16 编辑

js资源地址：https://github.com/francoischalifour/medium-zoom

下载了https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.js

在网页里引入了这个文件

并且在img 元素里面添加了    id="zoom-default" data-zoomable="true" class="medium-zoom-image"

<img alt="在这里插入图片描述" src="/images/f4a684e96d038290e50851bba1681799.png" id="zoom-default" data-zoomable="true" class="medium-zoom-image" title="点击查看原图" style="width: 800px; height: 479.81px;">

但是还是无法实现图片缩放

chrome 浏览器 console也没看到报错   点击没有任何响应

只想简单的引入使用 （什么 npm yarn还不会... ）

无常方便面 发表于 2021-5-24 09:32

mediumZoom(document.querySelector('#zoom-default'))
底部加这个试试

fankangfan 发表于 2021-5-24 09:44

你要初始化，底部加一个mediumZoom('')就行，你直接复制我的代码到浏览器运行下就知道了
    <script src="https://cdn.bootcdn.net/ajax/libs/medium-zoom/1.0.6/medium-zoom.js"></script>
    <div>
      <img data-zoomable="true" src="https://i0.hdslb.com/bfs/article/cba62b0ae96aa04c51e8f2943d67d57d662e3f0b.jpg@1320w_742h.webp" alt="">
    </div>
    <script>
      mediumZoom('')
    </script>

知心 发表于 2021-5-24 09:48

https://medium-zoom.francoischalifour.com/ 这是官方给的demo，可以去看看源码的实现逻辑

rainbow270118 发表于 2021-5-24 11:16

github 中的README.md 里面有API,你可以参考API来使用

wsz15631666727 发表于 2021-5-24 11:18

引入一个外部的js文件之后需要进行初始化，npm其实就是帮你下载外部文件，和你这种自行引入应该是一样的

l1258136193 发表于 2021-5-24 11:55

script里面添加mediumZoom('#zoom-default')
高清图添加data-zoom-src属性

Demo:
<div>
                        <img id="zoom-default" src="http://www.etherdream.com/WebP/Test.webp" data-zoom-src="http://attach.bbs.miui.com/forum/201312/03/165526ophx4l6c6ll3cnpl.jpg" alt="" />
                </div>
                <script src="https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>
                <script>
                        mediumZoom('#zoom-default')
                </script>

查看完整版本: 请前端帮忙看看 为什么使用这个js 无效 指导怎么使用