淘宝网淘宝鼠标经过图片放大和无线充电鼠标充电时能否使用_

本篇文章给大家谈谈淘宝鼠标经过图片放大,以及无线充电鼠标充电时能否使用?的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

文章详情介绍:

Axure教程:电商平台图片放大预览的效果

我们在逛淘宝或者小红书等电商平台的时候,当我们鼠标停留在商品大图时会出现一个预览区域,并且右侧会出现预览区域的放大图片,方便我们看清商品的细节。这个就是电商平台图片放大预览的效果。今天我们就一起来学习一下吧~

01 前期准备

软件:Axure 9.0

硬件:Windows/Mac电脑

思考:实现图片放大预览效果前的思考(可参考下图)

02 教程

(1)准备素材,本文以淘宝网为例,准备3张展示图片,左侧边距设置50,并设置图片尺寸为500*500,左下角小图片为3张图片的缩小版尺寸150*150,具体布置页面如下图

(2)将左侧3张大图转化为动态面板命名为“左面板1”,并设置3个状态,每张状态里放一张图片,图片顺序要与左下角小图顺序一致。具体如下图

(3)制作一个预览区,拉一个矩形元件命名为“预览区”,设置尺寸200*200,并填充一个颜色,调整透明度50% 放在左侧大图上。

连同左面板1动态面板,一起转化成动态面板,命名“左面板2”,进入状态后将矩形框预览区设置为隐藏

(4)制作预览区的放大区里的图片内容,再拉一个动态面板命名为“右面板1”,设置3种状态,每种状态中放三张图中的其中一张,顺序与之前左下角小图顺序一致。对面板右键设置“自适应内容”。

重点:对每个状态里的照片进行尺寸设置,因放大区展示的是预览区的放大图片,即左侧预览框的尺寸/左侧图片的尺寸=右侧面板的尺寸/右侧图片的尺寸,得出右侧图片尺寸:1250*1250;

(5)制作放大区展示区域,拉一个矩形元件命名“右面板2”,设置尺寸500*500,并转化为动态面板,将之前“右面板1”动态面板放在“右面板2”动态面板中,并将位置放在左面板对应的右侧位置。并默认设置为隐藏。

(6)另外,我们需要一个动态面板,拉取一个动态面板命名为“循环状态”,设置至少2个以上的状态。保证我们的动作能跑起来。位置随意安放。我放在了左面板边距上。

(7)所有素材准备完毕,准备进入交互制作环节,想象一下我上面思维导图提到的效果,先来实现第1个效果,即点击左侧3张小图,“左面板2”展示对应“左面板1”大图内容,同时放大区展示“右面板2”的对应内容。

(8)接下来实现第2个鼠标移动后的交互效果。

即鼠标进入大图时展示预览区和放大区,鼠标移除时隐藏预览区和放大区,点击“左面板2”设置鼠标移入时和移出时的交互。之前我们已经设置了2者为隐藏状态,全部完成后预览调试效果。

(9)接下来进入到最重要的第3个效果,即进入左面板时展示预览区,并在放大区展示预览区内图片的放大效果。我们先让之前创建的动态面板”循环状态“跑起来,如下图

(10)接着对动态面板“循环状态”设置,状态改变时交互,这时候需要分2步看,我们先来实现状态改变时左面板预览区可以移动的效果,添加一个交互,选择“状态改变时”

(11)接下来在状态改变时添加交互,选择移动交互,为的是要保证预览区在大图内移动,所以需要设置边界。边界即左面板区域尺寸范围500*500

这里我们需要用到鼠标函数cursor.x,为了保证移动对应到预览区中心位置,

移动预览边框,X值:[[cursor.x-左面板1的X坐标-预览边框X尺寸的一半]],Y值同理设置一样;

我这里设置的是[[Cursor.x-150]](因为我的边距50+预览区整体200*200的一半100=150)

(12)最后设置移动预览区后放大区展示预览区同等位置放大图片。我们同样需要设置移动时右面板的边界。主要是移动的x值和y值如何计算

同理我们可以得出,移动右面板2,X值:[[-(cursor.x-150)*2.5]],Y值同理

有同学可能会疑问,为什么有一个负号,主要是为了保证位置的相对性,即预览区往左上方移动时,放大区其实相当于往右下角方向移动,这样就能保证位置一样。

思考题:为什么还要乘以2.5,知道答案的同学可以私信我或者在下方评论。

(13)以上步骤就全部实现了放大预览区图片的效果,我们需要不断预览调试,确定效果

结语

本篇文章步骤比较多,动态面板里套着动态面板,移动时最重要的在于数值的计算方式上,比如:

移动预览边框,X值:[[cursor.x-左面板1的X坐标-预览边框X尺寸的一半]],Y值同理;

移动右面板2,X值:[[-(cursor.x-150)*2.5]],Y值同理。

这些看似合理的数值下面都需要我们平时多思考,在练手的同时学习为什么设置成这样。慢慢你就会发现自己越来越优秀了。

本文由 @蓝汐 原创发布于人人都是产品经理。未经许可,禁止转载!

题图来自Unsplash,基于CC0协议

真正放飞无线鼠标 无线充电你了解吗?

咱们以前说到各种无线技术,总是会提到“甩掉了束缚”一类的形容词,不过数据可以无线传输,能量就差点意思了,没电了还是得接电源,别的不说,使用时需要动来动去的鼠标,无线化之后是真的爽,被迫连线或者看到电池电量报警后是真的丧。有没有办法完全自由呢?其实也是有的,来了解下鼠标的无线充电技术吧。

说到无线充电技术,关注手机的小伙伴大概早就不陌生了,无线充电板配合手机挺好用。这种技术已经在普及的边缘,鼠标不会看不到,当然也有了,不用的时候放到旁边充电板上,需要用的时候拿过来就用,甚至还能和手机共用一块充电板(或充电区域),确实不错。

但是……很多小伙伴大概觉得这有点怪怪的吧,终究还是需要个需要静止充电的区域,摆脱了“缰绳”但需要每天“回栏”睡觉的鼠标感觉还是不爽。所以,能在鼠标垫上一边用一边充电的技术就诞生了、比如RAZER HyperFlux,它让鼠标搭配超级电容,搭配鼠标垫的电磁感应来实现持续的电力供给。

不知道大家注意到了“电容”和“电磁感应”这两个词没有,很多小伙伴可能略一思索就会发现关键问题:想要电磁感应发电得动起来,而电容不是电池,只能维持短时间的供电。没错,这个搭配需要鼠标动起来才能有电力供应,而且真的就是动起来才“有电”,电容只能支持大家偶尔抬起鼠标一会儿的供电,所以你想换用其他鼠标垫?没门!

只能静止充电不爽,但只能动起来才有电似乎又有点过头了,所以动静都能充电,而且内置电池,让鼠标可以脱离充电垫使用的技术就出现了。比如罗技POWERPLAY,它采用磁共振方式充电,除了上述优点之外,充电高度更高,可以在充电鼠标垫上加更厚的垫子,玩家能根据自己的手感来选择。

另外磁共振的得电装置很小,所以罗技索性设计了可更换的底盘。只要在配重仓留了接口的鼠标,大家就可以先购买价格相对较低的“标准版”,以后把配重仓盖换成POWERPLAY底盘,配合充电鼠标垫,就升级成无线充电版了。

另外有些鼠标还在采用一种有点古老的所谓无线充电技术,其实就是触点充电,设计概念和方便程度都介于插拔线缆和Qi充电之间吧,价格也不低,现在选择其实没啥意义。

做得好的“混合怪”其实也有,就是无线充电模块。POWERPLAY模式对鼠标的适配性要求高,如果直接把无线充电模块插到有线接口上呢?考虑到有线充电时的使用,这些接口通常位于不妨碍使用的地方,插上之后除了有点丑,对使用真的没影响,目前这种模块主要用来增加Qi充电功能,希望今后能有适合罗技Razer等无线充电垫的产品。

招商淘客作图神器,急速闪电作图

 

“胖想不胖,我是胖想~~~”,点击右上角“关注”,胖想每天都有精彩内容推荐给你!

大家好,欢迎来到胖想资源社。今天胖想给大家推荐一款招商淘客作图神器【闪作图】,大小鱼的原创作品该软件能够快速的制作出淘宝店铺的高级商品图,效果和十年PS美工大师的作品不相上下。

软件开启,会有软件的更新日志,右上角关闭即可。

右上角:可以粘贴商品链接,会自动识别商品id,取出该商品的5个主图,拖拽到画板即可~~

点击圆形标签,或者条形标签,可以将标签添加到作图区中,在作图区选中标签可以移动它~

在作图区选中标签,滚动鼠标滚轴,可以自由放大缩小标签~

以自由选择标签的颜色风格~小提示:鼠标悬浮在选择框上面,滚动鼠标滚轴,可以快速选择~所有选择框都可以这样的哦~

想用哪个标签,就对着哪个标签,调相应的参数就好了

软件内置了两个漂亮的字体,不再采用系统内部字体,因为系统字体大部分不好看,

要安装自己的字体,请点击:安装字体

PS:win7系统不支持.otf字体。win10的话就没问题。

单击右边的:查看商品详情图,可以查看到该商品的所有详情图片,当5个主图不好看时,可以用详情图里的图片。

支持任何截图软件,截图后,粘贴到作图区。也可以从任何地方拖拽到作图区

可以调整外边框的大小和颜色,可以调整合成的图片质量,和图片宽高,尽量还是把:锁定宽高比 勾上,要不然合成的图片可能会变形

双击作图区的图片,可以进入编辑~鼠标左键按下,可以拖动它,鼠标滚轴可以缩小放大它~厉不厉害点击黑色幕布,或者回车键,可以确认编辑~

点击作图区的标签后,键盘的上下左右键,可以移动标签,方便微调距离~

最后,展示下最终的合成效果~完全的所见即所得~

温馨提示:作图的时候,会有锯齿感,但合成后是没有的哦~

获取方式

1、点击右上角关注(方便找到胖想)。

2、点赞并转发此文章让更多小伙伴看到(求赞啊)。

3、私信回复关键字【闪作图】即可获取。