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

最新推荐文章于 2024-07-25 09:24:40 发布

zw946

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量934

点赞数

文章标签：腾讯 jquery javascript function xhtml 框架

本文链接：https://blog.csdn.net/zw946/article/details/6129340

版权

在做之前请下载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>

zw946

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似与腾讯微薄的图片放大缩小功能

<br />在做之前请下载jquery框架，和准备一张图片，否则不可以看到效果哦！<br />现在发现jQuery真的太好用了，刚开始学的时候没有怎么去用。现在就开始后悔了，不过现在一直在学……<br />平时就有这个爱好到处瞎逛网站，看到好的效果都喜欢自己把它实现出来或是把它偷下来下次用的时候拿出来。现在发现网上的效果看起来那么好，其实实现起来就是一句话就可以解决的。<br />看到微博里面那个图片放大缩小的效果一直觉得很形象，可是一直没有着手去做，今天有空终于尝试做出来了，说不出的简单啊！<br />
复制链接

扫一扫