康諾科技java培訓小課堂：Web前端——滑鼠觸發使圖片橫向移動

康諾科技java培訓小課堂：Web前端——滑鼠觸發使圖片橫向移動

正常狀態，如下：

滑鼠觸發，如下：

用到的技術：HTML+CSS+ JavaScript;主要以javascript為主。

操作步驟：

首先製作一個html頁面；代碼如下

Document

用CSS控制圖片區域

div{

width: 300px;

height: 80px;

overflow: hidden;

}

利用javascript實現圖片移動；代碼如下

script type="text/javascript">

$( div ).hover(function(){

$(this).children().stop().animate({ margin-left : -120px },1000)

},function(){

$(this).children().stop().animate({ margin-left : 0px },1000)

})

版權所屬：康諾科技

2017/6/23

-----------我是廣告分割線---------------

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！