私は最近更新されていないので、それを豊かにするためにいくつかの効果を追加するだけです。
それらのどれもこのステップを美しくしていません。
純粋な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をもっとサポートすることを願っています。