최근에 업데이트되지 않았으므로 강화하기 위해 몇 가지 효과를 추가하겠습니다.
그들 중 누구도이 단계를 아름답게하지 않습니다.
순수한 CSS 아코디언 :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 아코디언 css </title> <style> .showbox {width : 660px; 오버플로 : 숨겨진; } ul {목록 스타일 : 없음; 여백 : 0; 패딩 : 0; 너비 : 30000px; } ul li {float : 왼쪽; 위치 : 상대; 높이 : 254px; 너비 : 110px; 오버플로 : 숨겨진; 전환 : 모든 0.3 초; } /*이것은 CSS 아코디언의 핵심입니다. 이것은 우선 호버의 사용 ** 우선, UL : UL을 통과했지만 UL **를 통해 전달 된 변경 사항을 유발하는 변경 사항을 통해 UL ** : Hover는 LIB를 통해 전달 된 변경 사항과 CSS3의 애니메이션 효과와 CSS3의 일부 효과와 일치시킬 수 있습니다. Pure JS 구현을 사용하는 경우 문제가 될 수 있습니다. */ ul : 호버 리 {너비 : 22px; } ul li : 호버 {너비 : 460px; } ul li img {너비 : 550px; 높이 : 254px; } ul li span {너비 : 22px; 위치 : 절대; 상단 : 0; 오른쪽 : 0; 높이 : 204px; 패딩 탑 : 50px; 색상 : #fff; } ul li span.bg1 {배경 : #333; } ul li span.bg2 {배경 : #0f0; } ul li span.bg3 {배경 : #ff7500; } ul li span.bg4 {배경 : #0ff; } ul li span.bg5 {배경 : #00f; } </style> <script type = "text/javaScript"> </script> </head> <lody> <li> <li> <pan> 이것은 첫 번째 </span> <img src = "1.jpg"> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> 세 번째 </span> <img src = "3.jpg"> </li> <li> <span> 이것은 네 번째 </span> <img src = "4.jpg"> </li> <li> <span> 이것이 다섯 번째 </</jpg "> </li> </ul> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html>CSS3 아코디언 :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css3-Checked : </title> <style>/* 라디오의 단일 선택 기능을 사용하여 아코디언 효과를 달성하십시오*/ul {display : 없음; } input {display : none;} label {display : block; 라인 높이 : 40px; 국경-바닥 : 1px solid #ddd; 커서 : 포인터; 글꼴 크기 : 15px; 글꼴 중량 : Bold;} .list> ul {display : none; -webkit-transition : 모든 .5S 선형; -Moz-transition : 모든 .5S 선형; -ms-transition : 모든 .5S 선형; -o-transition : 모든 .5S 선형; 전환 : 모든 .5s 선형;} #list1 : checked + ul {display : block;} #list2 : checked + ul {display : block;} #list3 : checked + ul {display : block;} #list4 : checked + ul {diviv : list1 ""> </label> <inpute = ""> 이름 = "list"id = "list1"checked = "chekced"/> <ul> <li> <a href = ""> classmate name </a> </li> </li> <a href = "" "> classmate name </a> <li> <a href ="> Classmate name </a> <li> <a href = "" "" "" "" ". <li> <a href = ""> Classmate name </a> </a> </li> <li> <a href = ""> classmate name </a> </li> <a href = "" "> classmate name </a> </li> <li> <a href =" "> Classmate name </a> <li> <a href =" "" "" "" "". <li> <a href = ""> Classmate name </a> </a> </li> <li> <a href = ""> classmate name </a> </li> <a href = "" "> classmate name </a> </li> <li> <a href =" "> classmate name </a> <li> <a href ="> href = "" "" "" "" "". <li> <a href = ""> Classmate의 이름 </a> </a> </li> <li> <a href = ""> Classmate의 이름 </a> </a> </li> </ul> <label </ul> < "list3"> my classmate> <input type = "radio"list "id ="list3 "/> <li> <a href =" "" "" "" "" "". <li> <a href = ""> 반 친구의 이름 </a> </a> </li> <li> <a href = ""> 반 친구의 이름 </a> </a> </li> <li> <a href = "" "> Classmate의 이름 </a> </li> <li> <a href =" "> Classmate 's Name </a> <li> <a href =" ""> 이름 </a> </li> <li> <a href = ""> Classmate의 이름 </a> </li> </ul> <레이블 "list4"> my classmate </label> <input type = "radio"name = "list"id = "list4"/> <ul> <li> <a href = ""classmate </a> <li> <a. href = ""> classmate </a> </a> </li> <li> <a href = ""> classmate </a> </a> </li> <li> <a href = ""> classmate </a> </a> </li> <li> <a href = ""> classmate </a> </li> </body> </html>자바 스크립트에 의해 구현 된 아코디언 :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 아코디언 </title> <style> .showbox {너비 : 660px; 오버플로 : 숨겨진; } ul {목록 스타일 : 없음; 여백 : 0; 패딩 : 0; 너비 : 30000px; } ul li.Active {너비 : 550px; } ul li {float : 왼쪽; 위치 : 상대; 높이 : 254px; 너비 : 22px; 오버플로 : 숨겨진; } ul li img {너비 : 660px; 높이 : 254px; } ul li span {너비 : 22px; 위치 : 절대; 상단 : 0; 왼쪽 : 0; 높이 : 204px; 패딩 탑 : 50px; } ul li span.bg1 {배경 : #333; } ul li span.bg2 {배경 : #0f0; } ul li span.bg3 {배경 : #ff7500; } ul li span.bg4 {배경 : #0ff; } ul li span.bg5 {배경 : #00f; }. }; 함수 createAccordion (name) { /*get element* / var odiv = document.querySelector (이름); /*최소 너비 선언*/ var iminwidth = 9999999; /*get 요소*/ var ali = odiv.getElementsByTagName ( 'li'); var aspan = odiv.getElementsByTagName ( 'span'); /*타이머 컨테이너 기본값*/ odiv.timer = null; /*루프 추가 이벤트 및 사용자 정의 속성 색인 값*/ for (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onmouseover = function () {gotoimg (odiv, this.index, iminwidth); }; /*최소 폭 }}; 함수 gotoimg (odiv, iindex, iminwidth) {if (odiv.timer) { /*오버레이를 피하기 위해 타이머를 지우십시오* / clearinterval (odiv.timer); } /*타이머를 엽니 다* / odiv.timer = setInterval (function () {changeWidThinner (odiv, iindex, iminwidth);}, 30); } /*이것은 키, 모션* / 함수 ChangeWidThinner (odiv, iindex, iminwidth) {var ali = odiv.getElementsByTagName ( 'li')입니다. var aspan = odiv.getElementsByTagName ( 'span'); /*상자의 크기를 얻으십시오. 이것은 총 너비입니다*/ var iwidth = odiv.offsetWidth; /*압축 된 그림의 너비 선언*/ var w = 0; /*타이머 선언을 지우기 위해 판단 선언*/ var bend = true; /*각 이미지를 반복하여 확장 및 수축 요소를 얻기 위해*/ for (var i = 0; i <ali.length; i ++) {/*확장 인덱스를 얻는 것입니다*/ if (i == iindex) {계속; } /*변경 사항이없는 요소가 있으므로 최소 너비가 저장됩니다* / if (iminwidth == ali [i] .offsetWidth) { /*총 너비는 총 폭* / iwidth- = iminwidth이기 때문에이 폭을 빼냅니다. 계속하다; } /*다음 루프의 코드는 감소 된 요소입니다* / /*타이머를 지우지 않으며 연습을 마치지 않았습니다* / bend = false; / *속도를 먼저하고 속도를 먼저 다음 느리게받습니다 */speed = math.ceil ((ali [i] .offsetwidth-iminwidth)/10); /*나머지 너비를 줄입니다*/ w = ali [i] .offsetWidth-speed; /*수축 요소가 최소 너비보다 작지 않기 위해*/ if (w <= iminwidth) {w = iminwidth; } /*수축 요소의 너비를 설정* / ali [i] .style.width = w+'px'; /*수축 너비를 빼면 나머지 너비는 확장 너비*/ iwidth- = w; } /*확장 요소의 너비* / ali [iindex] .style.width = iwidth+'px'; if (bend) {clearinterval (odiv.timer); ODIV.TIMER = NULL; }}} </script> </head> <body> <li> <li> <li> <li> <li> <li> <li> <li> <li> <mg src = "1.jpg"> </li> <li> <span> 이것은 두 번째 </<img src = "2.jpeg"> </li> <li> <li> <li> </li> </li> </li>입니다. <li> <span> 이것은 네 번째 </span </span> <img src = "4.jpg"> </li> <li> <span> 이것이 다섯 번째 </span> <img src = "5.jpg"> </li> </ul> </div> </html>입니다.다음은 모션을 캡슐화하기 위해 애니메이션 효과를 사용하는 것입니다.
/*통화, obj 객체, attr 속성, 속도 속도, ItArget가 달성하고자하는 값, fn 콜백 함수*//*이동은 기본적으로 PX 단위에 있기 때문에 투명성과 같이 단위가 없으므로 여기서 분리합니다. 사실, 나는 그것을 많이 바꾸지 않았고, 투명성 속성인지 판단 한 다음 투명도 라인*/ function domove (obj, attr, speed, itarget, fn) {if (att } else {obj.len = itarget-parsefloat (getStyle (obj, "불투명도")); } /*여기의 방향은 판단됩니다. 초기 지점 이후의 것은 음수이고 초기 지점 이전의 것은 양수*/ speed = obj.len> 0? 속도 : -speed; ClearInterval (obj.timer); obj.timer = setInterval (function () {if (! obj.num) {obj.num = 0;} if (att 타이머가 도착했을 때*/ if (obj.num> = itarget && obj.len> 0 || itarget && obj.len <0) {itarget (obj.timer); obj.style [attr] = obj.num+"px"} /*콜백 함수의 완전한 기능을 실현할 수 없기 때문에* / if (obj.num> = itarget && obj.len> 0 || } /*CSS 속성 값을 얻으면 성능 값을 얻게됩니다* / function getStyle (obj, attr) {return obj.currentStyle? obj.currentStyle [attr] : getComputedStyle (attr]; }회전 목마 이미지 :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 회전식 다이어그램 </title> <!-이것은 캡슐화 된 모션 기능에 대한 참조입니다-> <script type = "text/javascript"src = "domove.js"> <text/javascript "> Window.onload = function () { /*회전 목마를 구현하려면 호출* / carousel ( "carousel")} function carousel (name) {var oscl = document.getElementById (name); var oul = oscl.querySelector ( "ul"); var ali = oul.querySelectorall ( "li"); var next = document.getElementById ( "Next"); var pre = document.getElementById ( "pre"); var aindex = oscl.querySelectorALL ( ". 색인 범위"); var num = 0; var index = 0; /*첫 번째 그림의 최고 수준을 제공*/ ali [0] .style.zindex = 5; /*타이머가 존재하는지 판단*/ if (! oscl.timer) {oscl.timer = null; } /*이것은* / oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000)의 자동 회전식입니다. /*상단 및 하단 페이지에 표시하고 숨기십시오*/ oscl.onMouseOver = function () {/*정지 타이머에서 이동*/ clearInterVal (oscl.timer); 다음 .style.display = "블록"; pre.style.display = "블록"; } oscl.onmouseout = function () {next.style.display = "none"; pre.style.display = "none"; /*타이머에서 이동*/ oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); } /*이전 및 다음 페이지를 클릭하십시오* / next.onclick = function () {num ++; num%= ali.length; 놀다(); } pre.onClick = function () {if (! ali [index]) {index = num; } num-; if (num <0) {num = ali.length-1; } 놀다(); } /*색인 포인트* / for (var i = 0; i <aindex.length; i ++) {aindex [i] .index = i; aindex [i] .onmouseover = function () {num = this.index; 놀다(); }} /*애니메이션 실행 함수* /function play () { /*인덱스 지점의 두 이동이 동일하는 것과 같은 동일한 트리거 포인트인지 확인하십시오. 실행되지 않으면 반복적 인 실행을 지속적으로 피하십시오*/ if (index! = num) {for (var i = 0; i <ali.length; i ++) {/*모든 레벨을 1*/ ali [i] .style.zindex = 1으로 설정하십시오. } /*마지막 회전 목마의 레벨을 2* / ali [index] .style.zindex = 2로 설정합니다. aindex [index] .className = ""; aindex [num] .classname = "active"; 색인 = num; /*이 회전 목마 그림의 투명성을 0*/ ali [num] .style.opacity = 0으로 설정합니다. /*회전 목마 인 그림의 레벨을 5*/ ali [num] .style.zindex = 5로 설정합니다. /*동작 함수 캡슐화,이 그림에서 페이드*/ domove (ali [num], "불투명도", 10,100); }}} </script> <style> a {텍스트-결정 : 없음; 색상 : #555; } #carousel {Font-Family : "Microsoft Yahei"; 위치 : 상대; 너비 : 800px; 높이 : 400px; 여백 : 0 Auto; } #carousel ul {목록 스타일 : 없음; 여백 : 0; 패딩 : 0; 위치 : 상대; } #carousel ul li {위치 : 절대; z- 인덱스 : 1; 상단 : 0; 왼쪽 : 0; } .imgbox img {너비 : 800px; 높이 : 400px; } .btn {위치 : 절대; z- 인덱스 : 10; 상단 : 50%; 너비 : 45px; 높이 : 62px; 마진 -탑 : -31px; 텍스트 정렬 : 센터; 라인 높이 : 62px; 글꼴 크기 : 40px; 배경 : RGBA (0,0,0,0.4); 불투명도 : 알파 (불투명도 = 50); 디스플레이 : 없음; } #pre {왼쪽 : 0; } #next {오른쪽 : 0; } #carousel .index {위치 : 절대; 하단 : 10px; 왼쪽 : 50%; z- 인덱스 : 10; } #carousel .index span {너비 : 15px; 높이 : 15px; 국경-라디우스 : 50%; 배경 : #87cefa; 디스플레이 : 인라인 블록; Box-Shadow : 1px 1px 6px #4169e1; } #carousel .index span.active {배경 : #4169e1; Box-Shadow : 1px 1px 6px #87cefa 삽입; . src = "2.jpg"> </a> </a> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> </a> <li> <a href = "<img src = "5.jpg"> </a> </li> </ul> <a href = "javaScript :;" id = "next">> </a> <a href = "javaScript :;" id = "pre"> <</a> <div> <span> </span> <span> </span> </span> </span> </span> <span> </span> <span> </span> </div> </div> </body> </html>이것은 플러그인 : responsiveslides.js를 사용하여 수행됩니다
jQuery를 기반으로합니다
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> <!-플러그인 및 jquery 소개 js and jquery-> <script src = "jquery-2.0.3.js"> </script> <scripl src = </script> <scrips "> 위치 : 상대; 너비 : 800px; } /* 플러그인의 기본 CSS 속성* / .rslides {위치 : 상대; 목록 스타일 : 없음; 오버플로 : 숨겨진; 너비 : 100%; 패딩 : 0; 여백 : 0; } .Rslides li {-webkit-backface-visibility : Hidden; 위치 : 절대; 디스플레이 : 없음; 너비 : 100%; 왼쪽 : 0; 상단 : 0; } .RSLIDES LI : 일 자녀 {위치 : 상대; 디스플레이 : 블록; 플로트 : 왼쪽; } .rslides img {display : block; 높이 : 자동; 플로트 : 왼쪽; 너비 : 100%; 국경 : 0; } /*, 수정, 도트 버튼으로 수정* / ul.rslides_tabs.rslides1_tabs {위치 : 절대; 하단 : 10px; 왼쪽 : 45%; 목록 스타일 : 없음; z- 인덱스 : 10; } ul.rslides_tabs.rslides1_tabs li {float : 왼쪽; } ul.rslides_tabs.rslides1_tabs li a {display : block; 국경-라디우스 : 50%; 너비 : 10px; 높이 : 10px; 마진 오른쪽 : 10px; 배경 : #fff; } / * .rslides_here 이것은 active * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {background : #004f88; } /* 왼쪽 및 오른쪽 버튼의 클래스 이름* / .rslides_nav.rslides1_nav {위치 : 절대; 상단 : 50%; 색상 : #eee; 글꼴 크기 : 40px; 텍스트 결정 : 없음; Z- 인덱스 : 4; } .rslides_nav.rslides1_nav.pre {왼쪽 : 10px; } .rslides_nav.rslides1_nav.next {오른쪽 : 10px; } .rslides img {높이 : 400px; }. PAUSECONTROLS : // 부울 : 컨트롤을 호버링 할 때 일시 중지, true 또는 false prevtext : "<", // 왼쪽 및 오른쪽 버튼의 기호를 수정합니다. ">", // 문자열 : "maxWidth": "800px"}; " $ ( "#banner"). mouseover (function () {$ ( ". rslides1_nav"). css ( "display", "block");}) $ ( "#banner"). mouseout (function () {$ ( ". rslides1_nav"). css ( "display", "none")); </script> </head> <body> <!-DIV를 사용하여 랩핑하면 JS가 추가 한 태그는 UL 태그 바로 뒤에로드됩니다 .-> <div id = "배너"> <ul id = "rslides"> <li> <img src = "111.jpg"> </li> <li> <lig src = "222.jpg"> src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </html>이미지 슬라이드 :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 이미지 슬라이딩 </title> <style> .Container {위치 : 상대; 너비 : 630px; 국경 : 2px Solid #888; 패딩 : 5px; } .c- 랩 {너비 : 630px; 오버플로 : 숨겨진; } .Container img {너비 : 200px; 높이 : 90px; } .Container UL {List-Style : 없음; 여백 : 0; 패딩 : 0; } .Container ul Li {float : 왼쪽; 마진 오른쪽 : 10px; } .Container .imgbigbox {너비 : 33000px; 마진 왼쪽 : 0px; } .imgbigbox : {content : ""이후; 디스플레이 : 블록; Clear : 둘 다; } .btngroup {테두리 : 1px solid #888; 너비 : 65px; } .btngroup a {text-align : center; 라인 높이 : 20px; 텍스트 결정 : 없음; 색상 : #888; 글꼴 크기 : 20px; 디스플레이 : 인라인 블록; 너비 : 30px; } .btn1 {마진 오른쪽 : 4px; 경계 오른쪽 : 1px 솔리드 #888; } </style> <!-모션 함수 인용-> <script type = "text/javaScript"src = "domove.js"> </script> <script type = "text/javaScript"> window.onload = function () {/*슬라이딩을 달성하기위한 함수 호출*/slide ( ". 컨테이너"); } 함수 슬라이드 (이름) {var ocontainer = document.querySelector (이름); var oimgbigbox = ocontainer.querySelector ( ". imgbigbox"); var abtn = ocontainer.querySelectorall ( ". btngroup a"); var oc_wrap = ocontainer.querySelector ( ". c- 랩"); /*슬라이딩 너비를 가져옵니다*/ var w = oc_wrap.offsetWidth; /*왼쪽 버튼을 클릭하십시오*/ abtn [0] .onclick = function () {domove (oimgbigbox, "marginleft", 10, -w, function () {var child = oimgbigbox.children [0] .Clonenode (true); oimgbigbox.appendChild (hix); oimgbigbox.removechild (oimgbigbox.children [0]); oimgbigbox.insertbefore (oimgbigbox.children [1], oimgbigbox.children [0]); oimgbigbox.style.marginleft = -w+"px"; domove (oimgbigbox, "marginleft", 10,0)}}} </script> </head> <body> <div> <div> <ul> <li> <img src = "1.jpg"> </li> <li> <img src = "2.jpg"> <li> <img src = 3.jpg "> </li> <img src =. <ul> <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> <div> <a href = "javascript :;"</a> </div> </body> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.