javascript - 是否可以在直接图像而不是带有背景图像的 div 上实现这种缩放和平移效果?

标签 javascript jquery html css

我找到了 this codepen 展示图像的缩放和平移效果。据我所知,代码的工作原理是根据每个 div 的 data-image 属性为其分配一个背景图像。有什么办法可以在直接 img 标签而不是带有背景图像的 div 上执行此操作?

编辑:这就是我所说的那种标记。 一个容器 div,里面有一个实际的 img 标签。

最佳答案

看看 CodePen现在。

我觉得我让它看起来有点像你想要的

<div class="tiles">
    <div data-scale="1.1" class="product-single__photos tile" id="ProductPhoto">       
        <img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/bluza_dama_39377a_large.jpg?v=1487178925" alt="Last Skirt" id="ProductPhotoImg">
    </div>
</div>

关于javascript - 是否可以在直接图像而不是带有背景图像的 div 上实现这种缩放和平移效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42352427/

相关文章:

javascript - 将 serialize() 转换为对象数组以发布到 Controller

javascript - 弹出表单成功消息

javascript - 用于电子邮件验证的正则表达式无法使用子域?

python - 将 HTML 行解析为 CSV

html - 选择随机背景 - HTML/CSS

javascript - 如何在提交按钮上提交其他模态表单单击当前模态

javascript - 如何修复地址正则表达式?

javascript - 如何从某些百分比更改 Bootstrap 进度条颜色

jquery - 在 slider 中使用 css 类更改图像不透明度

javascript - javascript 的 vendor 前缀