天天看點

Jquery 開發 案列 時間軸 --一封寫給xxx工程師的信

   xxx工程師:

             你好!作為導師的我,我為能有你這個不錯的朋友感到十分的高興,因為畢竟你剛走出大學的校園, 更令人的遺憾的是,你大學荒廢了四年了。

       在我們共同學習的幾個月中,我從你身上發現了确實有一個成為技術大拿的潛質——自學能力。果不其然,你這一個月已經成功 進入了.net工程師的角色,并且,得到老闆的

       賞識。但是,你說要我幫助搞定一個jquery的插件的問題時,我又十分的焦慮,焦慮不是你的技術,因為以你 的自學能力,任何技術能力都能夠搞定。但是,你應該有一個更

       重要的能力--勤奮刻苦的能力,這是任何成功者必備的最重要的素質。 我這裡寫了這個時間軸的控件思路,告訴你授之以魚不如授之以漁。

             首先,我明确的告訴你,你太懶了。網上的 有好多jquery ui 控件 ,我開始這麼想的。 可惜,是不如願,因為你的需求太詭異了。

       幹脆沒轍了,我幫你寫個好的demo了,并附上我想這個demo的思路。還好美工的妹妹是仁慈的,我不需要做那頭痛的圖檔問題上,煞費苦心。

       首先簡單幾個層+1個img标簽, 這個基本的html+css,你應該沒有問題吧,他的效果如圖所示:

Jquery 開發 案列 時間軸 --一封寫給xxx工程師的信

       這是我們寫插件成功的第一步。下面,我們能完成時間軸的第二部的——能拖動時間抽,做img外嵌套 一個層,在監聽mousemove這個事件,在使div 的top和left

   變化,注意這div是position:absolute 的。這樣子能移動時間軸了。

        最後,我們要移到年代的時間塊上,顯示具體的解釋。 他的樣子是這樣的,如圖所示: 

Jquery 開發 案列 時間軸 --一封寫給xxx工程師的信

          這是怎麼做的啊,無非是監聽mouseover和mouseout事件了,移上去,顯示相應的層的解釋。xx兄:請注意了,這個層是動态産生了,添加到母層中。注意,這個動态

的層mouseout的時候,要移去啊。    

            一首七字口訣來做結吧!

             jquery控件并不難,

             先明需求再來辦。

             htmlcss不可少。

             運用方法就好看

           這時候,就ok了。xxx兄弟,你看看,當初,你的jquery沒有掌握牢吧!希望你,好好學下,這樣。你的以後jquery應該就沒問題了。

          好!時間不早了,就聊在這裡吧!

                                                                                                                                                                                                     祝您:

                                                                                                                                                                                                            技術進步

                                                                                                                                                                                                             工作順利

                                                                                                                                                                                                            laozhu1124

繼續閱讀