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

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

本帖最后由 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

[JavaScript] 纯文本查看 复制代码

mediumZoom(document.querySelector('#zoom-default'))

底部加这个试试

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

你要初始化，底部加一个mediumZoom('[data-zoomable]')就行，你直接复制我的代码到浏览器运行下就知道了

[HTML] 纯文本查看 复制代码

    <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('[data-zoomable]')
    </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:

[HTML] 纯文本查看 复制代码

<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>

帐号		自动登录	找回密码
密码			注册[Register]

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

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