لم أقم بالتحديث مؤخرًا ، لذلك سأضيف بعض التأثيرات لإثراءها.
لا أحد منهم تجميل هذه الخطوة.
أكورديون CSS النقي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <titled> أكورديون css </title> <style> .showbox {width: 660px ؛ الفائض: مخفي. } ul {list-style: none ؛ الهامش: 0 ؛ الحشو: 0 ؛ العرض: 30000px ؛ } ul li {float: Left ؛ الموقف: قريب الارتفاع: 254px ؛ العرض: 110 بكسل ؛ الفائض: مخفي. الانتقال: جميع 0.3s ؛ } /*هذا هو جوهر الأكورديون CSS ، وهو استخدام Hover ** أولاً وقبل كل شيء ، UL: Hover LI يثير التغييرات التي مرت من خلال UL ولكن ليس من خلال UL ** ثم ul li: هي التغييرات التي تم تمريرها من خلال LIB ، وتطابق آثار الرسوم المتحركة لـ CSS3 وبعض التأثيرات من CSS3 على الصفحة الجمال ، يمكنك القيام بعمل جيد. إذا كنت تستخدم تطبيق 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 ؛ الحشو أعلى: 50 بكسل ؛ اللون: #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> <viv> <ul> <li> <li> <span> هذا هو الأول </span> <img src = "1.jpg"> </li> <li> <li> الثالث </span> <img src = "3.jpg"> </li> <li> <li> <span> هذا هو الرابع </span> <img src = "4.jpg"> </li> <li> <span> هذا هو الخامس </span> <img src = "5.jpg"> </li>أكورديون CSS3:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css3 التحقق من: </title> <style>/* استخدم ميزة الاختيار الفردي للراديو لتحقيق تأثير الأكورديون*/ul {display: none ؛ } إدخال {display: none ؛} label {display: block ؛ رفع الخط: 40 بكسل ؛ Border-Bottom: 1px Solid #DDD ؛ المؤشر: مؤشر. حجم الخط: 15 بكسل ؛ Font-Weight: Bold ؛} .list> ul {display: none ؛ -بكيت ترانس: جميع .5S خطي ؛ -الموز ترانس: جميع .5S خطي ؛ -MS الانتقال: جميع .5S خطي ؛ -الران: جميع .5S خطي ؛ Transition: All .5S Linear ؛} #list1: check + ul {display: block ؛} #list2: check + ul {display: block ؛} #list3: check + ul {display: block ؛ id = "list1" checked = "chekced"/> <ul> <li> <a href = ""> اسم زميله </a> </li> <li> <a href = ""> اسم زميله </a> </li> <li> <li> <a href = "" " href = ""> اسم زميله في الفصل </a> </li> <li> <a href = "" "> اسم زميله </a> </li> <li> <a href =" "> اسم زميله </a> </li> <li> <li> <shref =" " href = ""> اسم زميله في الفصل </a> </li> <li> <a href = "" "> اسم زميله </a> </li> <li> <a href =" "> اسم زميله </a> </li> <li> <li> <a href =" "' HREF = ""> اسم زميل الفصول الدراسي </a> </li> <li> <a href = ""> اسم زميله </a> </li></ul> <label for = "list3"> my classmate </label> <input type = "radio" name = "list" id = "list3"/> <li> HREF = ""> اسم زميله </a> </li> <li> <a href = ""> اسم زميله </a> </li> <li> <a href = "" "> اسم زميله </a> </li> <li> <li> <a href =" "" <li> <a href = ""> اسم زميل classmate </a> </li></ul> <label for = "list4" Href = ""> Class -Classmate </a> </li> <li> <a href = ""> flassmate </a> </li> <li> <a href = "">أكورديون تنفذه جافا سكريبت:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <titled> أكورديون </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 ؛ الحشو أعلى: 50 بكسل ؛ } 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') ؛ } ؛ الدالة createAccordion (name) { /*get element* / var odiv = document.queryselector (name) ؛ /*إعلان الحد الأدنى عرض*/ var iminwidth = 9999999 ؛ /*get element*/ var ali = odiv.getelementsbytagname ('li') ؛ var aspan = odiv.getElementSbyTagname ('span') ؛ /*Timer Container افتراضي*/ odiv.timer = null ؛ /*حلقة إضافة الحدث وقيمة فهرس السمة المخصصة*/ لـ (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) ؛ }} ؛ وظيفة 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 ؛ /*حلقة لحلق كل صورة ، من أجل الحصول على عناصر ممتدة وتقليص*/ لـ (var i = 0 ؛ i <ali.length ؛ i ++) {/*هذا هو الحصول على الفهرس الموسع*/ if (i == iindex) {متابعة ؛ } /*هناك عناصر ليس لها تغييرات ، وبالتالي يتم حفظ الحد الأدنى للعرض* / إذا (iminwidth == ali [i] .OffSetWidth) { /*عرض العرض الإجمالي هذه العروض ، لأنها أيضًا في العرض الإجمالي* / iwidth- = iminwidth ؛ يكمل؛ } /*الكود في الحلقة التالية هو العناصر المخفضة* / /*لا تقم بمسح المؤقت ، ولم تنته من ممارسة* / bend = false ؛ / *احصل على السرعة ، بسرعة ثم بطيئة */السرعة = Math.ceil ((ali [i] .offsetwidth-iminwidth)/10) ؛ /*تقليل العرض المتبقي*/ W = ali [i]. /*لتجنب أن يكون عنصر تقلص أقل من الحد الأدنى عرض*/ 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> <viv> <ul> <li> <span> هذا هو الأول </span> <img src = "1.jpg"> </li> <li> <span> هذا هو الثاني </span> <img src = "2.jpeg" <li> <span> هذا هو الرابع </span> <img src = "4.jpg"> </li> <li> <span> هذا هو الخامس </span> <img src = "5.jpg"الشيء التالي هو استخدام تأثيرات الرسوم المتحركة ، وذلك لتغليف الحركة:
/*استخدم المكالمات ، كائن OBJ ، سمة attr ، سرعة السرعة ، القيمة التي يريد ITARGET تحقيقها ، وظيفة رد الاتصال FN*//*لأن الحركات في وحدات PX بشكل أساسي ، كما هو الحال بالنسبة للشفافية ، لا توجد وحدة ، لذلك أنا أفصلها هنا. في الواقع ، لم أغيرها كثيرًا ، فقط أحكم على ما إذا كانت سمة الشفافية ، ثم انتقل إلى خط الشفافية*/ الوظيفة DOMOVE (OBJ ، attr ، speed ، itarget ، fn) {if (attr == "expitate") } آخر {obj.len = itarget-parsefloat (getStyle (obj ، "opacity")) ؛ } /*يتم الحكم على الاتجاه هنا. واحدة بعد النقطة الأولية سلبية والآخر قبل النقطة الأولية إيجابية*/ speed = obj.len> 0؟ السرعة: -peed ؛ ClearInterval (Obj.timer) ؛ obj.timer = setInterval (function () {if (! obj.num) {obj.num = 0 ؛} if (attr == "opable") {obj.num = parsefloat (getStyle (obj ، attr))*100+السرعة ؛ لقد وصلت إلى الموقت عندما وصل*/ if (obj.num> = Itarget && obj.len> 0 || OBJ.STYLE [ATTR] = OBJ.NUM+"PX" ؛ } /*إذا حصلت على قيمة سمة CSS ، فستحصل على قيمة الأداء* / وظيفة 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" window.onload = function () { /*call لتنفيذ carousel* / carousel ("carousel")} وظيفة carousel (name) {var oscl = document.getElementById (name) ؛ var oul = oscl.queryselector ("ul") ؛ var ali = oul.queryselectarall ("li") ؛ var next = document.getElementById ("next") ؛ var pre = document.getElementById ("pre") ؛ var aindex = oscl.queryselectorall (". index span") ؛ var num = 0 ؛ فارس فهرس = 0 ؛ /*إعطاء أعلى مستوى من الصورة الأولى*/ ali [0] .style.zindex = 5 ؛ /*احكم على ما إذا كان الموقت موجود*/ if (! oscl.timer) {oscl.timer = null ؛ } /*هذا هو carousel التلقائي على* / oscl.timer = setInterval (function () {num ++ ؛ num ٪ = ali.length ؛ play () ؛} ، 2000) ؛ /*إظهار وإخفاء على الصفحات العلوية والسفلية*/ oscl.onmouseover = function () {/*move in stop timer*/ clearinterval (oscl.timer) ؛ next.style.display = "block" ؛ pre.style.display = "block" ؛ } oscl.onmouseout = function () {next.style.display = "none" ؛ pre.style.display = "none" ؛ /*الانتقال إلى Timer*/ 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 ؛ يلعب()؛ }} /*وظيفة تنفيذ الرسوم المتحركة* /وظيفة play () { /*فقط حدد ما إذا كانت نقطة المشغل نفسها ، مثل حركتي نقطة الفهرس هي نفسها. إذا لم يتم تنفيذها ، تجنب التنفيذ المتكرر بشكل مستمر*/ إذا (index! = num) {for (var i = 0 ؛ i <ali.length ؛ i ++) {/*اضبط جميع المستويات على 1*/ ali [i] .style.zindex = 1 ؛ } /*قم بتعيين مستوى آخر carousel إلى 2* / ali [index] .style.zindex = 2 ؛ Aindex [index] .className = "" ؛ Aindex [num] .className = "Active" ؛ الفهرس = num ؛ /*اضبط شفافية شخصية هذا الكاروسيل إلى 0*/ ali [num] .style.opacity = 0 ؛ /*اضبط مستوى الشكل الذي هو carousel إلى 5*/ ali [num] .style.zindex = 5 ؛ /*تغليف وظيفة الحركة ، تتلاشى من هذه الصورة*/ domove (ali [num] ، "العتامة" ، 10،100) ؛ }}} </script> <style> a {text-decoration: none ؛ اللون: #555 ؛ } #carousel {font-family: "Microsoft Yahei" ؛ الموقف: قريب العرض: 800 بكسل ؛ الارتفاع: 400 بكسل ؛ الهامش: 0 Auto ؛ } #carousel ul {style-style: none ؛ الهامش: 0 ؛ الحشو: 0 ؛ الموقف: قريب } #carousel ul li {position: absolute ؛ Z-index: 1 ؛ أعلى: 0 ؛ اليسار: 0 ؛ } .imgbox img {width: 800px ؛ الارتفاع: 400 بكسل ؛ } .btn {الموضع: absolute ؛ Z-Index: 10 ؛ أعلى: 50 ٪ ؛ العرض: 45 بكسل ؛ الارتفاع: 62 بكسل ؛ الهامش: -31px ؛ محاذاة النص: المركز ؛ Line-Leight: 62px ؛ حجم الخط: 40 بكسل ؛ الخلفية: RGBA (0،0،0،0.4) ؛ التعتيم: ألفا (التعتيم = 50) ؛ العرض: لا شيء ؛ } #pre {left: 0 ؛ } #next {right: 0 ؛ } #carousel .index {position: absolute ؛ أسفل: 10 بكسل ؛ اليسار: 50 ٪ ؛ Z-Index: 10 ؛ } #carousel .index span {width: 15px ؛ الارتفاع: 15 بكسل ؛ الحدود الحدودية: 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 = "#" src = "2.jpg"> </a> </li> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> </li> <li> src = "5.jpg"> </a> </li></ul> <a href = "javaScript :؛" id = "next" >> </a> <a href = "javaScript :؛" id = "pre"> <</a> <viv> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </viv> </viv>يتم ذلك باستخدام البرنامج المساعد: ResponsivesLides.js
بناء على jQuery
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> وثيقة </title> <! الموقف: قريب العرض: 800 بكسل ؛ } /* سمة CSS الافتراضية للمكون الإضافي* / .rslides {الموضع: النسبي ؛ على غرار القائمة: لا شيء ؛ الفائض: مخفي. العرض: 100 ٪ ؛ الحشو: 0 ؛ الهامش: 0 ؛ } .rslides li {-webkit-backface- الموقف: مطلق ؛ العرض: لا شيء ؛ العرض: 100 ٪ ؛ اليسار: 0 ؛ أعلى: 0 ؛ . العرض: كتلة ؛ تعويم: اليسار. } .rslides img {display: block ؛ الارتفاع: السيارات ؛ تعويم: اليسار. العرض: 100 ٪ ؛ الحدود: 0 ؛ } /* ، تم تعديله ، تم تعديله إلى زر DOT* / ul.rslides_tabs.rslides1_tabs {الموضع: Absolute ؛ أسفل: 10 بكسل ؛ اليسار: 45 ٪ ؛ على غرار القائمة: لا شيء ؛ Z-Index: 10 ؛ } ul.rslides_tabs.rslides1_tabs li {float: left ؛ } ul.rslides_tabs.rslides1_tabs li a {display: block ؛ الحدود الحدودية: 50 ٪ ؛ العرض: 10px ؛ الارتفاع: 10 بكسل ؛ يمين الهامش: 10px ؛ الخلفية: #fff ؛ } /. } /* اسم الفئة من الأزرار اليسرى واليمين* / .rslides_nav.rslides1_nav {الموضع: absolute ؛ أعلى: 50 ٪ ؛ اللون: #EEE ؛ حجم الخط: 40 بكسل ؛ تدمير النص: لا شيء ؛ Z-index: 4 ؛ } .rslides_nav.rslides1_nav.pre {left: 10px ؛ } .rslides_nav.rslides1_nav.next {right: 10px ؛ } .rslides img {height: 400px ؛ } </style> <script> $ (function () {$ (". Pausecontrols: True ، // boolean: توقف عن أدوات التحكم في الأزرار الحقيقية أو الخاطئة: $ ("#banner"). mouseover (function () {$ (". </script> </head> <body> <!-استخدم div للفه ، وسيتم تحميل تلك العلامات التي تمت إضافتها بواسطة JS مباشرة خلف علامة ul-> <div id = "banner"> <ul id = "rslides"> <li> <img src = "111.jpg" src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"شريحة الصورة:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> انزلاق الصورة </title> <style> .Container {position: relation ؛ العرض: 630 بكسل ؛ الحدود: 2px الصلبة #888 ؛ الحشو: 5 بكسل ؛ } .c-wrap {width: 630px ؛ الفائض: مخفي. } .Container img {width: 200px ؛ الارتفاع: 90 بكسل ؛ } .Container ul {style-style: none ؛ الهامش: 0 ؛ الحشو: 0 ؛ } .Container ul li {float: left ؛ يمين الهامش: 10px ؛ } .Container .ImGbigBox {Width: 33000px ؛ الهامش اليساري: 0px ؛ } .ImgBigBox: بعد {content: "" ؛ العرض: كتلة ؛ واضح: كلاهما ؛ } .btngroup {border: 1px Solid #888 ؛ العرض: 65 بكسل ؛ } .btngroup a {text-align: center ؛ رفع الخط: 20 بكسل ؛ تدمير النص: لا شيء ؛ اللون: #888 ؛ حجم الخط: 20 بكسل ؛ العرض: كتلة مضمنة. العرض: 30 بكسل ؛ } .btn1 {margin-right: 4px ؛ اليمين الحدودي: 1 بكسل Solid #888 ؛ } </style> <!-اقتباس وظيفة الحركة-> <script type = "text/javaScript" src = "domove.js"> </script> <script type = "text/javaScript"> window.onload = function () {/*calling function لتحقيق Sliding*/slide (". الحاوية") ؛ } وظيفة الشريحة (الاسم) {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 ؛ ! 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> <viv> <viv> <viv> <ul> <ul> <li> <img src = "1.jpg"> </li> <li> <img src = "2.jpg"> </li> <ul> <li> <img src = "4.jpg"> </li> <li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </liv> </viv> <div> </viv> </body> </html>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.