手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery 图片的展开和伸缩实例讲解
JQuery 图片的展开和伸缩实例讲解
摘要:复制代码代码如下:#img1{width:400px;height:400px;border:solid1px#ccc;display:no...

复制代码 代码如下:

<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 图片的展开和伸缩实例讲解】相关文章:

JQuery中Text方法用法实例分析

Javascript中For In语句用法实例

jQuery预加载图片常用方法

jquery实现图片左右切换的方法

Jquery使用css方法改变样式实例

Jquery中基本选择器用法实例详解

jQuery实现的多屏图像图层切换效果实例

jQuery实现文本展开收缩特效

JQuery boxy插件在IE中边角图片不显示问题的解决

JQuery分屏指示器图片轮换效果实例

精品推荐
分类导航