jQuery 紅包落下、紅包雨 簡易教學 適合新手、視覺設計師。

  •  
  •  
  • 8
  •  
    8
    Shares

jQuery 紅包落下、紅包雨 簡易教學 適合jQuery 新手、視覺設計師。

現在的購物網站或者APP常常會有紅包落下的效果,只要點擊到就能夠得到禮券之類的。此篇文章要教學用簡單的jQuery方法,製作出此效果,而為了讓語法可以直接複製貼上到自己的網頁使用,因此本篇文章的紅包不使用圖檔,而是svg語法,可以直接複製貼上使用,不用擔心圖片路徑問題。使用的jQuery也是jQuery官方線上最新的喔。

cash-red-envelope

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

實際範例:https://huangmaster.com/jq_redpack/

步驟1:

首先我們用svg繪製一個紅包的效果,有一個四方形紅包跟一個五角形的封口,並給他一個class叫做redpackoriginal,放在body內,如下語法:

<div style="width: 100px;" class="redpackoriginal">
<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2300 1212" style="enable-background:new 0 0 2300 1212;" xml:space="preserve">
<g>
<polygon style="fill:#A83535;" points="0,294 0,1212 2300,1212 2300,294 1150,515 	" />
</g>
<g>
<polygon style="fill:#CC5A5A;" points="0,294 1150,515 2300,294 2300,0 0,0 	" />
</g>
</svg></div>

——————————

步驟2:

為了讓效果能夠RWD,依據使用者裝置視窗調整效果大小,先取得使用者視窗像素,如下語法:


var divceWidth = $(window).width(); /*取得使用者裝置寬度*/
var divceHeight = $(window).height(); /*取得使用者裝置高度*/

——————————
步驟3:

取得使用者視窗像素後,我們將步驟1畫好的紅包,存成一個變數,供未來重複使用,語法如下:


var redpackoriginal = $(".redpackoriginal").html(); /*取得預先在網頁上畫好的紅包*/

——————————
步驟4:

開始撰寫紅包產生的效果,因為紅包要重複一直畫,所以我們將產生紅包的動作包成一個函式,如下語法,語法內都有中文註解,可對照看:


function inputredpack() { /*製作一個函式,將產生紅包的語法都放在這函式內*/

var redPackLeft = Math.random() * divceWidth; /*使用使用者寬度隨機產生紅包放置位置*/
var redPackEndDir = Math.random() * divceWidth; /*使用使用者寬度隨機產生紅包移動位置*/

var redpack = $("<div>"); /*定義一個紅包變數是div*/
$("body").append(redpack); /*在body內放入紅包的div*/
redpack.css({ /*定義此div的基本css*/
"position": "absolute",
"top": "-100px",
"left": redPackLeft,
"width": "100px",
"transform": "rotate(50deg)"

});

redpack.html(redpackoriginal); /*對此div放入我們已經畫好的紅包語法*/

redpack.stop().animate({ top: divceHeight, left: redPackEndDir }, 3000, function() { redpack.remove(); });
/*對此div寫入動畫的動作,會在3秒時間移動到視窗底部,然後清除自己,釋放資源效能*/

redpack.click(function() { /*此div被點到後可以執行的動作*/
alert("你點到我囉")
})
};

——————————
步驟5:

最後一個步驟就是要重覆將紅包放入網頁內,因此需要使用setInterval,如下語法,每一秒繪製一個紅包:


var start = setInterval(inputredpack, 1000); /*每1000毫秒重新繪製紅包*/

——————————
步驟6:

全部完成囉,您可以試著用網頁看看是否紅包開始跑了呢?
最後附上所有的語法,只要通通複製下來,放到空的html內就可以執行囉。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>玩轉芋圓旅遊手札-程式教學</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>


<div style="width: 100px;" class="redpackoriginal">
<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2300 1212" style="enable-background:new 0 0 2300 1212;" xml:space="preserve">
<g>
<polygon style="fill:#A83535;" points="0,294 0,1212 2300,1212 2300,294 1150,515 	" />
</g>
<g>
<polygon style="fill:#CC5A5A;" points="0,294 1150,515 2300,294 2300,0 0,0 	" />
</g>
</svg>
</div>


<script type="text/javascript">
$(function() {

var divceWidth = $(window).width(); /*取得使用者裝置寬度*/
var divceHeight = $(window).height(); /*取得使用者裝置高度*/
var redpackoriginal = $(".redpackoriginal").html(); /*取得預先在網頁上畫好的紅包*/

function inputredpack() { /*製作一個函式,將產生紅包的語法都放在這函式內*/

var redPackLeft = Math.random() * divceWidth; /*使用使用者寬度隨機產生紅包放置位置*/
var redPackEndDir = Math.random() * divceWidth; /*使用使用者寬度隨機產生紅包移動位置*/

var redpack = $("<div>"); /*定義一個紅包變數是div*/
$("body").append(redpack); /*在body內放入紅包的div*/
redpack.css({ /*定義此div的基本css*/
"position": "absolute",
"top": "-100px",
"left": redPackLeft,
"width": "100px",
"transform": "rotate(50deg)"

});

redpack.html(redpackoriginal); /*對此div放入我們已經畫好的紅包語法*/

redpack.stop().animate({ top: divceHeight, left: redPackEndDir }, 3000, function() { redpack.remove(); });
/*對此div寫入動畫的動作,會在3秒時間移動到視窗底部,然後清除自己,釋放資源效能*/

redpack.click(function() { /*此div被點到後可以執行的動作*/
alert("你點到我囉")
})
};
var start = setInterval(inputredpack, 1000); /*每1000毫秒重新繪製紅包*/

})
</script>
</body>

</html>

作者芋圓是位喜歡寫程式的視覺設計師,因此可以用視覺人的邏輯去教學javascrip和jQuery、CSS如果有任何想學的又或者是疑問,都可以留言,芋圓樂意分享與教學。

作者網站:https://huangmaster.com/

實際範例:https://huangmaster.com/jq_redpack/

有任何疑問可以留言告知,或是E-Mail給芋圓
nickhuang1121@gmail.com

 

看更多 芋圓語法教室 教學示範文章

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 限量健身包連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  • 8
  •  
    8
    Shares

發表迴響

Up ↑