自从开始学习前端后，平时看到浏览器上的一些出彩的控件都想自己实现一下O(∩_∩)O，不知大家有没有这个感觉。接下来就和大家分享一个，原控件来自百度翻译右下方，大家仔细找找应该能找到，如图所示：
感觉蛮有意思的，实现起来也不复杂，比较适合练手。好吧，废话不多说了，直接上代码吧。
html代码：
直接使用我上传的这个图片资源也是可以的（感谢强大的互联网^_^）。
接下来是我实现的效果展示：
接着说说，我在编写过程中的主要技术要点：
控件兼容到IE7，手头没有IE6，无法测试了，主要解决的兼容问题代码中都有标注。
采用了css sprites 技术，大家应该已经发现了吧^_^，好技术就要用。
JS中应用闭包，避免全局污染。
在html中script标签放到body底部，这种小细节俺也会注意到的（虽然都是本地资源╮(╯▽╰)╭）。
好吧，就是这些，不过这个小控件，还是有进一步完善的余地的，比如，可以使用css3属性来实现div的动态伸缩，可以将这个控件组件化，可以用JQ框架更加方便的实现（JQ练手）等等。
以上就是本文分享给大家的全部内容了，希望大家能够喜欢。