我们不管是做博客系统还是其他网站，图片是免不了要使用到的。但是，我们都知道图片的访问是很耗资源的，同时也是很占磁盘空间的，且还特别占带宽。

所以，我们一般都会用到特定的图片服务器。不过，像我等屌丝平时闹着玩肯定是不会花钱整那些东西。今天我就来介绍一个高速免费无限量图片存储支持外链。是的，你没听错。就是无限量免费。它的名字：贴图库，可能有同学知道并且使用过了。那你可以略过了。

介绍完贴图库后，我在向大家介绍下。我的图话实现。图话是什么？就是我们经常看到的弹幕，只不过现在到了图片上面了。演示地址。

其实官网已经有比较详细的文档了：

官网提供了php的sdk，以前记得也有java的，但是没见过有.net。没办法，只能自己写了。

其实这个我不想做过多的讲解了，等下我提供demo下载，对着官方文档自己就看得懂了。我直接讲下怎么使用。

第一步：导入 TietukeLib.dll 。

就是我自己写的一个类库。

第二步：在 Global.asax 中系统启动时设置 AccessKey和SecertKey ，可在查看到。

protected void Application_Start() { TokenHelp.AccessKey = ""; TokenHelp.SecertKey = "";

第三步：在页面访问是后台获取TeKen，然后在页面的空间里面设置TeKen值。

后台(相册ID查看：)

TeKen_File = string.Empty; TeKen_WebUrl = string.Empty; public ActionResult Index() { TeKen_File = TietukeHelp.GetToken();//文件上传 TeKen_WebUrl = TietukeHelp.GetToken(相册ID, );//weburl上传 return View(); }

前台

<div style=> <form enctype=method=action=> <input name=value=type=> <input type=name=> <input type=> </form> </div> <div style=> <form method=action=> ImgUrl:<input name=value=type=> <input type=name=> <input type=> </form> </div>

 效果图：

经过上面的介绍，如果您只是想在网页上简单的使用，并且不关系源码的话，了解了上面的就行了。直接下载TieTuKuLib.dll。

如果您想在通过非网页的形式，也就是后台直接通过图片文件路径或网络图片地址进行上传的话，那就继续听我往下分析。

所说的后台传图片，其实就是用 System.Net.Http.dll 中的 HttpClient 来模拟get或者post请求。

这几个方法我也封装到了上面的TieTuKuLib.dll文件里面。直接TietukeLib.Help.PostReqest可以发送内容post请求，TietukeLib.Help.PostFileReqest发送图片和文字内容post请求。（当然，我的命名不规范。您可以拿到源码后自己修改下命名。我这里就懒得改了）

例：

根据url图片源 上传到指定相册id的相册 PostUrlImg(string url, int c_aid) { var data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + 60).ToString(); }; StringBuilder str_content = new StringBuilder(); str_content.Append(+ TokenHelp.GetToken(a_data)); str_content.Append(+ url); , str_content.ToString()); }

例：

根据本地文件流 上传到指定相册id的相册 PostImgData(int c_aid, FileStream fileStream, string imgName) { var data = (TokenHelp.DateTimeToUnixTimestamp(DateTime.Now) + 60).ToString(); }; StringBuilder str_content = new StringBuilder(); str_content.Append(TokenHelp.GetToken(a_data)); , fileStream, str_content.ToString(), imgName); }

关于贴图库的介绍就到这里了。其实，你看懂了上面的，完全可以自己建一个免费的图片网站了，什么图片网？当然是MM图片网。，其实我自己就建了一个，只是尺度有点大，就不放出链接了。然后我的博客系统也打算用这个来存图片。

有了图片，我们还可以整点别的好玩的东西-->"图话"，这就是接下来要分析的了。全部的源码下面再给出，和图话源码和一起。

图片上传演示地址：

图话，说白了就是我们平时看视频上面飘来飘去的评论。现在我们只是把它飘到了图片上，就叫图话了。

当我看到图话的效果时，第一感觉就是好神奇哦，然后就是挺有意思的。然后就想自己拿来玩玩，结果找了下，没找到类似的插件。没办法，那就自己继续折腾折腾吧。

其实，仔细想想也挺简单的。飘来飘去，不就是一个div不断移动就可以了吗？是的，就是这么简单。我们很时候，都是被效果转移了注意力，而根本就没去想要去怎么实现它，或者以为会很难而懒得动手了。

好，我们说动就动。

先看效果图：

 首先，你需要在图片上显示评论消息，那么必须要图片上层添加一个div作为容器，然后再去div上显示文字。

1、怎么在图片上添加一个层div？

position: absolute

 “生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。”，我们暂且称为图话容器。

2、怎么样在“图话容器”中显示文字？

直接在“图话容器”里面添加div可以了，为了更好的控制在容器里面的位置和让其包裹文字，我们继续设置样式absolute。

3、怎样移动文字？

用js的定时器setInterval来不断改变文字所在div的位置left。

下面我们用代码说话。图片上层的div容器大小肯定要和图片大小一样。这里我们就需要动态读取加载的图片大小然后进行对应的设置。

图片加载时：