English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
최근에는 업데이트가 없었기 때문에, 몇 가지 효과를 추가하여 채우겠습니다.
미니멀리즘 단계는 모두 생략했습니다.
pure css의악보:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>악보 css</title>
<style>
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li{
float: left;
position: relative;
height: 254px;
width: 110px;
overflow: hidden;
transition: all 0.3s;
}
/* 이 css 악보의 핵심은 hover의 사용입니다
**먼저 ul:hover li는 ul을 거쳐가지만 li를 거쳐가지 않는 변화를 일으킵니다
**그런 다음 ul li:hover는 거쳐간 li의 변화로, css와 일치합니다3애니메이션 효과를 사용하여
와 css3의 몇 가지 페이지 미니멀리즘 효과를 사용하여 매우 잘 보이는 악보를 만들 수 있습니다
pure js로 구현하면 복잡할 수 있습니다.
*/
ul:hover li{
width:22px;
}
ul li:hover{
width: 460px;
}
ul li img{
width: 550px;
height: 254px;
}
ul li span{
width: 22px;
position: absolute;
top: 0;
right: 0;
height: 204px;
padding-top: 50px;
color: #fff;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
</script>
</head>
body>
<div class="showBox">
<ul>
<li><span class="bg1">이는 첫 번째 </span><img src="1.jpg" alt=""></li>
<li><span class="bg2">이는 두 번째 </span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">이는 세 번째 </span><img src="3.jpg" alt=""></li>
<li><span class="bg4">이는 네 번째 </span><img src="4.jpg" alt=""></li>
<li><span class="bg5">이는 다섯 번째 </span><img src="5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
css3악보:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-checked:</title>
<style>
/* radio 단추의 선택 특성을 사용하여 악보 효과를 구현했습니다 */
ul{
display: none;
}
input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}
</style>
</head>
body>
<div> <label for="list1">제 친구</label> <input type="radio" name="list" id="list1" checked="checked"/>
<ul> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> </ul> <label for="list2">제 친구</label>
<input type="radio" name="list" id="list2"/>
<ul> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> </ul> <label for="list3">제 친구</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> </ul> <label for="list4">제 친구</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> <li><a href="">동료 이름</a>/li> </ul> </div>
</body>
</html>
자바스크립트로 구현된 필리폰:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>필리폰</title>
<style>
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li.active{
width: 550px;
}
ul li{
float: left;
position: relative;
height: 254px;
width: 22px;
overflow: hidden;
}
ul li img{
width: 660px;
height: 254px;
}
ul li span{
width: 22px;
position: absolute;
top: 0;
left: 0;
height: 204px;
padding-top: 50px;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
createAccordion('.showBox');
};
function createAccordion(name)
{
/*요소를 가져옵니다*/
var oDiv=document.querySelector(name);
/*최소 너비를 선언합니다*/
var iMinWidth=9999999;
/*요소를 가져옵니다*/
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);
};
/*최소 너비를 가져옵니다*/
iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
}
};
function gotoImg(oDiv, iIndex, iMinWidth)
{
if(oDiv.timer)
{ /*타이머를 지우고 중복을 피합니다*/
clearInterval(oDiv.timer);
}
/*타이머를 시작합니다*/
oDiv.timer=setInterval
(
function ()
{
changeWidthInner(oDiv, iIndex, iMinWidth);
}, 30
);
}
/*이것이 중요한 부분, 이동*/
function 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)
{
continue;
}
/*이곳에는 변하지 않는 요소가 있으므로 모두 최소 너비를 저장합니다*/
if(iMinWidth==aLi[i].offsetWidth)
{
/*총 너비에서 이러한 너비를 뺍니다, 그들도 총 너비에 포함됩니다*/
iWidth-=iMinWidth;
continue;
}
/*이 코드는 축소된 요소로 이동합니다*/
/*타이머를 지우지 않습니다, 아직 이동이 완료되지 않았습니다*/
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>
<div class="showBox">
<ul>
<li class="active"><span class="bg1">이는 첫 번째 </span><img src="1.jpg" alt=""></li>
<li><span class="bg2">이는 두 번째 </span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">이는 세 번째 </span><img src="3.jpg" alt=""></li>
<li><span class="bg4">이는 네 번째 </span><img src="4.jpg" alt=""></li>
<li><span class="bg5">이는 다섯 번째 </span><img src="5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
다음은 모두 애니메이션 효과를 사용할 것이므로, 이렇게 운동을 포장하겠습니다:
/*obj 객체, attr 속성, speed 속도, iTarget 목표 값, fn 콜백 함수를 사용하여 호출합니다.*/
/*이동은 대부분 px 단위이며, 투명도는 단위가 없기 때문에 여기서 분리했습니다.
사실 수정도 많지 않았습니다. 투명도 속성이 맞는지 확인하고 투명도를 따라가는 것입니다.
*/
function doMove(obj,attr,speed,iTarget,fn){
if(attr=="opacity"){
obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
}
obj.len=iTarget-parseFloat(getStyle(obj,attr));
}
/*这里判断方向，在初始点后的为负数，在初始点前为正数*/
speed=obj.len>0?speed:-speed;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(!obj.num){
obj.num=0;
}
if(attr=="opacity"){
obj.num=parseFloat(getStyle(obj,attr))*100+speed;
}
obj.num=parseInt(getStyle(obj,attr))+speed;
}
/*这里是判断到了目标点没有，到了就停止定时器*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
obj.num=iTarget;
clearInterval(obj.timer);
}
if(attr=="opacity"){
obj.style[attr]=obj.num/100;
}
obj.style[attr]=obj.num+"px";
}
/*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
fn && fn();
}
},30);
}
/*获取css属性值的，会获取表现出现的值*/
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
轮播图：
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<!-- 这是引用封装好运动函数 -->
<script type="text/javascript" src="doMove.js"></script>
<script type="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(".index span");
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);
next.style.display="block";
pre.style.display="block";
}
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;
play();
}
pre.onclick=function(){
if(!aLi[index]){
index=num;
}
num--;
if(num<0){
num=aLi.length-1;
}
play();
}
/*인덱스 포인트*/
for(var i=0;i<aIndex.length;i++{
aIndex[i].index=i;
aIndex[i].onmouseover=function(){
num=this.index;
play();
}
}
/*아ニ메이션 실행 함수*/
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";
index=num;
/*이번 슬라이드 이미지의 투명도를 0으로 설정합니다*/
aLi[num].style.opacity=0;
/*이번 슬라이드 이미지의 레이어 높이를 설정합니다5*/
aLi[num].style.zIndex=5;
/*이번 이미지의 투명도를 감소시키는 이동 함수를 포장합니다*/
doMove(aLi[num], "opacity",10,100);
}
}
}
</script>
<style>
a{}}
text-decoration: none;
color: #555;
}
#carousel{
font-family: "微软雅黑";
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
}
#carousel ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#carousel ul li{
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.imgBox img{
width: 800px;
height: 400px;
}
.btn{
position: absolute;
z-index: 10;
top: 50%;
width: 45px;
height: 62px;
margin-top: -31px;
text-align: center;
line-height: 62px;
font-size: 40px;
background: rgba(0,0,0,0.4);
opacity: alpha(opacity=50);
display: none;
}
#pre{
left: 0;
}
#next{
right: 0;
}
#carousel .index{
position: absolute;
bottom: 10px;
left: 50%;
z-index: 10;
}
#carousel .index span{
width: 15px;
height: 15px;
border-radius: 50%;
background: #87CEFA;
display: inline;-block;
box-shadow:1px 1px 6px #4169E1;
}
#carousel .index span.active{
background: #4169E1;
box-shadow:1px 1px 6px #87CEFA inset;
}
</style>
</head>
body>
<div id="carousel">
<ul class="imgBox">
<li><a href="#"><img src="1.jpg" alt=""></a>/li>
<li><a href="#"><img src="2.jpg" alt=""></a>/li>
<li><a href="#"><img src="3.jpg" alt=""></a>/li>
<li><a href="#"><img src="4.jpg" alt=""></a>/li>
<li><a href="#"><img src="5.jpg" alt=""></a>/li>
</ul>
<a href="javascript:;" class="btn" id="next">>></a>/a>
<a href="javascript:;" class="btn" id="pre"><</a>
<div class="index">
<span class="active"></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>Document</title>
<!-- 플러그인 js와 jquery를 포함합니다 -->
<script src="jquery-2.0.3.js"></script>
<script src="responsiveslides.js"></script>
<style>
#banner{
position: relative;
width: 800px;
}
/* 플러그인의 기본 css 속성 */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* 수정된 것을 원형 버튼으로 변경했습니다 */
ul.rslides_tabs.rslides1_tabs {
position: absolute;
bottom: 10px;
left: 45%;
list-style: none;
z-index: 10;
}
ul.rslides_tabs.rslides1_tabs li{
float: left;
}
ul.rslides_tabs.rslides1_tabs li a{
display: block;
border-radius: 50%;
width: 10px;
height: 10px;
margin-right: 10px;
background: #fff;
}
/* .rslides_here 이는 active와 같습니다 */
ul.rslides_tabs.rslides1_tabs li.rslides_here a{
background: #004F88;
}
/* 좌우 버튼의 class 이름 */
.rslides_nav.rslides1_nav{
position: absolute;
top: 50%;
color: #eee;
font-size: 40px;
text-decoration: none;
z-index: 4;
}
.rslides_nav.rslides1_nav.pre{
left: 10px;
}
.rslides_nav.rslides1_nav.next{
right: 10px;
}
.rslides img{
height: 400px;
}
</style>
<script>
$(function() {
$(".rslides").responsiveSlides({
pager: true,
// 기본적으로 false입니다. 표시할 때(true) 인덱스 포인트를 표시하면, 기본적으로 숫자입니다12345js 라이브러리에서 수정하면 됩니다
nav: true, // 이전一张과 다음一张의 탐색 표시를 표시합니다
pause: false, // 마우스 오버/아웃할 때 일시 중지 여부
pauseControls: true, // Boolean: 컨트롤을 마우스 오버할 때 일시 중지, true 또는 false
prevText: "<", // 좌우 버튼의 기호를 수정합니다
nextText: ">", // String: "next" 버튼의 텍스트
"maxwidth":"800px"
});
$(".rslides1_nav.css("display","none");
$("#banner").mouseover(function(){
$(".rslides1_nav.css("display","block");
}
$("#banner").mouseout(function(){
$(".rslides1_nav.css("display","none");
}
});
</script>
</script>
</head>
body>
<!-- 그것을 div로 감싸고, js로 추가된 태그는 ul 태그 뒤로 직접 로드됩니다 -->
<div id="banner">
<ul class="rslides" id="rslides">
<li><img src="111.jpg" alt=""></li>
<li><img src="222.jpg" alt=""></li>
<li><img src="333.jpg" alt=""></li>
<li><img src="444.jpg" alt=""></li>
<li><img src="555.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
이미지 슬라이드：
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 슬라이드</title>
<style>
.container{
position: relative;
width: 630px;
border: 2px solid #888;
padding: 5px;
}
.c-wrap{
width: 630px;
overflow: hidden;
}
.container img{
width: 200px;
height: 90px;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
}
.container ul li{
float: left;
margin-right: 10px;
}
.container .imgBigBox{
width: 33000px;
margin-left: 0px;
}
.imgBigBox:after{
content: " ";
display: block;
clear: both;
}
.btnGroup{
border: 1px solid #888;
width: 65px;
}
.btnGroup a{
text-align: center;
line-height: 20px;
text-decoration: none;
color: #888;
font-size: 20px;
display: inline;-block;
width: 30px;
}
.btn1{
margin-right: 4px;
border-right: 1px solid #888;
}
</style>
<!-- 이동 함수 참조 -->
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript">
window.onload=function(){
/*함수 호출하여 슬라이딩*/
slide(".container");
}
function slide(name){
var oContainer=document.querySelector(name);
var oImgBigBox=oContainer.querySelector(".imgBigBox");
var aBtn=oContainer.querySelectorAll(".btnGroup a");
var oC_wrap=oContainer.querySelector(".c");-wrap");
/*스ライ딩 너비 가져오기*/
var w=oC_wrap.offsetWidth;
/*좌측 버튼 클릭*/
aBtn[0].onclick=function(){
doMove(oImgBigBox,"marginLeft",10,-w,function(){
var child=oImgBigBox.children[0].cloneNode(true);
oImgBigBox.appendChild(child);
oImgBigBox.removeChild(oImgBigBox.children[0]);
oImgBigBox.style.marginLeft="0px";
}
}
/*우측 버튼 클릭*/
aBtn[1].onclick=function(){
oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]);
oImgBigBox.style.marginLeft=-w+"px";
doMove(oImgBigBox,"marginLeft",10,0)
}
}
</script>
</head>
body>
<div class="container">
<div class="c-wrap">
<div class="imgBigBox">
<ul class="imgBox">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
<ul class="imgBox">
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="btnGroup">
<a href="javascript:;" class="btn1"><</a><a href="javascript:;" class="btn2">></a>
</div>
</div>
</body>
</html>
이것이 이 문서의 전체 내용입니다. 많은 도움이 되었기를 바랍니다. 또한,呐喊 강의를 많이 지지해 주시기 바랍니다.
고지사항: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자가 모두 소유하고 있습니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용이며, 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면, notice#w로 이메일을 보내 주세요.3codebox.com에 대한 신고를 보내는 경우, #을 @으로 변경하십시오. 관련 증거를 제공하고, 실제로 확인되면, 이 사이트는 즉시 저작권 침해 내용을 삭제합니다.