Jquery 实现动画效果 （三）

最新推荐文章于 2022-10-29 18:05:59 发布
最新推荐文章于 2022-10-29 18:05:59 发布
阅读量64 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/307914070/archive/2011/01/11/1932777.html
版权

 

使用Jquery实现层的切换效果。

 

前台代码：

 

<!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>
    <title>传值显示Div</title>

    <!-- 引入Jquery -->
    <script type="text/javascript" src="Script/jquery-1.3.2.min.js" language="javascript"></script>

    <!-- 样式 -->
    <style type="text/css">
        span{background-color:#eeeeee;              
             }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="20" width="440px" align="center">
    	<tr >
    		<td>
                <span>1</span>  <span>2</span>  <span>3</span>  <span>4</span> 
                <span>5</span>  <span>6</span>  <span>7</span>    <hr />
                <div id="div1" style="width:400px;height:200px;background-color:Red;display:block;"></div>
                <div id="div2" style="width:400px;height:200px;background-color:#ccc;display:none;"></div>
                <div id="div3" style="width:400px;height:200px;background-color:Green;display:none;"></div>
                <div id="div4" style="width:400px;height:200px;background-color:Blue;display:none;"></div>
                <div id="div5" style="width:400px;height:200px;background-color:Yellow;display:none;"></div>
                <div id="div6" style="width:400px;height:200px;background-color:Orange;display:none;"></div>
                <div id="div7" style="width:400px;height:200px;background-color:Purple;display:none;"></div>
            </td>
    	</tr>
    </table>
    
    <script language="javascript" type="text/javascript">

        /*
         * 遍历span,获取span的文本值
         * 让所有的div先隐藏，然后根据值让所选的div淡入
         */
        $("span").each(function (event) {
            var num1 = $(this).html();
            $(this).bind("click", function (event) {
                $("div").hide();
                $("#div" + num1 + "").fadeIn(1000);
            });
        });


    </script>
</body>
</html>

效果预览：

 

2011011112594660.jpg

2011011113000030.jpg

转载于:https://www.cnblogs.com/307914070/archive/2011/01/11/1932777.html

weixin_33836223
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery动画效果
张子又
01-19 6427
1. 隐藏和显示 show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。 1.1 hide() 和 show() 我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： &lt;body&gt; &lt;div style="width: 200px; ...
jQuery实现动画效果
shang_111111的专栏
05-06 744
table{border:1px solid #666;}        table td{border:1px solid #eee;width:200px;height:200px;}        img{width:200px;height:200px;border:none;position:relative;}                     $(fu
jQuery动画效果的实现
qq_46178261的博客
04-22 902
jQuery效果 jQuery给我们封装了很多动画效果，最常见的如下： 显示与隐藏：show()、hide()、toggle() 滑动：slideDown()、slideUp()、slideToggle() 淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo() 自定义动画：animate() 1 显示隐藏效果 1. 语法 show([speed],[easin...
使用jQuery实现动画效果
共勉
01-11 754
看一下效果图：当鼠标放在绿色小块上，将会放大，鼠标移开后，又会缩小为初始大小。 代码如下： <!DOCTYPE HTML> <HTML> <HEAD> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <SC...
jQuery实现动画效果的简单实例
12-09
在本文中，我们将深入探讨如何使用jQuery来实现动画效果，以"jQuery实现动画效果的简单实例"为例。jQuery是一个广泛使用的JavaScript库，它简化了许多DOM操作，并提供了强大的动画功能。让我们一起看看如何手动创建...
jQuery实现图像旋转动画效果
10-22
接下来，我们需要了解 jQuery 的 `.animate()` 方法，它是实现动画效果的核心。`.animate()` 方法允许我们平滑地改变 HTML 元素的 CSS 属性，如位置、大小、颜色等。在这个例子中，我们使用 `.animate()` 来改变图像...
jQuery实现动画效果circle实例
10-23
主要介绍了jQuery实现动画效果circle的方法,涉及jquery鼠标事件及页面动画操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现简单滚动动画效果
10-22
主要为大家详细介绍了jQuery实现简单滚动动画效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery实现动画效果
qq_41575219的博客
07-30 397
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jq图片的动画效果</title> <script type="text/javascript" src="js/jquery-3.4.1....
jQuery中实现动画效果的基本操作介绍
12-12
动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数，speed.     fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度   滑动显示 slideDown()： slideUp(): slideToggle(): 都可以传入一个speed参数。   $(‘:animated’);获取正在执行动画的元素。 将正在执行动画的元素停止： $(‘:animated’).stop():停止当前的动画。 stop(true)表示清除队列中的所有的
jQuery动画效果实现
XiaoBsEven的博客
08-17 1449
目录 jQuery动画效果说明 方法如下: 显示和隐藏动画 显示和隐藏动画方法 展开和收起动画          展开和收起动画方法 淡出和淡入动画 淡出和淡入动画方法 自定义动画 jQuery动画效果说明   在JS当中,为了实现动画效果我们往往需要各种的声明,调用,循环,遍历,无所不用其极.往往敲完一个简单的效果,时间已经过了几十分钟甚至几个小时.而当你使用了jQuer...
jQuery基础之实现动画效果
weixin_44374938的博客
03-21 828
一、动画 1.jQuery animate()方法允许创建自定义的动画 且接受三个参数animate({params},speed,callback) params:该参数定义形成动画的css属性 speed：参数规定效果的时长,可以取”slow","fast"或毫秒 callback:参数是动画完成后所执行的函数。 $(function(){ $("#button").clikc(function(){ $("div").animate({ //需要注意的是这里的样式值都是字符串形式 le
jQuery 动画效果
anzhehan1535的博客
11-13 93
jQuery 动画效果 一.显示动画 　　方式一: 　　$("div").show(); 　　无参数,表示让指定的元素直接显示出来,其实之歌方法就是通过display: block;实现的 　　方式二:　　$("div").show() 　　通过控制元素的宽高,透明度,display属性,逐渐显示,2秒后显示完毕 　　方式三:　　$("div").show("show");...
JQuery动画效果
weixin_57762639的博客
05-07 180
show显示隐藏的匹配元素。这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。 speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"fn:在动
分别用css,js,jquery实现一个持续动画效果
木木的博客
08-30 2131
1.使用css实现一个持续的动画效果 div{     width: 200px;     height: 200px;     /* 动画的元素一定要是定位的 */     position: absolute;     background-color: green;     /* 使用一个动画 */     animation: dong 1s infinite linear;   } ...
jQuery-动画效果（轮播图案例）
最新发布
weixin_69036336的博客
10-29 1531
jQuery-动画效果（轮播图案例）
jQuery的4种常见动画效果
IT00123的博客
08-13 2963
2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值