dw制做电脑鼠标历经时图象变大电脑鼠标离去图象

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

网页页面制做照片殊效有许多种,在其中电脑鼠标历经照片,能够有照片增大或切换照片的实际效果,在1些网购服务平台上大家便可能会看到将电脑鼠标置放在1个产品上时,产品的照片将会会增大或变为产品别的角度的照片了,这实际上便是两个较为简易的电脑鼠标历经照片的殊效,在DreamWeaver中便可以很便捷的完成,下面网编就为大伙儿详细介绍dw制做电脑鼠标历经时图象变大电脑鼠标离去图象回原型实际效果方式,看来看吧!

素材:

实际操作流程:

1、开启DW手机软件,新建“HTML”,随后开启“合理布局”特性,大家加上1个apdiv,用来放置大家的照片;

2、在apdiv中插进“1行3列”报表;

3、随后在3目录格中分刘海别插进图象,每张图象尺寸设定“宽300px,高300px”;图象名字从左到右先后设定为“a、b、c”;

4、我以正中间的图象为例,选定正中间图象(名字b) ,开启“个人行为”——“更改特性”;

5、弹出1个对话框,大伙儿依照上面开展设定:

注:宽度尺寸要设定比原先要大,这样才可以显示信息图象变大实际效果;

6、将开启个人行为改动为onmouseover,也便是电脑鼠标放到照片上面的情况下,就会将照片的宽度改成600;

7、再度开启“个人行为——更改特性”,设定和上1流程同样,但这主次更改高宽比尺寸,一样高宽比标值要改成比以前的大;

8、将开启个人行为改动为onmouseover,也便是电脑鼠标放到照片上面的情况下,就会将照片的高宽比改成600;

9、也有两个个人行为要加上,依照上面的方式,目地是当电脑鼠标离去照片的情况下,让照片修复到原先的尺寸,如图所示:

注:将开启个人行为改动为onmouseout,也便是电脑鼠标放到照片上面的情况下,就会将照片的高宽比修复为300;

10、储存,预览;

电脑鼠标历经,照片增大;

电脑鼠标离去,照片修复一切正常;

实例教程完毕,以上便是dw制做电脑鼠标历经时图象变大电脑鼠标离去图象回原型实际效果方式详细介绍,实际操作很简易的,大伙儿依照上面流程开展实际操作,期待能对大伙儿有一定的协助!

注:本篇文章内容系脚本制作之家按照真正亲身经历原創,转载请注明出处!