私は最近更新されていないので、それを豊かにするためにいくつかの効果を追加するだけです。
それらのどれもこのステップを美しくしていません。
純粋なCSSアコーディオン：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> arcution css </title> <style> .showbox {width：660px;オーバーフロー：隠し; } ul {list-style：none;マージン：0;パディング：0;幅：30000px; } ul li {float：left;位置：相対;高さ：254px;幅：110px;オーバーフロー：隠し;遷移：すべて0.3秒; } /*これはCSSアコーディオンの中核です。これはホバーの使用です**最初に、UL：HOVER LIはULを通過したが、UL **を通過した変更をトリガーします。純粋なJS実装を使用する場合、面倒な場合があります。 */ ul：Hover li {width：22px; } ul li：hover {width：460px; } ul li img {width：550px;高さ：254px; } ul li span {width：22px;位置：絶対;上：0;右：0;高さ：204px;パディングトップ：50px;色：#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> <スクリプトタイプ= "text/javaScript"> </script> </head> <body> <div> <ul> <li> <span> src = "3.jpg"> </li> <li> <span>これは4番目の</span> <img src = "4.jpg"> </li> <li> <li> <li> <span> 5番目</span> <img src = "5.jpg"> </li> </ul> div> </html> </html>CSS3アコーディオン：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css3-checked：</title> <style>/*ラジオのシングル選択機能を使用して、アコーディオン効果を実現します*/ul {display：none; } input {display：none;} label {display：block; Line-Height：40px;ボーダーボトム：1PX SOLID #DDD;カーソル：ポインター;フォントサイズ：15px; font-weight：bold;} .list> ul {display：none; -webkit-transition：すべて.5s線形。 -moz-transition：すべて.5s線形。 -ms-transition：すべて.5s線形。 -O-Transition：すべて.5S線形。トランジション：すべて.5Sリニア;}＃リスト1：checked + ul {display：block;}＃list2：checked + ul {display：block;}＃list3：checked + ul {display：block;}＃list4：checked + ul {block;} </style> </head> <body> <"> label <"> label <"> label <"> label < id = "list1" checked = "chekced"/> <ul> <li> <a href = ""> classmate name </a> </li> <li> <a href = ""> classmate name </a> </li> <li> href = "">クラスメート名</a> </li> <li> <a href = ""> classmate name </a> </li> <li> <a href = ""> classmate name </a> </li> <li> href = "">クラスメート名</a> </li> <li> <a href = ""> classmate name </a> </li> <li> <a href = ""> classmate name </a> </li> <li> href = "">クラスメートの名前</a> </li> <li> <a href = ""> classmate's name </a> </li> </ul> <ラベル= "list3">私のクラスメート</label> <input Type = "radio name" list = "list" id = "list3"/> <ul> < href = "">クラスメートの名前</a> </li> <li> <a href = "">クラスメートの名前</a> </li> <li> <a href = "">クラスメートの名前</a> </li> <li> <a href = "">クラスメートの名前</a> <li> <a href = "">クラスメートの名前</a> </li> </ul> <ラベル= "list4">私のクラスメート</label> <入力タイプ= "radio" list "list" list "list" list4 "/> <ul> <li> <a href =" "> classmate </a> href = "">クラスメート</a> </li> <li> <a href = ""> classmate </a> </li> <li> <a href = ""> classmate </a> </li> </div> </body> </html>JavaScriptによって実装されたアコーディオン：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> arcution </title> <style> .showbox {width：660px;オーバーフロー：隠し; } ul {list-style：none;マージン：0;パディング：0;幅：30000px; } ul li.active {width：550px; } ul li {float：left;位置：相対;高さ：254px;幅：22px;オーバーフロー：隠し; } ul li img {width：660px;高さ：254px; } ul li span {width：22px;位置：絶対;上：0;左：0;高さ：204px;パディングトップ：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）{ /*get element* / var odiv = document.queryselector（name）; /*最小幅を宣言*/ var iminwidth = 9999999; /*get element*/ 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）; } /*これはキー、Motion* / 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; /*各画像をループするために、拡張および縮小要素を取得して（var i = 0; i <ali.length; i ++）{/*拡張インデックスを取得するためになります*/ if（i == iindex）{continue; } /*変更がない要素があるため、最小幅が保存されます* / if（iminwidth == ali [i] .offsetwidth）{ /*合計幅はこれらの幅を減算します。続く; } /*次のループのコードは、縮小要素です* / /*タイマーをクリアしないでください、そして、それは運動を終了していません* / bend = false; / *速度を取得し、最初に高速にしてから遅くします/*残りの幅を減らす*/ 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> <ul> <li> <span>これは最初の</span> <img src = "1.jpg"> </li> <li> <span> 2番目の</span> <img src = "2.jpeg"> </li> </li> </</</> </> </> </< <li> <span>これは4番目です</span> <img src = "4.jpg"> </li> <li> <span>これは5番目</span> <img src = "5.jpg"> </li> </ul> </div> </body> </html>次のことは、モーションをカプセル化するためにアニメーション効果を使用することです。
/*呼び出し、OBJオブジェクト、属性、速度、速度、ITargetが達成したい値、FNコールバック関数*//実際、私はそれをあまり変えませんでした。それが透明性属性であるかどうかを判断してから、透明ライン*/ function domove（obj、attr、speed、itarget、fn）に移動するだけです。 } else {obj.len = itarget-parsefloat（getStyle（obj、 "Opacity"））; } /*ここの方向が判断されます。初期ポイントの後のものは負で、初期ポイントの前のポイントは正です*/速度= obj.len> 0？速度： - speed; ClearInterval（obj.timer）; obj.timer = setInterval（function（）{if（！obj.num）{obj.num = 0;} if（attr == "ofacity"）{obj.num = parsefloat（getStyle（obj、）*100+speed;} els {obj.num = parselint（aTrige）（aTrise）+ポイントが到達したときに到着しました*/ if（obj.num> = itarget && obj.len> 0 || obj.len <0）{obj.num = itarget（obj.timer）; } else {obj.style [attr] = obj.num+"px"; } /*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> carousel diagram </title> <！ - これはカプセル化されたモーション機能への参照です - > <スクリプトタイプ= "テキスト/javascript" src = "domove.js" /*CAROUSELを実装するための呼び出し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（！ossl.timer）{ossl.timer = null; } /*これは* / oscl.timer = setinterval（function（）{num ++; num％= ali.length; play（）;}、2000）; /*上部と下のページを表示して非表示にします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;遊ぶ（）; } pre.onclick = function（）{if（！ali [index]）{index = num; } num--; if（num <0）{num = ali.length-1; } 遊ぶ（）; } /*index point* / for（var i = 0; i <aindex.length; i ++）{aindex [i] .index = i; aindex [i] .onmouseover = function（）{num = this.index;遊ぶ（）; }} /*アニメーション実行機能* /function play（）{ /*インデックスポイントの2つの動きが同じであるなど、同じトリガーポイントであるかどうかを判断します。実行されていない場合、繰り返し実行された実行を避けてください*/ 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;色：＃555; } #carousel {font-family： "microsoft yahei";位置：相対;幅：800px;高さ：400px;マージン：0 Auto; } #carousel ul {list-style：none;マージン：0;パディング：0;位置：相対; } #carousel ul li {position：absolute; z-index：1;上：0;左：0; } .IMGBOX IMG {width：800px;高さ：400px; } .btn {position：absolute; z-index：10;トップ：50％;幅：45px;高さ：62px;マージントップ：-31px;テキストアライグ：センター;ラインハイト：62px;フォントサイズ：40px;背景：RGBA（0,0,0,0.4）;不透明：アルファ（不透明= 50）;表示：なし; } #pre {左：0; } #next {右：0; } #carousel .index {position：absolute;下：10px;左：50％; z-index：10; } #carousel .index span {width：15px;高さ：15px;ボーダーラジウス：50％;背景：＃87cefa;ディスプレイ：インラインブロック。 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> <li> <a href = "＃"> <img src = "1.jpg"> </a> </li> <li> <a href = "＃"> <img src = "2.jpg" src = "2.jpg"> </a> </li> <li> <a href = "＃"> <img src = "3.jpg"> </a> </li> <li> <a href = "＃"> <img src = "4.jpg"> </a> </li 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> </span> <span> </span> </div> </div> </body> </html>これは、Plugin：ResponsivesSlides.jsを使用して行われます
jqueryに基づいています
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document>ドキュメント</title> <！ - プラグインJSとjQueryの紹介 - > <スクリプトsrc = "幅：800px; } /*プラグインのデフォルトのCSS属性* / .rslides {position：relative;リストスタイル：なし;オーバーフロー：隠し;幅：100％;パディング：0;マージン：0; } .rslides li {-webkit-backface-visibility：hidden;位置：絶対;表示：なし;幅：100％;左：0;上：0; } .rslides li：first-child {position：relative;表示：ブロック;フロート：左; } .rslides img {display：block;高さ：自動;フロート：左;幅：100％;ボーダー：0; } /*、変更された、ドットボタンに変更* / ul.rslides_tabs.rslides1_tabs {position：absolute;下：10px;左：45％;リストスタイル：なし; z-index：10; } ul.rslides_tabs.rslides1_tabs li {float：left; } ul.rslides_tabs.rslides1_tabs li a {display：block;ボーダーラジウス：50％;幅：10px;高さ：10px;マージン右：10px;背景：#fff; } / * .rslides_Hereこれはアクティブ * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {background：＃004f88; } /*左と右のボタンのクラス名* / .rslides_nav.rslides1_nav {position：absolute;トップ：50％;色：#eee;フォントサイズ：40px;テキスト装置：なし; Z-Index：4; } .rslides_nav.rslides1_nav.pre {左：10px; } .rslides_nav.rslides1_nav.next {右：10px; } .rslides img {height：400px; } </style> <script> $（function（）{$（ "。rslides"）。レスポンシブスライド（{pager：true、//デフォルトはfalse、表示（true）の場合、デフォルトは12345に表示されます。 Pausecontrols：// boolean：コントロールをホバリングするときに一時停止： "<"、//左と右のボタンのシンボルを変更する次のテキスト：//文字列：「次の」ボタン "maxwidth"： "" 800px "）; $（ "＃banner"）。マウスオーバー（function（）{$（ "。rslides1_nav"） </script> </head> <body> <！ - divを使用してラップし、JSによって追加されたタグはULタグのすぐ後ろにロードされます - > <div id = "banner"> <ul id = "rslides"> <li> <img src = "111.jpg" "> </li> <img =" 222.jpg "> src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </body> </html>画像スライド：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>画像スライディング</title> <style> .container {position：relative;幅：630px;国境：2pxソリッド＃888;パディング：5px; } .c-wrap {width：630px;オーバーフロー：隠し; } .container img {width：200px;高さ：90px; } .container ul {list-style：none;マージン：0;パディング：0; } .container ul li {float：left;マージン右：10px; } .container .imgbigbox {width：33000px;マージン左：0px; } .imgbigbox：after {content： "";表示：ブロック;クリア：両方; } .btngroup {border：1px solid＃888;幅：65px; } .btngroup a {text-align：center;ラインハイト：20px;テキスト装置：なし;色：＃888;フォントサイズ：20px;ディスプレイ：インラインブロック。幅：30px; } .btn1 {margin-right：4px;国境右：1pxソリッド＃888; } </style> <！ - モーション関数の引用 - > <スクリプトタイプ= "text/javascript" src = "domove.js"> </script> <script = "text/javascript"> windol.onload = function（）{/*スライドを達成するための呼び出し関数*/スライド（ "。 } function slide（name）{var ocontainer = document.queryselector（name）; var oimgbigbox = ocontainer.queryselector（ "。imgbigbox"）; var abtn = ocontainer.queryselectorall（ "。btngroupa"）; var oc_wrap = ocontainer.queryselector（ "。c-rap"）; /*スライド幅を取得*/ 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）; oimgbig.removechemild.chgbig.（oimvechech.chgbig.（oimgechech）; oimgbigbox.style.marginleft = "0px"; oimgbigbox.style.marginleft = -w+"px"; domove（oimgbigbox、 "marginleft"、10,0）}} </script> </head> <body> <div> <div> div> div> <ul> <li> <img src = "1.jpg"> <li> <img src = "2.jpg"> </li> <img src = </</</</</</</li> <img src = <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> </div> <div> <a href = "Javascript：上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。