我們不管是做博客系統還是其他網站，圖片是免不了要使用到的。但是，我們都知道圖片的訪問是很耗資源的，同時也是很占磁盤空間的，且還特別占帶寬。
所以，我們一般都會用到特定的圖片服務器。不過，像我等屌絲平時鬧着玩肯定是不會花錢整那些東西。今天我就來介紹一個高速免費無限量圖片存儲支持外鏈。是的，你沒聽錯。就是無限量免費。它的名字：貼圖庫，可能有同學知道並且使用過了。那你可以略過了。
介紹完貼圖庫后，我在向大家介紹下。我的圖話實現。圖話是什么？就是我們經常看到的彈幕，只不過現在到了圖片上面了。演示地址。
貼圖庫
其實官網已經有比較詳細的文檔了：http://open.tietuku.com/doc
官網提供了php的sdk，以前記得也有java的，但是沒見過有.net。沒辦法，只能自己寫了。
其實這個我不想做過多的講解了，等下我提供demo下載，對着官方文檔自己就看得懂了。我直接講下怎么使用。
第一步：導入 TietukeLib.dll 。
就是我自己寫的一個類庫。
第二步：在 Global.asax 中系統啟動時設置 AccessKey和SecertKey ，可在http://open.tietuku.com/manager查看到。
protected void Application_Start() { TokenHelp.AccessKey = ""; TokenHelp.SecertKey = "";
第三步：在頁面訪問是后台獲取TeKen，然后在頁面的空間里面設置TeKen值。
后台(相冊ID查看：http://open.tietuku.com/album)
public static string TeKen_File = string.Empty; public static string TeKen_WebUrl = string.Empty; public ActionResult Index() { TeKen_File = TietukeHelp.GetToken(相冊ID, "file");//文件上傳 TeKen_WebUrl = TietukeHelp.GetToken(相冊ID, "web");//weburl上傳 return View(); }
前台
<div style="margin: 5px; padding: 5px; border: 1px dashed #0094ff"> <form enctype="multipart/form-data" method="post" action="http://up.tietuku.com/"> <input name="Token" value="@(Hi.Web.Controllers.TieTuKuController.TeKen_File)" type="hidden"> <input type="file" name="file"> <input type="submit"> </form> </div> <div style="margin:5px;padding:5px;border:1px dashed #0094ff"> <form method="post" action="http://up.tietuku.com/"> ImgUrl:<input name="Token" value="@(Hi.Web.Controllers.TieTuKuController.TeKen_WebUrl)" type="hidden"> <input type="text" name="fileurl"> <input type="submit"> </form> </div>
效果圖：
演示地址：http://hi.haojima.net/TieTuKu/Index
經過上面的介紹，如果您只是想在網頁上簡單的使用，並且不關系源碼的話，了解了上面的就行了。直接下載TieTuKuLib.dll【注意：版本是.NET Framework4.5】。
如果您想在通過非網頁的形式，也就是后台直接通過圖片文件路徑或網絡圖片地址進行上傳的話，那就繼續聽我往下分析。
所說的后台傳圖片，其實就是用 System.Net.Http.dll 中的 HttpClient 來模擬get或者post請求。
這幾個方法我也封裝到了上面的TieTuKuLib.dll文件里面。直接TietukeLib.Help.PostReqest可以發送內容post請求，TietukeLib.Help.PostFileReqest發送圖片和文字內容post請求。（當然，我的命名不規范。您可以拿到源碼后自己修改下命名。我這里就懶得改了）
例：
/// <summary> /// 根據url圖片源 上傳到指定相冊id的相冊 /// </summary> /// <param name="url">url圖片源</param> /// <param name="c_aid">相冊id(http://open.tietuku.com/album頁面可以查看到)</param> /// <returns></returns> public static string PostUrlImg(string url, int c_aid) { var data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + 60).ToString(); var a_data = new { deadline = data, aid = c_aid, from = "web" }; StringBuilder str_content = new StringBuilder(); str_content.Append("Token=" + TokenHelp.GetToken(a_data)); str_content.Append("&fileurl=" + url); return TietukeLib.Help.PostReqest("http://up.tietuku.com/", str_content.ToString()); }
例：
/// <summary> /// 根據本地文件流 上傳到指定相冊id的相冊 /// </summary> /// <param name="c_aid">相冊id</param> /// <param name="imageStream">文件流</param> /// <param name="imgName">文件名</param> /// <returns></returns> public static string PostImgData(int c_aid, FileStream fileStream, string imgName) { var data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + 60).ToString(); var a_data = new { deadline = data, aid = c_aid, from = "file" }; StringBuilder str_content = new StringBuilder(); str_content.Append(TokenHelp.GetToken(a_data)); return Help.PostFileReqest("http://up.tietuku.com/", fileStream, str_content.ToString(), imgName); }
關於貼圖庫的介紹就到這里了。其實，你看懂了上面的，完全可以自己建一個免費的圖片網站了，什么圖片網？當然是MM圖片網。
，其實我自己就建了一個，只是尺度有點大，就不放出鏈接了。然后我的博客系統也打算用這個來存圖片。
有了圖片，我們還可以整點別的好玩的東西-->"圖話"，這就是接下來要分析的了。全部的源碼下面再給出，和圖話源碼和一起。
圖話
圖話，說白了就是我們平時看視頻上面飄來飄去的評論。現在我們只是把它飄到了圖片上，就叫圖話了。
當我看到圖話的效果時，第一感覺就是好神奇哦，然后就是挺有意思的。然后就想自己拿來玩玩，結果找了下，沒找到類似的插件。沒辦法，那就自己繼續折騰折騰吧。
其實，仔細想想也挺簡單的。飄來飄去，不就是一個div不斷移動就可以了嗎？是的，就是這么簡單。我們很時候，都是被效果轉移了注意力，而根本就沒去想要去怎么實現它，或者以為會很難而懶得動手了。
好，我們說動就動。
先看效果圖：
首先，你需要在圖片上顯示評論消息，那么必須要圖片上層添加一個div作為容器，然后再去div上顯示文字。
1、怎么在圖片上添加一個層div？
position: absolute
“生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。”，我們暫且稱為圖話容器。
2、怎么樣在“圖話容器”中顯示文字？
直接在“圖話容器”里面添加div可以了，為了更好的控制在容器里面的位置和讓其包裹文字，我們繼續設置樣式absolute。
3、怎樣移動文字？
用js的定時器setInterval來不斷改變文字所在div的位置left。
下面我們用代碼說話。圖片上層的div容器大小肯定要和圖片大小一樣。這里我們就需要動態讀取加載的圖片大小然后進行對應的設置。
圖片加載時：
//圖片加載時 function imgLoad(obj) { var str_html = $(".mb").html();//取模版"圖話容器" var par = $(obj).parent();//取到img的父容器 par.prepend(str_html);//添加到img的上面 par.find(".div1").css("width", $(obj).css("width"));//設置容器的寬度和img一樣 par.find(".div1").css("height", 100); var strs = $(obj).attr("src").split('/'); var imgName = strs[strs.length - 1]; imgName = isc(imgName); $(obj).attr("name", imgName); msgKey[msgKey.length] = imgName; msgData[imgName] = ["test1:彈一下吧1", "test2:彈一下吧2", "test3:彈一下吧3", ]; setInterval(function () {//定時器 不斷執行 par.find(".div11").each(function () {//取到所有的 評論文字 所在div mesgCycle(this, msgData[imgName]); }); }, "10"); }
圖話“容器模版”
<div class="mb" style="display:none"> <div class="div1" style="background-color: rgba(0,0,0,0.3); position: absolute;overflow:hidden;"> <div class="div11" style="top: 11px; left: 50px; font-size: 20px; color: rgba(0,0,0,0.3); position: absolute; overflow: hidden;"> test:測試1 </div> <div class="div11" style="top: 28px; left: 90px; font-size: 20px; color: #ff6a00; position: absolute; overflow: hidden; "></div> <div class="div11" style="top: 51px; left: 40px; font-size: 20px; color:#4cff00; position: absolute; overflow: hidden; ">test3:test3</div> <div style="position:absolute;bottom:0px;width:100%"> <div class="but_div" style="display: table; margin: 0 auto"> <input type="text" class="inp" /><input type="button" onclick="but(this);" value="彈一個" /> </div> </div> </div> </div>
定時執行移動坐標：
//接收 文字所在div 和 消息 function mesgCycle(element, mesg) { var elementRight = parseInt($(element).css("left")); var elementWidth = parseInt($(element).css("width")); var imgWidth = parseInt($(element).parents(".div_pack").find("img").css("width")); $(element).css("left", elementRight - 1);//移動一個單位坐標 if ((elementRight + elementWidth) == 0) {//如果完全容器 mesg[mesg.length] = mesg[0]; $(element).text(mesg.shift());//取下一條消息 $(element).css("left", imgWidth - parseInt($(element).css("width")));//重新設置初始坐標 $(element).css("color", getColor());//更好文字顏色 } }
好了，關鍵代碼就這些了。下面給出全部源碼。
首先，我並非專業前端。肯定有很多用的不合適和不合理的（我只是瞎折騰），希望園友給出更好的解決方案。如果您覺得此文對您有那么一點點用，請輕輕點個贊。
演示地址：http://haojima.net/demo/tuhua
源碼下載：http://pan.baidu.com/s/1qW3n3AG
(注意：demo里面要設置你自己的 相冊ID、AccessKey 和 SecertKey )
ps:演示地址是高圓圓和范冰冰選美pk
，事實證明，喜歡高圓圓的要多過范冰冰啊。趕快為你心儀的女神投上一票吧。
