首页 > web前端 > js教程 > 正文

JQuery实现简单的图片滑动切换特效_jquery

WBOY
发布: 2016-05-16 15:30:47
原创
944 人浏览过

JQuery实现简单的图片滑动切换特效

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>t图片的滑动</title>
  <meta charset="utf-8" />
  <style type="text/css" >
    *{
      margin:0;
      padding:0;

    }
    #main{
      width:1089px;
      height:360px;
      margin:100px;
      background:url(../image/7.png);
    }
    ul li{
      list-style:none ;
      width:100px;
      height:360px;
      float:left;
    }
    a{
      color:#ffffff;
      text-decoration:none;
    }
    .txt{
      width:100px;
      height:360px;
      float:left;
      background:rgb(182, 255, 0);
    }
    p{
      font-family :"Arial.black",Gadugi.sans-serif ;
      font-size:18x;
      position:relative ;
      width:18px;
      font-weight:bold ;
      margin-top :120px;
      margin-left:48px;
    }
    .li1 {
      background: url( ../image/43.png);
    }
    .li2{background: url( ../image/42.png);}
    .li3{background: url( ../image/39.png);}
    .li4{background: url( ../image/47.png);}
  </style>
  
</head>
<body>
  <div id="main">
    <ul>
      <li class=" li1"><a href=" #"><div class=" txt"><p>风景1</p></div></a></li>
      <li class=" li2"><a href=" #"><div class=" txt"><p>风景2</p></div></a></li>
      <li class=" li3"><a href=" #"><div class=" txt"><p>风景3</p></div></a></li>
      <li class=" li4"><a href=" #"><div class=" txt"><p>风景4</p></div></a></li>
    </ul>
  </div>
  <script type="text/javascript" src="../Jqurey/jquery.min.js"></script>
  <script >
    $('ul li').hover(function(){
      $(this).stop(true).animate({ width: '789px' }, 500).siblings().stop(true).animate({width:'100'},500);
    })
  </script>
</body>
</html>

登录后复制

jQuery图片从下往上滚动效果是一款jquery animate方法制作的图片从下往上滚动效果。

<!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实现图片从下往上滑动切换效果</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.box .box1').mouseover(function(){
		$(this).stop().animate({"top":"-514px"}, 200); 
	})
	$('.box .box1').mouseout(function(){
		$(this).stop().animate({"top":"0"}, 200); 
	})
})
</script>

</head>
<body>

<div id="in_ct">
<!----------in_ct开始---------->
	<div class="in_ct">	
 	<!----------in_ct1 开始---------->
   <div class="in_ct1">
   	<ul class="box">
     <li>
      <div class="box1">
       <div class="toll_img"><img  src="images/in_img1.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="JQuery实现简单的图片滑动切换特效_jquery" ></div>
       <div class="toll_info"><a href="" target="_blank"><img  src="images/in_img1_ho.jpg"    style="max-width:90%"  style="max-width:90%" / alt="JQuery实现简单的图片滑动切换特效_jquery" ></a></div>
      </div>
     </li>
     <li>
      <div class="box1">
       <div class="toll_img"><img  src="images/in_img2.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="JQuery实现简单的图片滑动切换特效_jquery" ></div>
       <div class="toll_info"><a href="" target="_blank"><img  src="images/in_img2_ho.jpg"    style="max-width:90%"  style="max-width:90%" / alt="JQuery实现简单的图片滑动切换特效_jquery" ></a></div>
      </div>
     </li>
     <li>
     	<div class="box1">      
       <div class="toll_img"><img  src="images/in_img3.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="JQuery实现简单的图片滑动切换特效_jquery" ></div>
       <div class="toll_info"><a href="" target="_blank"><img  src="images/in_img3_ho.jpg"    style="max-width:90%"  style="max-width:90%" / alt="JQuery实现简单的图片滑动切换特效_jquery" ></a></div>
      </div>
     </li>
     <li>
     	<div class="box1">
       <div class="toll_img"><img  src="images/in_img4.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="JQuery实现简单的图片滑动切换特效_jquery" ></div>
       <div class="toll_info"><a href="" target="_blank"><img  src="images/in_img4_ho.jpg"    style="max-width:90%"  style="max-width:90%" / alt="JQuery实现简单的图片滑动切换特效_jquery" ></a></div>
      </div>
     </li>
    </ul> 
   </div>
  <!----------in_ct1 结束---------->
	</div>
<!----------in_ct结束---------->
</div>
</body>
</html>
登录后复制

上演示图

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板