[awei研究室]雪花飄jquery效果 聖誕冬天

/ 分類: , , / 0 則回應

標籤: ,

聖誕、元旦、新年了為網站增加js網頁雪花飄落特殊效果jquery插件，特別適合聖誕、元旦、新年網站氣氛烘托。
建議把jq.snow.js 控制網頁雪花飄落特效文件在網站的</body> 標籤的前面引用，這樣做的好處是這個特效的將在最後加載不影響貴網站速度
雪花別太多…相當耗費系統資源喔~~

範例網頁

雪花效果jquery插件插件說明：

minSize: 5,		//飘落雪花的最小尺寸
maxSize: 50, 	        //飘落雪花的最大尺寸
newOn: 500		//飘落雪花出现的频率 这个数值越小雪花越多

檔案下載

如果要在你的WORDPRESS中呈現雪花紛飛的效果~~安裝這個小外掛即可
還可以設定楓葉飄落等不同的小物件~

Snow, balloons and more

WordPress雪花外掛

一般留言 (0)

  1. .超愛

    你好！請問你的上面那個橙色按鈕,是什麼插件,謝謝！

    回覆
    • awei

      你是說~~那個下載的按鈕嗎?
      那個是CSS語法生成的按鈕喔~~你只要在你的style.css裡面定義好按鈕的樣式.在套用就可以了

      例如我定義class=dwn為橘色按鈕並讓人下載
      檔案下載

      style.css內增加
      .dwn {
      -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
      -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
      box-shadow:inset 0px 1px 0px 0px #cf866c;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
      background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
      background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
      background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
      background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
      background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
      background-color:#d0451b;
      -moz-border-radius:3px;
      -webkit-border-radius:3px;
      border-radius:3px;
      border:1px solid #942911;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:arial;
      font-size:13px;
      padding:6px 24px;
      text-decoration:none;
      text-shadow:0px 1px 0px #854629;
      }
      .dwn:hover {
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
      background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
      background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
      background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
      background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
      background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);
      background-color:#bc3315;
      }
      .dwn:active {
      position:relative;
      top:1px;
      }

      也可以參考這篇
      css按鈕教學網頁

      回覆

發表留言