تشترك الأمثلة الواردة في هذه المقالة في وظيفة التبديل الأيسر واليمين JS لرجوعك. المحتوى المحدد كما يلي
صورة التكاثر:
<html> <Head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contencted" content = "ie = edge"> <title> </title> <link rel = "stylesheet" href = "http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css"/> <!-صفحة تهيئة CSS والصفحة الشائعة CSS-> <style type = "text/css"> charset "utf-8" HTML ، Body {background-color: #f6f5f5 ؛ } .vg-body {width: 1390px ؛ الهامش: 0 Auto ؛ } /*قيمة نمو المهمة* / .vg_title {font-size: 24px ؛ Line-Leight: 24px ؛ الحشو: 20px 0 ؛ اللون: #464646 ؛ } .vg_task {background-color: #fff ؛ الموقف: قريب . أعلى: 70 بكسل ؛ العرض: 16 بكسل ؛ الارتفاع: 20 بكسل ؛ المؤشر: مؤشر. } .vg_task .arrowbtn-left {left: 40px ؛ الحدود: 1 بكسل صلب أحمر. الخلفية: url (../ images/arrow-left.png) no-repeat ؛ ؛ } .vg_task .arrowbtn-right {right: 40px ؛ الحدود: 1 بكسل صلب أحمر. الخلفية: url (../ images/arrow-right.png) no-repeat ؛ ؛ } .vg_tasklist {width: 1200px ؛ الفائض: مخفي. الهامش: 0 Auto ؛ } .vg_tasklist ul {width: 999 ٪ ؛ } .vg_tasklist li {width: 258px ؛ الارتفاع: 130 بكسل ؛ تعويم: اليسار. الحدود: 1 بكسل Solid #C8C8C8 ؛ الهامش: 15px 53px 15px 0 ؛ الموقف: قريب . اليسار: -1px ؛ أعلى: -1px ؛ العرض: 212 بكسل ؛ Padding: 20px 25px 20px 23px ؛ الارتفاع: 90 بكسل ؛ Border-Bottom: 2px Solid #e65a5a ؛ الفائض: مخفي. لون الخلفية: #f0f0f0 ؛ العرض: لا شيء ؛ } .vg_tasklist li: hover .task_hover {display: block ؛ } .task_hover .task_desc {font-size: 16px ؛ رفع الخط: 20 بكسل ؛ اللون: #646464 ؛ } .task_hover .task_limittimes {font-size: 14px ؛ اللون: #787878 ؛ تعويم: اليسار. حشو أعلى: 12 بكسل ؛ } .vg_tasklist li img {float: left ؛ الهامش: 22px 8px 20px 20px ؛ } .vg_tasklist li .rightinfo {width: 136px ؛ تعويم: اليسار. محاذاة النص: المركز ؛ } .rightinfo H3 {font-size: 16px ؛ اللون: #646464 ؛ حشو أعلى: 15 بكسل ؛ } .rightinfo p {font-size: 14px ؛ رفع الخط: 26 بكسل ؛ اللون: #787878 ؛ } .rightinfo a ، .task_hover a {display: block ؛ محاذاة النص: المركز ؛ العرض: 96 بكسل ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ الحدود: 2px الصلبة #e65a5a ؛ الحدود الحدودية: 5px ؛ حجم الخط: 16 بكسل ؛ خط الرصيف: 700 ؛ اللون: #e65a5a ؛ . اللون: #fff ؛ بلون الحدود: #B4B4B4 ؛ المؤشر: الافتراضي ؛ } .rightinfo a {margin: 12px auto 0 ؛ } .task_hover a {float: right ؛ الهامش: 18 بكسل ؛ الهامش اليمين: -4px ؛ } .task_hover a: hover {text-decoration: none ؛ خلفية اللون: #e65a5a ؛ اللون: #fff ؛ } /*Grid-1230* / .grid-1230 .vg-body {width: 1210px ؛ } .grid-1230 .vg_tasklist {width: 1090px ؛ } .grid-1230 .vg_tasklist li {margin-right: 16px ؛ } .grid-1230 .vg_task .arrowbtn-left {left: 33px ؛ } .grid-1230 .vg_task .arrowbtn-right {right: 33px ؛ } .grid-1230 .vg_growth_table {padding: 24px 30px ؛ } .grid-1010 .vg-body {width: 990px ؛ } .grid-1010 .vg_tasklist {width: 850px ؛ } .grid-1010 .vg_tasklist li {margin-right: 35px ؛ } .grid-1010 .vg_task .arrowbtn-left {left: 30px ؛ } .grid-1010 .vg_task .arrowbtn-right {right: 30px ؛ } .grid-1010 .vg_growth_table {padding: 24px ؛ } </style> <!-إضافة النمط CSS ، يمكن تعديل الاسم وفقًا لاحتياجات محددة-> <script src = "http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> window.onresize = function () if (winwidth <= 1230) {body.className = "GRID-1010" ؛ } آخر إذا (winwidth <= 1410) {body.className = "Grid-1230" ؛ } آخر إذا (winwidth> 1410) {body.className = "GRID-1410" ؛ } آخر {Alert ("لا أعرف!") ؛ }} </script> </head> <body id = "body"> <script> // تهيئة حكم نمط عرض الحالة ، ضعه بعد body var winwidth = document.body.clientwidth ؛ if (winwidth <= 1230) {body.className = "GRID-1010" ؛ } آخر إذا (winwidth <= 1410) {body.className = "Grid-1230" ؛ } آخر إذا (winwidth> 1410) {body.className = "GRID-1410" ؛ } آخر {Alert ("لا أعرف!") ؛ } </script> <viv> <!-تبدأ قيمة نمو المهام-> <div> <p> قيمة نمو المهمة </p> </viv> <viv> <viv> </viv> <viv> </viv> <viv> القيمة <span> 200 </span> نقاط </p> <a href = "javaScript: ؛"> upplict> </a> </viv> <p> فتح العضوية السنوية المفتوحة في وقت واحد (12 شهرًا وما فوق) </p> <p> الحد الشهري </span> مرات </p> <a href = "javaScript: ؛"> src = "Images/task_lianxubaoyue.png"> <viv> <h3> افتح الاشتراك الشهري المستمر </h3> <p> قيمة نمو المكافآت <span> 10 </span> نقاط </p> <a href = "javaScript: ؛ <span> 1 </span> الوقت </p> <a href = "javaScript: ؛"> انتقل إلى complete> </a> </viv> </li> <li> <img src = "images/task_year.png"> <siv> <h3> ترقية إلى svip </h3> href = "javaScript: ؛"> انتقل إلى complete> </a> </viv> <viv> <p> فتح العضوية السنوية في وقت واحد (12 شهرًا وما فوق) </p> <p> الحد الشهري <span> 1 </span> الوقت </p> </p> <a href = "javaScript: ؛" <p> الحد الشهري <span> 1 </span> الوقت </p> <a href = "javaScript: ؛"> انتقل إلى الكامل> </a> </viv> </li> <li> <img src = "picture/task_year.png"> <div> href = "javaScript: ؛"> انتقل إلى complete> </a> </viv> <viv> <p> فتح العضوية السنوية في وقت واحد (12 شهرًا وما فوق) </p> src = "images/task_year.png"> <viv> <h3> Task 5555555555 </h3> <p> قيمة نمو المكافآت <span> 10 </span> نقطة </p> <a href = "javaScript: ؛" <span> 1 </span> الوقت </p> <a href = "javaScript: ؛"> لإكمال> </a> </viv> </li> <li> <img src = "images/task_year.png"> <div> <h3> Task 6666666 </h3> value value <span> href = "javaScript: ؛"> لإكمال> </a> </viv> <viv> <p> فتح العضوية السنوية في وقت واحد (12 شهرًا وما فوق) </p> الحد الشهري <span> 1 </span> الوقت </p> <a href = "javaScript: ؛ src = "images/task_year.png"> <viv> <h3> task77777777 </h3> <p> قيمة نمو المكافآت <span> 10 </span> نقطة </p> <a href = "javaScript: ؛" <span> 1 </span> الوقت </p> <a href = "javaScript: ؛"> لإكمال> </a> </viv> <p> فتح العضوية السنوية في وقت واحد (12 شهرًا أو أكثر) </p> <p> حد القمر </span> 1 </span> الوقت </p> <a href = "javascript: ؛" </viv> <!-نهاية قيمة نمو المهمة نهاية-> </div> </body> <script> // نمو المهمة var switchpic = (function () {/*الآن: كم عدد lilinums حاليًا: كم عدد lilinums total: كم عدد lish_li: li width marginr_li التفاف (O) {تهيئة ، فقط pre.hide () ؛ $ ("#switchpic". الإزاحة = w_li + marginr_li ؛ w_li + marginr_li ؛ +marginr_li ؛ stop. switchpic.init ({prebtn: $ (". arrowbtn-left") ، nextbtn: $ (". arrowbtn-right") ، التفاف: $ ("#switchpic")}) ؛ </script> </html>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.