JQuery 图片的展开和伸缩实例讲解
更新时间：2013年04月18日 14:56:20 作者：
本文详细介绍下使用JQuery实现图片的展开和伸缩，感兴趣的朋友可以参考下哈，希望可以帮助到你
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#img1
{
width:400px;
height: 400px;
border: solid 1px #ccc;
display:none;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
$('#img1').show(5000); //图片的展开
})
$('#Button2').click(function () {
$('#img1').hide(5000); //图片的伸缩
})
})
</script>
</head>
<body>
<img id="img1" src="images/1.jpg" />
<input id="Button1" type="button" value="展开图片"/>
<input id="Button2" type="button" value="收缩图片"/>
</body>
</html>
相关文章
用jQuery调用其他项目的WebService的代码，需要的朋友可以参考下。2010-03-03
这篇文章主要介绍了JQuery实现鼠标移动图片显示描述层的方法,涉及jQuery鼠标事件及动画效果的使用技巧,需要的朋友可以参考下2015-06-06
这篇文章对于刚开始学习jquery的css 选择器的朋友是个不错的参考，大家可以看实例演示即可。2010-05-05
这篇文章主要介绍了JQuery和HTML5 Canvas两种方法实现弹幕效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
项目需要实现一个无刷新批量文件上传功能,仔细研究了下,发现JQuery 提供的Uploadify插件十分不错,有兴趣的可以了解一下。2017-01-01
jQuery毕竟还只是一个基础的最底层的工具集，封装元素选择器，事件等等，基本上能满足一般的需求，但要从整体的WEB的周度来看，为了提高javascript开发的效率与可重用性，就需要有一个整体的布局2011-01-01
这篇文章主要介绍了jQuery实现tab选项卡效果的方法,实例分析了jquery实现tab选项卡切换效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,需要的朋友可以参考下2014-12-12
对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了,接下来介绍实现方法，感兴趣的朋友可以了解下2013-01-01
最新评论