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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery淡入淡出效果_www.</title>
<meta http-equiv=x-ua-compatible content=ie=emulateie7>
</head>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<style type="text/css">
.box{ margin:auto 0; width:302px; height:auto; background:#ccc; text-align:left;}
.box_son{ float:left;width:100px; height:100px; background:#999; margin-top:1px; text-align:center; line-height:100px; overflow:visible;_overflow:hidden; }
.box_son_son{ float:left;width:0; height:100px; background:#567fd0; position:relative; left:101px; top:-100px;filter:alpha(opacity=36); opacity:0.36; text-align:center; line-height:100px; text-align:center;display:none;}
.test{ width:100px; height:100px; }
.ml{ margin-left:1px;}
span{float:left;width:100px; height:100px; cursor: pointer;}
{padding:1px;padding:10px;}
</style>
<body>
<script type="text/javascript">
$(document).ready(function(){
    $(".box_son span").hover(function(){
        $(this).next(".box_son_son:not(:animated)").animate({opacity: "show", width: "+=201px"}, "slow",function(){
            $(".box_son_son").css({ opacity: 0.36 });
        });
    });
    $(".box_son span").mouseout(function(){   
        $(this).next(".box_son_son").animate({opacity: "hide", width: "0"}, "500");
    });
});
</script>
<center>
<div >
<div ><span>图</span><div >jquery</div></div>
<div ><span>图</span><div >jquery</div></div>
<div ><span>图</span><div >jquery</div></div>

<div ><span>图</span><div >jquery</div></div>
<div ><span>图</span><div >jquery</div></div>
<div ><span>图</span><div >jquery</div></div>
</div>
</center>
</body>
</html>

您可能感兴趣的文章:
  • jquery图片淡入淡出与图片切换效果的例子
  • jquery实现添加图片淡入淡出效果的代码
  • jQuery实现首页图片淡入淡出效果
  • jquery图片淡入淡出效果的例子
  • jquery怎么实现图片淡入淡出?示例
  • jquery图片淡入淡出效果的简单示例
  • javascript 图片淡入淡出效果实例代码

    
相关技术文章:
    ▪jQuery打印图片、pdf与txt的例子

     jQuery打印图片pdf、txt方法示例 例子:   代码示例: <div style="display:none"> <div id="to_print"></div> <input type="button" id="print_button" value="Print" onclick="document.getElementById('FILEtoPrint').focus(); document.getElementById('FILEtoPrint').contentWindow.print();" /> </div> <script> function printSome(path){ //传入文件路径 $("#to_print").html('<iframe src='+path+' id="FILEtoPrint"></iframe>'); setTimeout(function(){$("#print_button").click();}, 500); } // www. </script> 使用方法: ......


    ▪jQuery如何获取节点与子节点文本?

     jQuery如何获取节点与子节点文本? 对于html片段,   <div id="text_test">test text<a href="techbrood.com" rel="external nofollow" >techbrood co.</a></div> 获取节点纯文本:   代码示例: var text = $('#text_test').text() 得到“test text techbrood co.”,会把当前元素的所有节点(包含子节点)的文本读取出来。 只获取主节点的文本,方法复杂点:   代码示例: var text = $("#text_test").contents().filter(function() { return this.nodeType === 3; })......


    ▪php与jcrop图片裁剪插件实现图片裁切的例子

     php与jcrop图片裁剪插件实现图片裁切 介绍一款专用于图片裁切的插件jquery.Jcrop.min.js实现图片剪切。 使用这个插件可以实现图片裁剪功能,使用时仅需鼠标在图片上圈选出选区,即可把图片裁切成所选部分,非常适合用于头像的裁切编辑功能。 本实例演示分为html和php两部分: 1,html代码:   代码示例: <!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>Jcrop实现图片裁剪_www.</ti......


 
最新技术文章:
    ▪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-2015,169IT.COM,站长邮箱:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号