تصف هذه المقالة طريقة JS للتمرير لأسفل النص. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<! doctype>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> jd.com و taobao قائمة </title>
<style>
charset "UTF-8" ؛
/*
name: قاعدة
function: إعادة تعيين النمط الافتراضي للمتصفح
*/
/* منع تأثير لون الخلفية المعرفة من قبل المستخدم على صفحات الويب ، أضف للسماح للمستخدمين بتخصيص الخطوط*/
html {
اللون:#000 ؛ الخلفية: #FFF ؛
-webkit-text-size-most: 100 ٪ ؛
-MS-Text-Size-Ad-Just: 100 ٪ ؛
}
/* الهوامش الداخلية والخارجية عادة ما تجعل مواقف الأداء لكل نمط متصفح مختلفًا*/
Body ، Div ، DL ، DT ، DD ، UL ، OL ، LI ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، Pre ، Code ، Fildset ، Legend ، Inport ، Textarea ، P ، Blockquote ، TH ، TD ، HR ، Button ، Arti
كلي ، جانبا ، التفاصيل ، الشكل ، الشكل ، تذييل ، رأس ، hgroup ، القائمة ، NAV ، القسم {
الهامش: 0 ؛ الحشو: 0 ؛
اللون:#333 ؛
}
/ * إعادة تعيين علامات HTML5 ، أي يحتاج إلى إنشاء (علامة) في JS */
مقال ، جانبا ، التفاصيل ، الشكل ، الشكل ، تذييل ، رأس ، hgroup ، القائمة ، NAV ، القسم {
العرض: كتلة ؛
}
/* ملفات الوسائط HTML5 تتوافق مع IMG*/
الصوت ، قماش ، فيديو {
العرض: مضمّن كتلة ؛*العرض: inline ؛*Zoom: 1 ؛
}
/* لاحظ أن عناصر النماذج لا ترث الخط الأم*/
الجسم ، الزر ، الإدخال ، حدد ، textarea {
الخط: 12px/1.5 tahoma ، arial ، // 5b8b // 4f53 ؛
}
إدخال ، حدد ، textarea {
حجم الخط: 100 ٪ ؛
}
/* قم بإزالة هوامش كل خلية جدول وجعل حوافها تتداخل*/
طاولة{
حدود الحدود: الانهيار. تباعد الحدود: 0 ؛
}
بر
ذ{
محاذاة النص: الوراثة ؛
}
/* إزالة الحدود الافتراضية*/
Fieldset ، img {
الحدود: 0 ؛
}
/* IE6 7 8 (Q) يتم عرض الأخطاء كأداء داخل الخط*/
iframe {
العرض: كتلة ؛
}
/* قم بإزالة حدود هذا العنصر تحت Firefox*/
ABBR ، اختصار {
الحدود: 0 ؛ خط المتغير: عادي ؛
}
/* متسقة Del Style*/
ديل {
تخلص من النص: خط من الظهور ؛
}
العنوان ، التسمية التوضيحية ، الاستشهاد ، الكود ، DFN ، EM ، TH ، VAR {
على غرار الخط: طبيعي ؛
خط الرصيف: 500 ؛
}
/ * إزالة الشعار قبل القائمة ، سوف يرث LI */
ol ، ul {
على غرار القائمة: لا شيء ؛
}
/* المحاذاة هي العامل الأكثر أهمية في الطباعة ، لا تركز كل شيء*/
التسمية التوضيحية ، ال {
محاذاة النص: اليسار ؛
}
/* من Yahoo ، اجعل العناوين مخصصة ، والتكيف مع تطبيقات النظام المتعددة*/
H1 ، H2 ، H3 ، H4 ، H5 ، H6 {
حجم الخط: 100 ٪ ؛
خط الرصيف: 500 ؛
}
س: قبل ، س: بعد {
محتوى:''؛
}
/* superscript و subscript*/
sub ، sup {
حجم الخط: 75 ٪ ؛ Line-Leight: 0 ؛ الموقف: قريب المحاذاة العمودية: خط الأساس ؛
}
sup {top: -0.5em ؛}
Sub {Bottom: -0.25em ؛}
أ {
اللون: #333 ؛
}
/* دع الرابط يعرض الضامير في حالة التحويم*/
ج: تحوم {
تدمير النص: تسطير ؛
اللون: #C00 ؛
}
/* لا يتم عرض عدم السطحية افتراضيًا ، مع الحفاظ على الصفحة موجزة*/
ins ، {
تدمير النص: لا شيء ؛
}
/* تنظيف تعويم*/
.fn-clear: بعد {
الرؤية: مخفية ؛
العرض: كتلة ؛
حجم الخط: 0 ؛
محتوى:" "؛
واضح: كلاهما ؛
الارتفاع: 0 ؛
}
.fn-clear {
التكبير: 1 ؛ / * لـ ie6 ie7 */
}
/* إخفاء ، عادة ما تستخدم للتعاون مع JS*/
الجسم .fn-hide {
العرض: لا شيء ؛
}
/ * تعيين مضمّن لتقليل الأخطاء الناجمة عن العائمة */
.fn-left ، .fn-right {
العرض: مضمّن ؛
}
.fn-left {
تعويم: اليسار.
}
.fn-right {
تعويم: صحيح.
}
#club {width: 888px ؛ الارتفاع: 190px ؛ الهامش: 40px Auto ؛ الحدود: 1px solid #ddddd ؛ الحدود-radius: 5px 5px 0px 0px ؛}
#club. modle {width: 443px ؛ الارتفاع: 190px ؛ اليمين الحدودي: 1px solid #ddddd ؛ float: left ؛}
#club .modle_right {border-right: none ؛ float: right ؛}
#club .modle .modle_title {width: 443px ؛ الارتفاع: 29px ؛ خط الذروة: 29px ؛ font-size: 12px ؛ font-weight: bold ؛ الخلفية:#f3f3f3 ؛}
#club .modle .modle_title span {padding-left: 7px ؛}
#club .modle .modle_con {width: 423px ؛ الهامش: 0 auto ؛ الارتفاع: 160px ؛ فائض: مخفي ؛}
#club .modle .modle_con ul li {border-bottom: 1px #ddd dotted ؛ الموضع: النسبية ؛}
#club .modle .modle_con .modle_img {width: 50px ؛ الارتفاع: 79px ؛ text-align: center ؛}
#club .modle .modle_con .modle_img img {margin-top: 14px ؛}
#club .modle .modle_con .modle_img i {display: block ؛ width: 15px ؛ الارتفاع: 17px ؛ الخلفية: url (../ image/buy.png) no-repeat ؛ الموضع: المطلق ؛ الأعلى: 10px ؛ اليسار: 60px ؛}
#club .modle .modle_con .modle_text {width: 337px ؛ الارتفاع: 60px ؛ overflow: hidden ؛ margin-top: 15px ؛ padding-left: 8px ؛}
#club .modle .modle_con .modle_text pa {color:#005ea7 ؛}
#club .modle .modle_con .modle_text div a {color:#999999 ؛}
</style>
</head>
<body>
<div id = "club">
<div id = "modle_left">
<h2> <span> القائمة الشائعة </span> </h2>
<viv>
<ul>
<li>
<viv> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<h2> <span> القائمة الشائعة </span> </h2>
<viv>
<ul>
<li>
<viv> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
<li>
<viv> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </viv>
<viv>
<p> <a href = "###"> غلاية كهربائية جيدة جدًا </a> </p>
<viv> <a href = ""> السرعة بسرعة كبيرة. الإشارة جيدة وسهلة الإعداد. أهم شيء هو معرفة مقدار حركة المرور المستخدمة </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <!-نهاية النادي->
<script type = "text/javaScript" src = "jquery-1.4.js"> </script>
<script>
$ (function () {
وظيفة scolldown (معرف ، الوقت) {
var liheight = $ ("#"+id+"ul li"). height () ؛
var time = time || 2500 ؛
setInterval (function () {
$ ("#"+id+"ul"). prepend ($ ("#"+id+"ul li: last"). css ("height" ، "0px").
الارتفاع: liheight+"PX"
} ، "بطيء")) ؛
}،وقت)؛
}
scolldown ("modle_left") ؛
scolldown ("modle_right" ، 3000) ؛
}) ؛
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.