公告

今天让我感到了知识产权对作者的重要性，博客中的文章如果没有特殊说明，均为原创或者翻译，转载请注明原文出处。另外，在我博客中的一些文章，或许有意无意侵犯了您的知识产权，如果您发现了，请及时发邮件联系我，我将立即作出处理。我的邮箱：

sxwgf.com@gmail.com

谢谢！

如果能成为巨人，我愿意献出肩膀

王国峰 2011年毕业于中国计量学院

我的博客园 Email联系我

文章分类

搜索

文章归档

阅读排行

评论排行

我的书屋

友情链接

JS仿微博的图片缩放和旋转示例及源码下载

我是最近两天才开始玩微博的，觉得有点out了，微博地址是：http://weibo.com/sxwgf，有兴趣的可以加我。说起微博，里面有一个技术我觉得非常好，那就是微博中的贴图，点击可以缩放，也可以上下左右地旋转，这篇文章呢也主要是分享一下如何来实现这样图片缩放和旋转的功能，其实也就是一个Javascript小程序，程序是网上找的，看了看，还算简单，现在拿出来与大家分享，或许不久的将来你能用上，先收藏吧：）

效果图如下：

虽然很简单，但我还是简单介绍一下用法吧：

首先引入jquery主库和插件主库，这是必需的

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="artZoom.js"></script>

然后就是将图片放到页面上，a标签的href是大图的url，img中的是缩略图的url：

<ul class="imgList">
  <li> <a class="miniImg artZoom" href="images/b.jpg" rel="images/b.jpg"><img src="images/m.jpg" /></a> </li>
  <li> <a class="miniImg artZoom" href="images/b2.jpg" rel="images/b2.jpg"><img src="images/m2.jpg" /></a> </li>
</ul>

然后就是初始化一下：

jQuery('a.artZoom').artZoom();

最后，老规矩，点击查看在线示例或者下载源码，记得分享给你的朋友或同事哦：）

分享到： QQ空间新浪微博人人网更多

Posted by ivy @ 2011-12-11 11:19:55 阅读(1076) 评论(0)
上一篇：一款基于jQuery的幻灯片播放插件示例及源码下载
下一篇：IE浏览器检测，当JS遇上条件注释

Feedback

你还可以输入600/600个字符发表评论

IT青藤屋

公告