我们不管是做博客系统还是其他网站，图片是免不了要使用到的。但是，我们都知道图片的访问是很耗资源的，同时也是很占磁盘空间的，且还特别占带宽。
所以，我们一般都会用到特定的图片服务器。不过，像我等屌丝平时闹着玩肯定是不会花钱整那些东西。今天我就来介绍一个高速免费无限量图片存储支持外链。是的，你没听错。就是无限量免费。它的名字：贴图库，可能有同学知道并且使用过了。那你可以略过了。
介绍完贴图库后，我在向大家介绍下。我的图话实现。图话是什么？就是我们经常看到的弹幕，只不过现在到了图片上面了。演示地址。
其实官网已经有比较详细的文档了：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 )
本文链接：http://www.VEVb.com/zhaopei/p/4931518.html
欢迎上海“程序猿/媛”、"攻城狮"入群：【沪猿】229082941 入群须知
ps:演示地址是高圆圆和范冰冰选美pk
，事实证明，喜欢高圆圆的要多过范冰冰啊。赶快为你心仪的女神投上一票吧。
新闻热点
疑难解答
