在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ js如何以鼠標(biāo)為中心對圖片進(jìn)行縮放。

js如何以鼠標(biāo)為中心對圖片進(jìn)行縮放。

我目前用了transform的translate使圖片可以平移，并用scale對圖片進(jìn)行縮放。
然后想實(shí)現(xiàn)一下縮放的中心點(diǎn)根據(jù)鼠標(biāo)位置而定這一功能，但是發(fā)現(xiàn)如果已經(jīng)進(jìn)行了縮放，修改transform-origin后會(huì)導(dǎo)致圖片瞬移。
在縮放之前將目標(biāo)瞬移到中央再放大感覺交互上不上很好，求實(shí)現(xiàn)過類似功能的大神指點(diǎn)一下思路~

回答
編輯回答
墨小羽

1、用left、top來代替translate平移唄。
2、translate子元素，scale父元素。
目前能想到兩個(gè)

2017年2月2日 01:04
編輯回答
命于你

iviewer.js

2018年8月21日 20:30
編輯回答
涼汐

transform-origin 不要?jiǎng)?，根?jù)鼠標(biāo)位置以及當(dāng)前 scale 和 translate 計(jì)算新的 scale 和 translate 就行。

2018年2月27日 12:57
編輯回答
我甘愿

translateX增加的距離 = (0.5 - 鼠標(biāo)所在位置于x軸上的比例) * (縮放后的寬度 - 縮放前的寬度);
translateY增加的距離 = (0.5 - 鼠標(biāo)所在位置于y軸上的比例) * (縮放后的高度 - 縮放前的高度);

2018年6月24日 22:42
編輯回答
浪婳

就是類似淘寶商品圖片放大的那種吧，搜索下有不少別人的代碼可以參考下。
我沒有寫過這功能，不過要做的話，一般都有成熟的插件實(shí)現(xiàn)。
鏈接描述

2017年2月12日 18:49
編輯回答
別傷我

直接把鼠標(biāo)中心設(shè)置成transform-origin

2017年8月16日 11:32
編輯回答
朽鹿

瞬移應(yīng)該是由于變形原點(diǎn)是基于未縮放之前的圖片來算的，并不會(huì)跟隨縮放后的圖片而動(dòng)，所以會(huì)瞬移到相對于原圖變形原點(diǎn)的位置縮放

2018年5月23日 08:56