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