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


    xxx工程師:

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

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

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

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

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

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

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

      

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

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

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

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

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

            一首七字口訣來做結吧!

             Jquery控件並不難,

             先明需求再來辦。

             HtmlCSS不可少。

             運用方法就好看

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

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

                                                                                                                                                                                                     祝您:

                                                                                                                                                                                                            技術進步

                                                                                                                                                                                                             工作順利

                                                                                                                                                                                                            laozhu1124

                                                                                                                                                                                                                              2012.10.13


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM