English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
最近は更新していませんが、いくつかの効果を追加して充実させます
美化のステップは省略されています
純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のページの美しさを向上させる効果の一部として、素晴らしい手風琴を作成できます
純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;
上部: 0;
右: 0;
height: 204px;
padding-top: 50px;
color: #fff;
}
ul li span.bg1{
背景色: #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">これは1番目の</span><img src="1.jpg" alt=""></li>
<li><span class="bg2">これは2番目の</span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">これは3番目の</span><img src="3.jpg" alt=""></li>
<li><span class="bg4">これは4番目の</span><img src="4.jpg" alt=""></li>
<li><span class="bg5">これは5番目の</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>
/* ラジオボタンの選択特性を使用して、手風琴効果を実現しました */
ul{
表示: 非表示;
}
input{display: none;}
label{display: block; line-height: 40px; border-底部: 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>
javascriptで実現された手風琴：
<!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;
上部: 0;
左: 0;
height: 204px;
padding-top: 50px;
}
ul li span.bg1{
背景色: #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">これは1番目の</span><img src="1.jpg" alt=""></li>
<li><span class="bg2">これは2番目の</span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">これは3番目の</span><img src="3.jpg" alt=""></li>
<li><span class="bg4">これは4番目の</span><img src="4.jpg" alt=""></li>
<li><span class="bg5">これは5番目の</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";
}
/*上に配置するとコールバック関数の完全な効果を達成できず、一部のバグが発生します*/
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-フォントファミリー: "微软雅黑";
position: relative;
width: 800px;
height: 400px;
マージン: 0 auto;
}
#carousel ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#carousel ul li{
position: absolute;
z-index: 1;
上部: 0;
左: 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;
背景色: rgba(0,0,0,0.4);
不透明度: alpha(不透明度=50);
表示: 非表示;
}
#pre{
左: 0;
}
#next{
右: 0;
}
#carousel .index{
position: absolute;
底部: 10px;
left: 50%;
z-index: 10;
}
#carousel .index span{
width: 15px;
height: 15px;
border-半径: 50%;
背景色: #87CEFA;
display: inline;-block;
ボックス-影:1px 1px 6px #4169E1;
}
#carousel .index span.active{
背景色: #4169E1;
ボックス-影:1px 1px 6px #87CEFA インセット;
}
</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>ドキュメント</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-背面-可視性: 非表示;
position: absolute;
表示: 非表示;
width: 100%;
左: 0;
上部: 0;
}
.rslides li:first-子要素 {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
高さ: オート;
float: left;
width: 100%;
枠線: なし;
}
/* 変更されたもの、円形のボタンに変更されました */
ul.rslides_tabs.rslides1_tabs {
position: absolute;
底部: 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-半径: 50%;
width: 10px;
height: 10px;
margin-right: 10px;
背景色: #fff;
}
/* .rslides_here これはアクティブに相当します */
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）はインデックスポイントを表示します、デフォルトは数字12345、jsライブラリで修正してください
nav: true, // 前の画像と次の画像のナビゲーションを表示
pause: false, // マウスオーバー/アウトで停止するかどうか
pauseControls: true, // Boolean: コントロールをホバーしたときに一時停止する、trueまたはfalse
prevText: "<", // ナビゲーションボタンのシンボルを変更
nextText: ">", // String: ナビゲーションボタンのテキスト
"maxwidth":"800px"
});
$(".rslides");1_nav.css("display","none");
$("#banner").mouseover(function(){
$(".rslides");1_nav.css("display","block");
}
$("#banner").mouseout(function(){
$(".rslides");1_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#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、このサイトは即座に侵害を疑われるコンテンツを削除します。）