Time of Update: 2015-10-19
純JavaScript代碼實現行動裝置繪圖解鎖,javascript解鎖移動手機裝置上有一個螢幕解鎖的應用相信大家都不陌生,在行動裝置上,使用者可以通過設定鎖定圖案作為密碼對裝置使用者介面進行鎖定,鎖定介面如所示。如下所示JavaScript Code<script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控制項顏色 roundRadii:50
Time of Update: 2015-10-19
jQuery實現商品活動倒計時,jquery商品倒計時倒計時一般是用來表示未來某一時刻距現在時刻還剩多少時間。倒計時在WEB上應用非常廣泛,如考試系統倒計時,團購網站中的優惠活動倒計時等等。今天,我們來使用jQuery實現一個簡單的倒計時功能。本文以團購網站的倒計時為背景,我們知道,網站會給每個優惠活動(商品)定一個結束時間,也就是到期時間,但系統時間到達了結束時間,就意味著活動結束。因此,我們在HTML中就要定義活動的結束時間。HTML<ul class="prolist">
Time of Update: 2015-10-19
angularJS與bootstrap結合實現動態載入彈出提示內容,angularjsbootstrapangularjs是由Google團隊開發的一款非常優秀web前端架構。在當前如此多的web架構下,angularjs能脫穎而出,從架構設計上就高人一等,雙向資料繫結,依賴注入,指令,MVC,模板。Angular.js創新地把後台技術融入前端開發,掃去jQuery一度的光芒。用angularjs就像寫後台代碼,更規範,更結構化,更可控。1.bootstrp的彈出提示 bootstrap已經幫
Time of Update: 2015-10-19
javascript實現3D切換焦點圖,javascript3d做了一個用滑鼠拖拽配合 CSS3 的小嘗試,如下:熟悉拖拽效果的朋友應該不會陌生滑鼠按住以後,左右拖動的實現方式。這個小demo裡嘗試的是把CSS3中的相關知識點運用到圖片展示中,當拖動圖片時,顯示出立體的感覺~~直接代碼如下:#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}#list li{height:
Time of Update: 2015-10-19
js實現新浪微博首頁效果,js新浪博首頁我們先來看下CSS* { padding: 0; margin: 0; }li { list-style: none; }body { background: #eee; }#t_sina { width: 390px; padding: 10px; background: #fff; margin: 50px auto 0; font-size: 12px; border: 1px solid #ccc; }#t_sina h2 { padding: 1
Time of Update: 2015-10-19
jQuery實現帶漸顯效果的人物多級關係圖代碼,jquery漸顯本文執行個體講述了jQuery實現帶漸顯效果的人物多級關係圖。分享給大家供大家參考。具體如下:這裡示範jQuery實現帶漸顯效果的人物多級關係圖,setQuestPose:function中的n代表共幾個對象 r代表周長 i代表第幾個對象 w代表外面對象的寬頻 h代表外面對象的高度
Time of Update: 2015-10-19
js產生隨機數的方法執行個體,js隨機數執行個體js產生隨機數主要用到了內建的Math對象的random()方法。用法如:Math.random()。它返回的是一個 0 ~ 1 之間的隨機數。有了這麼一個方法,那產生任意隨機數就好理解了。比如實際中我們可能會有如下的需要:(1)產生一個 0 - 100 之間的隨機整數,那麼則可以:parseInt(100*Math.random());
Time of Update: 2015-10-19
JS實現可自訂大小,可雙擊關閉的彈出層效果,js自訂本文執行個體講述了JS實現可自訂大小,可雙擊關閉的彈出層效果。分享給大家供大家參考。具體如下:這是一款JS彈出層,可自訂大小,雙擊關閉層,可以彈出500,300、500,500大小的視窗,視窗彈出後,在快顯視窗內雙擊即可關閉滑鼠。我覺得挺不錯的效果,可以學習到不少的JS知識。運行效果如下:線上示範地址如下:http://demo.jb51.net/js/2015/js-define-close-able-alert-dlg-demo/具體代碼如
Time of Update: 2015-10-19
javascript判斷複選框是否選中的方法,javascript複選框之前總結了一下關於jquery如何判斷複選框是否選中的問題,今天總結如何判斷js複選框是否選中javascript判斷複選框是否選中,下面通過例子來說明(現在有如下的一組複選框):<input type="checkbox" name="fruit" value="apple" />蘋果 <input type="checkbox" name="fruit" value="orange" />橘子 &
Time of Update: 2015-10-19
基於jQuery實現的菜單轉場效果,jquery實現切換這是一個非常流暢的菜單展示效果,應用在亞馬遜上,當你上下移動滑鼠的時候,二級菜單會非常輕快的切換,沒有任何延時,給使用者如滑絲般的感覺。這種效果藉助於一款jQuery外掛程式menu-aim,本文將結合執行個體講解如何?速度超快的菜單效果。HTML首先建立主菜單,我們借用電商網站常見的商品分類。其html結構代碼如下,其中我們用到了html5的data-submenu-id屬性設定,這在外掛程式調用時非常有用。<div class="
Time of Update: 2015-10-19
JavaScript各類型的關係圖解,javascript各類型內建(Build-in)對象與原生(Naitve)對象的區別在於:前者總是在引擎初始化階段就被建立好的對象,是後者的一個子集;而後者包括了一些在運行過程中動態建立的對象。此外,補充一中用到的概念:1、內建(Build-in)對象與原生(Naitve)對象的區別在於:前者總是在引擎初始化階段就被建立好的對象,是後者的一個子集;而後者包括了一些在運行過程中動態建立的對象。2、引擎擴充項物件是一個並不太大的集合,一般來說比較確定,它們也屬
Time of Update: 2015-10-19
基於jquery實現複選框全選,反選,全不選等功能,jquery全選jquery 實現全選,反選,全不選等功能,下面直接以例子進行說明。設頁面有如下一組複選框和幾個相關按鈕(全選,反選,全不選等):<input type="checkbox" name="fruit" value="apple" />蘋果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox"
Time of Update: 2015-10-19
利用jQuery和CSS將背景圖片展開,jquerycss背景圖片現在WEB頁面設計比較流行使用大背景圖,那麼您知道如何使用一張大背景圖進行展開效果呢?也就是說使用一張固定尺寸的背景圖片,讓它在頁面中隨著瀏覽器尺寸進行展開,就像我們的電腦案頭壁紙效果。本文將帶您一起使用jQuery和CSS實現背景圖片展開效果。將背景圖片展開,而不是平鋪,注意平鋪效果我們可以使用CSS的background-repeat來實行背景圖片的平鋪效果,本文討論的是背景圖片的展開效果。這種效果在一些前衛的頁面設計中已經廣
Time of Update: 2015-10-19
JavaScript實現點擊按鈕切換網頁背景色的方法,javascript網頁背景本文執行個體講述了JavaScript實現點擊按鈕切換網頁背景色的方法。分享給大家供大家參考,具體如下:這裡示範JavaScript用按鈕隨意變換背景顏色,每點擊一下按鈕,就可以隨機改變一種網頁背景顏色。顏色值事先是儲存在JS的數組裡,你在代碼裡會發現他們,若不想要某個顏色,就替換掉即可。運行效果如下:線上示範地址如下:http://demo.jb51.net/js/2015/js-btn-click-rand-b
Time of Update: 2015-10-18
sunny day,sunny初始學習記錄 基於http://www.htmleaf.com/html5/html5muban/20141121552.html模板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>標題</title> <style>button{ background: #686
Time of Update: 2015-10-19
學習javascript的閉包,原型,和匿名函數之旅,javascript之旅本文通過樣本給大家介紹javascript的閉包,原型,和匿名函數,具體詳情請看下文。一 .>關於閉包理解閉包 需要的知識1.變數的範圍例1:var n =99; //建立函數外的全域變數function readA(){ alert(n); //讀取全域變數}readA(); //執行此函數例2:function readB(){ var c = 9; function readC(){
Time of Update: 2015-10-19
JavaScript實現的背景自動變色代碼,javascript變色代碼本文執行個體講述了JavaScript實現的背景自動變色代碼。分享給大家供大家參考,具體如下:這裡示範JavaScript實現網頁背景自動變色,自己變換顏色,設定時間和顏色值即可,在你設定的顏色值、一定時間內自動切換網頁背景顏色。運行效果如下:線上示範地址如下:http://demo.jb51.net/js/2015/js-auto-cha-bg-color-demo/具體代碼如下:<!DOCTYPE HTML
Time of Update: 2015-10-19
Javascript中的資料類型之旅,javascript資料類型雖然Javascript是弱類型語言,但是,它也有自己的幾種資料類型,分別是:Number、String、Boolean、Object、Udefined、Null。其中,Object屬於複雜資料類型,Object
Time of Update: 2015-10-18
JS利用cookie記憶當前位置的防重新整理導航效果,jscookie本文執行個體講述了JS利用cookie記憶當前位置的防重新整理導航效果。分享給大家供大家參考。具體如下:這裡示範利用cookie記憶當前位置的防重新整理導航條,主要向大家展示如何在Js中使用Cookies技術,用好了Cookies,會使你的Js技術更上一層樓。這個菜單就感覺不錯,當你滑鼠點擊之後,重新重新整理頁面後它仍然是保留在原位置,好像帶有記憶功能。運行效果如下:線上示範地址如下:http://demo.jb51.net/
Time of Update: 2015-10-18
簡單談談node.js 版本控制 nvm和 n,node.jsnvm今天的話題包括2個部分1. node.js 下使用 nvm 或者 n 來進資料列版本設定2. nvm 安裝node.js 版本後,重啟終端 node , npm 環境變數失效第一部分 用什麼來管理 node.js 版本首先應該歡呼慶祝一下 node.js 終於發布了有曆史意義的正式版 1.0 ,雖然我們看到的是V4.0,其實他就是node.js 真正意義的 1.0, io.js