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.Ajax()的data参数类型实例详解,需要的朋友可以参考下2015-11-11
下面小编就为大家带来一篇jQuery自定义元素右键点击事件(实现案例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要为大家详细介绍了jQuery选择器之属性过滤选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
jQuery是时下最流行的 JavaScript 库。现在，除了HTML5以外，也有很多jQuery爱好者使用jQuery来开发游戏，虽然效果没有Flash那么好，但是这些游戏也看起来很酷。2011-04-04
下面小编就为大家分享一篇jquery在启动页面时,自动加载数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了jQuery实现简单弹幕制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
下面小编就为大家带来一篇基于LayUI实现前端分页功能的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了jquery鼠标滚动数字增加插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
jquery动态创建页面元素，mark一下，以备以后查询时使用。以创建div和input为例。2010-12-12
本文主要介绍JQuery框架里面支持的自定义事件模型，通过实例说明什么时候可以利用事件模型进行面向对象的JS编程，以及利用“带命名空间的事件处理函数”来避免unbind时影响别的事件订阅。2010-08-08
最新评论