Google Map panto試做

[javascript]
function Move2NextMarker1(){
var marker=markers1[tempMarker1];
map.panTo(markers1[tempMarker1].getPosition());
scontent = ‘<div id="iw-container">’ +
‘<div class="iw-title">’+markers[tempMarker1].title+'</div>’ +
‘<div class="iw-content">’ +markers[tempMarker1].description+
‘</div>’ +
‘<div class="iw-bottom-gradient"></div>’ +
‘</div>’;
infoWindow.setContent(scontent);
infoWindow.open(map,markers1[tempMarker1]);
setTimeout(Move2NextMarker1,5600);
tempMarker1=(tempMarker1+1)%(markers.length);

}
[/javascript]

找出符合你需求的JS框架-JavascriptOO

你知道目前JavaScript的框架有多少嗎?大約是四百多個!
最近有個有趣的網站JavascriptOO,將這些網站整理起來~您可以依據想要的功能性做勾選及排序,去找出您想要的框架。

 

JavascriptOO網站 http://www.javascriptoo.com/

 

2013年流行CSS framework

  • Skeleton

網址: http://www.getskeleton.com/

Skeleton- Beautiful Boilerplate for Responsive, Mobile-Friendly Development

  • Pure

網址: http://purecss.io/

  • Foundation

網址: http://foundation.zurb.com/

Foundation - The Most Advanced Responsive Front-end Framework from ZURB

  • 960 Grid System

網址: http://960.gs/

  • Less Framework

網址: http://lessframework.com/

  • Blueprint

網址: http://www.blueprintcss.org/

  • Bootstrap

網址: http://getbootstrap.com/

功能完整的純文字編輯器Notepad++

Notepad++是壽山最常拿來編輯PHP、HTML、CSS、JavaScript的文字編輯器。

這套軟體也算是台灣之光,是由台灣人侯今吾基於Scintilla編輯元件所撰寫出來的!在功能上可以取代系統內附較陽春的記事本(Notepad),也可以解決無法打開超過64K檔案以及支援Unicode,在中文搜尋、取代也做的很好!也提供程式語言上色以及高亮功能。真的是原始碼編輯的好幫手!

延伸閱讀:

Notepad++ 官網

Scintilla

 

中國大陸淘寶首頁彩蛋

螢幕快照 2013-09-30 下午7.45.04

 

因為是攻城獅的關係,看到網站第一個動作就是 右鍵 →顯示網頁原始碼 。不過在淘寶的中國大陸站中,看到很特別的程式碼,將其中一段的JavaScript排版成正妹的圖片。

 

除此之外,在中國大陸站首頁右側尋找入口輸入”土豪女”,會出現彩蛋,大家不妨來試看看。

螢幕快照 2013-09-30 下午7.51.25

 

螢幕快照 2013-09-30 下午7.51.37

 

螢幕快照 2013-09-30 下午7.52.22

11個Responsive Design CSS 框架

Skeleton

http://www.getskeleton.com/

Responsive Grid System

http://www.responsivegridsystem.com/

Foundation

http://foundation.zurb.com

Bootstrap

http://getbootstrap.com

Golden Grid System

http://goldengridsystem.com/

Gumby

http://gumbyframework.com/

Wirefy

http://getwirefy.com/

FRAMELESS

http://framelessgrid.com/

1140px CSS Grid Retired

http://andytaylor.me/2013/04/09/1140px-css-grid-retired/

Less Framework

http://lessframework.com/

320 and Up

http://stuffandnonsense.co.uk/projects/320andup/

讓您一目瞭解網頁切版的firefox插件tilt3D

許多時候看到不錯的網頁,都會想看看它的DIV如何設定,意外的發現一個蠻炫的firefox插件tilt。

安裝完成後,點選網頁開發者→Tilt時,網頁就會透過WebGL的技術呈現3D的頁面。

它的原理則是透過DIV的切版來做顯示,對於研究DIV會有”些許”幫助(不過酷炫還是佔大部份原因)

tilt2 tilt tilt1