169it科技资讯


当前位置:  编程技术>jquery

jquery背景图淡入淡出效果示例代码

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

先来看下背景图淡入淡出的原理:
通过一个两张不同的图片,两个不同的层重叠在一起,顶层暂时透明,当鼠标移上去时,顶层由透明变成不透明,鼠标离开反之。

下面来看jquery实现背景图片淡入淡出效果的具体例子,一起学习下。

1,html部分:
 

代码示例:
<a id="logo" href="">
<span>语句百分网</span></a>

2,css代码:
 

代码示例:
#logo{
  margin:0 auto;
  position:relative;/*相对定位,为了下面hover的绝对定位*/
  background:url(fatkun.png) left top no-repeat;/*设置背景图*/
  width:150px;
  height:40px;/*注意这里高度*/
  display:block;
  text-indent:-9999px;
 }
 #logo .hover{/*为jq准备*/
  background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
  position:absolute;/*为了使两张图片重叠在一起*/
  top:0;
  left:0;
  height:40px;
  width:150px;
 }

3,jquery代码
 

代码示例:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  $("#logo").append("<span ></span>");//添加一个标签用来和灰图重叠起来
  $(".hover").css('opacity', 0);//先不显示
     $(".hover").parent().hover(
  function(){
   $(".hover").stop().animate({opacity: '1'},1000);
  },
  function(){
   $(".hover").stop().animate({opacity: '0'},1000);
  });
    </script>

4,完整实例
 

代码示例:
<!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.yuju100.com</title>
<style type="text/css">
 body{
  padding-top:100px;
  text-align:center;
 }
 #logo{
  margin:0 auto;
  position:relative;/*相对定位,为了下面hover的绝对定位*/
  background:url(fatkun.png) left top no-repeat;/*设置背景图*/
  width:150px;
  height:40px;/*注意这里高度*/
  display:block;
  text-indent:-9999px;
 }
 #logo .hover{/*为jq准备*/
  background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
  position:absolute;/*为了使两张图片重叠在一起*/
  top:0;
  left:0;
  height:40px;
  width:150px;
 }
</style>
</head>
<body>
 <a id="logo" href="http://yuju100.com"><span>yuju100.com</span></a>
    yuju100.com
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
  $("#logo").append("<span ></span>");//添加一个标签用来和灰图重叠起来
  $(".hover").css('opacity', 0);//先不显示
     $(".hover").parent().hover(
  function(){
   $(".hover").stop().animate({opacity: '1'},1000);
  },
  function(){
   $(".hover").stop().animate({opacity: '0'},1000);
  });
    </script>
</body>
</html>

    
相关技术文章:
    ▪jquery怎么实现图片淡入淡出?示例

     用jquery实现淡入淡出效果非常方便,这里我们使用slideUp与slidDown来实现jquery图片淡入淡出,一起学习下。 例子,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>图片淡入淡出效果_www.</title>  <script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">  ......


    ▪jquery文字淡入淡出效果代码

     例子,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.yuju100.com</title>  <script type="text/javascript" language="javascript" src="./jquery-1.7.1.min.js">  </script>  <script language="javascript">  $(document).ready(function(){      $("#btn......


    ▪jquery图片淡入淡出效果的例子

     用jquery实现淡入淡出效果,多是使用toggle、slideUp、slideDown这些方法来实现的,来看下面这个例子吧。 例子,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>图片的淡入淡出-www.yuju100.com</title> <script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"> </sc......


 
最新技术文章:
    ▪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号