jquery는 이미지 슬라이딩 전환을 구현합니다(코드 포함).

php中世界最好的语言
풀어 주다: 2018-04-24 10:48:14
원래의
3924명이 탐색했습니다.

이번에는 이미지 슬라이딩 전환을 구현하는 jquery를 소개하겠습니다.(코드 포함) jquery에서 이미지 슬라이딩 전환을 구현하는 데 필요한 주의사항은 무엇인가요?

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>
  <p id="main">
    <ul>
      <li class=" li1"><a href=" #"><p class=" txt"><p>风景1</p></p></a></li>
      <li class=" li2"><a href=" #"><p class=" txt"><p>风景2</p></p></a></li>
      <li class=" li3"><a href=" #"><p class=" txt"><p>风景3</p></p></a></li>
      <li class=" li4"><a href=" #"><p class=" txt"><p>风景4</p></p></a></li>
    </ul>
  </p>
  <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>
<p id="in_ct">
<!----------in_ct开始---------->
	<p class="in_ct">	
 	<!----------in_ct1 开始---------->
   <p class="in_ct1">
   	<ul class="box">
     <li>
      <p class="box1">
       <p class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
     <li>
      <p class="box1">
       <p class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
     <li>
     	<p class="box1">      
       <p class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
     <li>
     	<p class="box1">
       <p class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></p>
       <p class="toll_info"><a href="" target="_blank"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></p>
      </p>
     </li>
    </ul> 
   </p>
  <!----------in_ct1 结束---------->
	</p>
<!----------in_ct结束---------->
</p>
</body>
</html>
로그인 후 복사

위의 데모 사진

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jquery miniui 테이블 제어 및 병합 셀 구현 방법

jquery 오버레이 3D 텍스트 방법 구현에 대한 자세한 설명

위 내용은 jquery는 이미지 슬라이딩 전환을 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿