JQuery 그림 스크롤 윤방 코드 공유
6073 단어 jquery
코드:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> -JQuery -www.jbxue.com</title>
5 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
6 <script type="text/javascript" >
7 var num = 0
8 $(function(){
9 $("div ol li").mouseover(function(e){
10 $(this).attr("class","current");
11 $(this).siblings().attr("class",""); // class
12 //alert($('ul').index())
13 num = $('ul').index() + 2
14 var index = $(this).index(); // li ul
15 // ， z-index
16 $("div ul li").eq(index).css({"left":"650px","zIndex":num})
17 $("div ul li").eq(index).siblings().css("zIndex",num-1);
18 // ，
19 $("div ul li").eq(index).animate({left:"0"},500)
20
21 });
22
23 });
24 </script>
25 <style type="text/css">
26 *{margin: 0px;padding: 0px;border: 0px;}
27 ul,ol{list-style: none;}
28 .all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;}
29 .all ul{position: relative;z-index: 1;position: relative;}
30
31 /* */
32 .all ul li{position: absolute;left: 0;top: 0px;}
33
34 .all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;}
35 .all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:
36 bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}
37
38 .all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;
39 cursor: pointer;}
40 </style>
41 </head>
42 <body> （ www.jbxue.com）
43 <div class="all">
44 <ul>
45 <li><img src="src/1.jpg" /></li>
46 <li><img src="src/2.jpg" /></li>
47 <li><img src="src/3.jpg" /></li>
48 <li><img src="src/4.jpg" /></li>
49 </ul>
50 <ol>
51 <li class="current">1</li>
52 <li>2</li>
53 <li>3</li>
54 <li>4</li>
55 </ol>
56 </div>
57 </body>
58 </html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
