169it科技资讯
169it -->


当前位置:  编程技术>jquery

jquery 淡入淡出效果入门例子

    来源: 互联网  发布时间:2014-10-09

例子,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" xml:lang="zh" lang="zh" dir="ltr"> 
<head>   
    <mce:script type="text/javascript" src="jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script> 
    <title>淡入淡出效果-www.</title> 
</head> 
<body> 
<button id="click">click</button> 
<ul id="ul"> 
<li>#</li> 
<li>@</li> 
<li>$</li> 
</ul> 
<mce:script type="text/javascript"><!-- 
$(function () { 
    var _num = 1; 
    $("#click").click(function () { 
        var _ul = $("#ul"); 
        var _li = $("#ul li"); 
        var _len = _li.length; 
        var _str = "<li mce_>" + _num + "</li>"; 
        _li.eq(_len-1).fadeOut('slow',function () { 
            $(this).remove(); 
        }); 
        ++_num; 
        $(_str).prependTo(_ul).fadeIn('slow');       
    });  
}); 
// --></mce:script>     
</body> 
</html> 

    
相关技术文章:
    ▪jQuery实现首页图片淡入淡出效果

     当当网的品牌店铺经过一个星期的设计和制作,昨天终于全部上线了。 在完成过程中,主要遇到的问题是首页的图片的轮转效果。 效果:http://static.dangdang.com/gm/topic/2270_181320.shtml 需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML:   代码示例: <div id="carousel">      <div id="carouselimg" class="content_top">  <div id="imgcontainer" class="slide_panel">      <a target="_blank" href="http://www.baidu.com" mce_href="http://www.baidu.com">&l......


    ▪jquery自动切换淡入淡出效果的例子

     例子,jquery淡入淡出效果代码。   代码示例: <!DOCTYPE html> <html> <head> <title>jquery自动切换淡入淡出效果_www.</title> <style type="text/css"> .slideshow { height: 232px; width: 232px; margin: auto } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } </style> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.......


    ▪jquery实现添加图片淡入淡出效果的代码

     例子,jquery图片淡入淡出效果。   代码示例: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"  "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <title>图片淡入淡出-www.yuju100.com</title>  <script type="text/javascript" language="javascript" charset="utf-8" src="jquery-1.4.2.min.js">  // <![cdata[    // ]]>  </script>  <script type="text/javascript" language="javascript" charset="utf-8">  // &......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号