一步一腳印工作札記

發表文章

目前顯示的是 7月, 2017的文章

簡單 TweenMax 動畫效果範例(GreenSock JS Framework)

利用不同的 JS 元件來製作有如動畫效果的圖片，下面範例介紹一款好用的動畫效果的 js framework (GreenSock)，GreenSock 裡面常用到 4種: TweenMax 、 TweenLite 、 TimelineLite 還有 TimelineMax ，底下利用 TweenMax 來做介紹(先講最後的效果就是當圖被點繫到時，會自動從大圖縮到小圖).. 1. 首先引用 cdn 來載入 Tween(沒引入那就GG了 ...): https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js 2. 加入程式碼: HTML: <p style="text-align:center"><img id= "pic" src="https://i.zzz.com/xxx.jpg" onClick="scaleSmall()" /></p> // 路徑照片 xxx.jpg 請自行置換 <p style="text-align:center">請點擊照片</p> JavaScript: function scaleSmall(){ var photo = document.getElementById("pic"); TweenMax.to(photo, 10, {width:150, height:100}); // 圖縮至 width height 大小 }

閱讀完整內容

MVC使用 JavaScript 顯示訊息

MVC 中要使用 JavaScript Alert 和一般在寫 WebForm 是差很多的，在一般 ASP.NET WebForm 中我們可以在 C# Code 加入 Response.Write("<script>alert("這是簡單範例")</script>"); 或用 RegisterStartupScript 、RegisterClientInclude 等等方式.. 那 MVC 如何呼叫呢?基本介紹幾個範例如下 1. 利用 TempData 一次性資料暫存記錄 Controller: public ActionResult Example() { return View(); } public ActionResult DisplayMessage() { TempData["message"] = "這是一個簡單的範例"; return RedirectToAction("Example", "Home"); } View: @{ ViewBag.Title = "Example"; } <h2>Example</h2> @Html.ActionLink("Click Me", "DisplayMessage") <br/> // 判斷一次性 @if (TempData["message"] != null) { <script> var message = @Ht...

閱讀完整內容

MVC5 透過 Entity Framework 連接資料庫顯示內容做法

介紹透過 Entity Framework 讀取資料庫內容，說明整個 Model & View 如何直接對現在 DB Table 做欄位 ORM (Object Relational Mapping)，範例中抓取資料庫欄位 MrkId(股票代號)、StkName(股票代號)後，顯示於網頁畫面。 Step 1. 在專案 Models 中建立資料庫 .edmx 選擇ADO.NET實體資料模型選擇第一個 EF(也就是 Entility Framework) 決定資料庫連線及在 Web.Config 中是否加入ConnectionString 名稱選擇所要對應到的資料庫 Table 從方案總管中就可以看到完成的 edmx Step 2. Controller 中這裡為使用 HomeController.cs => Index Action加入: public class HomeController : Controller { public ActionResult Index() { List<Models. TS_StockTickData > result = new List<Models. TS_StockTickData >(); using (Models.TSDATAEntities2 tse = new Models.TSDATAEntities2()) result = (from s in tse.TS_StockTickData select s).ToList(); // 將所有抓到的 Row 內容寫入到 List( ) 中回傳給 View ...

閱讀完整內容