国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 網站 > 軟件應用 > 正文

dw制作鼠標經過時圖像放大鼠標離開圖像回原形效果

2024-09-04 21:29:17
字體:
來源:轉載
供稿:網友

網頁制作圖片特效有很多種,其中鼠標經過圖片,可以有圖片變大或切換圖片的效果,在一些網購平臺上我們就可能會看到將鼠標放置在一個商品上時,商品的圖片可能會變大或變成商品其他角度的圖片了,這其實就是兩個比較簡單的鼠標經過圖片的特效,在DreamWeaver中就可以很方便的實現,下面小編就為大家介紹dw制作鼠標經過時圖像放大鼠標離開圖像回原形效果方法,來看看吧!

素材:

鼠標,圖像

鼠標,圖像

鼠標,圖像

操作步驟:

1、打開DW軟件,新建“HTML”,然后打開“布局”屬性,我們添加一個apdiv,用來置放我們的圖片;

鼠標,圖像

2、在apdiv中插入“1行3列”表格;

鼠標,圖像

3、然后在3列表格中分別插入圖像,每張圖像大小設置“寬300px,高300px”;圖像名稱從左到右依次設置為“a、b、c”;

鼠標,圖像

4、我以中間的圖像為例,選中中間圖像(名稱b) ,打開“行為”——“改變屬性”;

鼠標,圖像

5、彈出一個窗口,大家按照上面進行設置:

注:寬度大小要設置比原來要大,這樣才能顯示圖像放大效果;

鼠標,圖像

6、將觸發行為修改為onmouseover,也就是鼠標放到圖片上面的時候,就會將圖片的寬度改為600;

鼠標,圖像

7、再次打開“行為——改變屬性”,設置和上一步驟相同,但這次要改變高度大小,同樣高度數值要改為比之前的大;

鼠標,圖像

8、將觸發行為修改為onmouseover,也就是鼠標放到圖片上面的時候,就會將圖片的高度改為600;

鼠標,圖像

9、還有兩個行為要添加,按照上面的方法,目的是當鼠標離開圖片的時候,讓圖片恢復到原來的大小,如圖所示:

注:將觸發行為修改為onmouseout,也就是鼠標放到圖片上面的時候,就會將圖片的高度恢復為300;

鼠標,圖像

鼠標,圖像

鼠標,圖像

鼠標,圖像

10、保存,預覽;

鼠標經過,圖片變大;

鼠標,圖像

鼠標離開,圖片恢復正常;

鼠標,圖像

教程結束,以上就是dw制作鼠標經過時圖像放大鼠標離開圖像回原形效果方法介紹,操作很簡單的,大家按照上面步驟進行操作,希望能對大家有所幫助!

注:本篇文章系VeVb武林網依照真實經歷原創,轉載請注明出處!


注:相關教程知識閱讀請移步到Dreamweaver教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 南皮县| 资阳市| 黔南| 泾源县| 南乐县| 文成县| 晋宁县| 历史| 高陵县| 永和县| 永修县| 临西县| 深州市| 信阳市| 临武县| 桂阳县| 吉木萨尔县| 平舆县| 乌兰浩特市| 阿拉善右旗| 稻城县| 五常市| 乳山市| 五华县| 报价| 德令哈市| 阿拉善盟| 凤冈县| 黄冈市| 资中县| 越西县| 东莞市| 通州市| 大港区| 龙里县| 天津市| 汝城县| 霞浦县| 明光市| 霍邱县| 鄂尔多斯市|