类似与腾讯微薄的图片放大缩小功能

原创 2011年01月11日 16:21:00

在做之前请下载jquery框架,和准备一张图片,否则不可以看到效果哦!

现在发现jQuery真的太好用了,刚开始学的时候没有怎么去用。现在就开始后悔了,不过现在一直在学……

平时就有这个爱好到处瞎逛网站,看到好的效果都喜欢自己把它实现出来或是把它偷下来下次用的时候拿出来。现在发现网上的效果看起来那么好,其实实现起来就是一句话就可以解决的。

看到微博里面那个图片放大缩小的效果一直觉得很形象,可是一直没有着手去做,今天有空终于尝试做出来了,说不出的简单啊!

 只要是用jquery 框架来做的,所以你要有jQuery框架。和一张图片!不多说了,下面我就把代码考出来不吧,虽然效果很简单,但是这是我的记录,只要用到 toggleClass()z这个方法;原理就是点击时替换原来的类img的样式换成.imgs,再点击又替换.imgs为一开始的类img的样式,这样就可以实现反复添加替换样式了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 类似QQ空间的图片放大缩小</title>
<style type="text/css">
img{
    cursor: url("http://mat1.gtimg.com/www/mb/images/cursor_zoom.cur"), pointer;//这是图片默认的样式,鼠标滑过开始的指针样式是放大的形状,这个图片地址我直接连接QQ微博的地址
   
}
  .imgs{
      width:300px;
      height:300px;
        cursor: url("http://mat1.gtimg.com/www/mb/images/cursor_minify.cur"), pointer !important;//这是替换后的样式,鼠标的指针样式改为缩小样式
 }
</style>
<script type="text/javascript" language="javascript" src="jquery1.4.min.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
     $("img").click(function(){
       $(this).toggleClass("imgs")
     })
 
 
  })
</script>
</head>

<body>

<h1>准备一张你想要的图片</h1>
<img src="01.jpg" />
</body>
</html>

Android腾讯微薄客户端开发七:图片加圆角以及时间处理工具类

给图片加上圆角效果好看多了。 Java代码   public class ImageUtil {           public static Input...

Android腾讯微薄客户端开发十二:博主的偶像

点击收听,显示此博主的偶像列表,点击列表,将显示偶像的详情界面 Java代码   public class IdolActivity extends ListAc...

Android腾讯微薄客户端开发十五:终结篇(分享源代码)

【有问题的同学请先仔细看看这里,总结了一下大家给我提的问题:】最近我有其它事情要忙,有时间我也会改之更新上来,谢谢大家的支持,另外大家遇到错误先看看帖子的回复,有些问题已经解释了,谢谢合作 1:...

Jquery实现仿腾讯微薄的广播发表

  • 2012年10月19日 18:34
  • 427KB
  • 下载

Android腾讯微薄客户端开发六:给用户加VIP认证以及美化微博显示内容

这个是什么组件啊?是TextView,不会吧?TextView能显示图片吗?肯定能呀。    主要是用到了SpannableString,ForegroundColorSpan,I...

Android腾讯微薄客户端开发十三:提及篇(与我有关的微博)

Java代码   public class ReferActivity extends ListActivity implements OnItemClickListener,OnI...

Android腾讯微薄客户端开发十:博主广播篇

点击广播,显示此博主所发表的所有微博 Java代码   public class TweetsActivity extends ListActivity impl...

Android腾讯微薄客户端开发十四:首页menu菜单

覆写onCreateOptionsMenu方法 Java代码   @Override       public boolean onCreateOptionsMenu(...

Jquery实现仿腾讯微薄的广播发表

1.实现的功能截图:

Jquery实现仿腾讯微薄的广播发表

前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:类似与腾讯微薄的图片放大缩小功能
举报原因:
原因补充:

(最多只允许输入30个字)