上一篇博客里給大家帶來仿win8動態磁貼的效果(詳情點擊這里),只是提供一個思路,更炫的效果只要你能想到,就能實現。接觸jquery才兩個星期,我已經有一些感悟,具體等我為大家帶來另一種非常簡單卻很酷炫的效果再具體分析。今天給大家帶來的是仿win8的Toast通知。還請各位大神勿噴,因為這個效果並不是我的重點,重點在實現這個效果之后的思考。
其實非常簡單,首先這個效果是這樣的,點擊按鈕,在右上角彈出一個div,停頓一會兒自動消失。當然你可以有很多種實現方法,在這里我使用show+delay+hide方法。
因為代碼很少,直接貼上全碼。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jQuery-2.0.0.min.js"></script> <script type="text/javascript"> $(function () { $("#input").bind("click", function () { $("#toast").show("200").delay("3000").hide("600"); }); }); </script> <style type="text/css"> #toast { position: absolute; right: 0px; top: 40px; width: 400px; height: 100px; background-color:yellowgreen; display: none; text-align:center; line-height:100px; vertical-align:middle; font-family:'Microsoft YaHei UI'; color:white; } </style> <title></title> </head> <body> <input id="input" type="button" value="彈出" /> <div id="toast"> 這是一個Toast通知 </div> </body> </html>
也沒有什么值得說的東西,唯一的技巧是div的絕對布局與div內文字的水平與垂直居中。代碼很少,大家一眼就能看懂,我就不解釋了。
下面是我最近對jquery兩個星期的研究的一些思考。
很多效果一貼出代碼,大家都能看得明白,而且會覺得那么簡單還好意思貼出來,但是有沒有想過,你自己動手實現過這些效果嗎?准確來說,你有思考過使用什么樣的效果可以讓你的網站與眾不同而且得到很好的用戶體驗么?互聯網時代基本上都是我抄你你抄我,還有什么功能實現不了?如果你是一個負責任而且熱愛這個行業的程序員,你應該會很有熱情去設計一些很好的用戶體驗,讓你的網站給人耳目一新的感覺,使用戶喜歡你的網站。就好想本文實現的效果,明明很簡單,卻為什么大家還是要使用最原始的alert(這里我們拋開效率的問題,畢竟不是所有的網站都需要考慮效率的問題,你又不是新浪百度騰訊,中小型網站,如果能給用戶更好的體驗,比考慮這么細微的效率差距來的更實際)?最根本的問題在於你缺乏獨立思考的能力。創作來源於idea,來源於獨立思考,如果這些最基本的素質你都沒有,那么你就是一個碼農而不是程序員。程序員是會獨立思考的,他們會考慮很多問題,除了考慮到如何實現以外還考慮到了怎樣實現效果更好;碼農只會想到實現了就好了,卻不會想到怎樣實現效果更佳。
程序員的生活都很匆忙,但是希望干我們這行的,不要老留給別人一些不好的印象,我們不是只會敲代碼,我們還會獨立思考,我們分析問題的能力甚至比你們還強。不要老覺得技術很重要就每天不停的敲代碼去實現它,程序員每天都應該有一點時間去思考人生,思考問題,或者思考一下,你每天敲的代碼,你用的那些技術你覺得很牛逼了,但是,它是否有更好的實現方式?
我們不要在匆忙的生活中從程序員淪落成為了碼農。