xxx工程師:
你好!作為導師的我,我為能有你這個不錯的朋友感到十分的高興,因為畢竟你剛走出大學的校園, 更令人的遺憾的是,你大學荒廢了四年了。
在我們共同學習的幾個月中,我從你身上發現了确實有一個成為技術大拿的潛質——自學能力。果不其然,你這一個月已經成功 進入了.net工程師的角色,并且,得到老闆的
賞識。但是,你說要我幫助搞定一個jquery的插件的問題時,我又十分的焦慮,焦慮不是你的技術,因為以你 的自學能力,任何技術能力都能夠搞定。但是,你應該有一個更
重要的能力--勤奮刻苦的能力,這是任何成功者必備的最重要的素質。 我這裡寫了這個時間軸的控件思路,告訴你授之以魚不如授之以漁。
首先,我明确的告訴你,你太懶了。網上的 有好多jquery ui 控件 ,我開始這麼想的。 可惜,是不如願,因為你的需求太詭異了。
幹脆沒轍了,我幫你寫個好的demo了,并附上我想這個demo的思路。還好美工的妹妹是仁慈的,我不需要做那頭痛的圖檔問題上,煞費苦心。
首先簡單幾個層+1個img标簽, 這個基本的html+css,你應該沒有問題吧,他的效果如圖所示:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicGcq5iNyQDMzQzMxMTMwEjMxAjMvw1M1IDM0QzLcJTMwIzLcNXZnFWbp9CXt92YuM3ZvxmYuNmLyADMjlGcvw1LcpDc0RHaiojIsJye.jpg)
這是我們寫插件成功的第一步。下面,我們能完成時間軸的第二部的——能拖動時間抽,做img外嵌套 一個層,在監聽mousemove這個事件,在使div 的top和left
變化,注意這div是position:absolute 的。這樣子能移動時間軸了。
最後,我們要移到年代的時間塊上,顯示具體的解釋。 他的樣子是這樣的,如圖所示:
這是怎麼做的啊,無非是監聽mouseover和mouseout事件了,移上去,顯示相應的層的解釋。xx兄:請注意了,這個層是動态産生了,添加到母層中。注意,這個動态
的層mouseout的時候,要移去啊。
一首七字口訣來做結吧!
jquery控件并不難,
先明需求再來辦。
htmlcss不可少。
運用方法就好看
這時候,就ok了。xxx兄弟,你看看,當初,你的jquery沒有掌握牢吧!希望你,好好學下,這樣。你的以後jquery應該就沒問題了。
好!時間不早了,就聊在這裡吧!
祝您:
技術進步
工作順利
laozhu1124