บทความนี้อธิบายวิธีการของ 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-size: 100%;
-ms-text-size-adjust: 100%;
-
/* ระยะขอบด้านในและด้านนอกมักจะทำให้ตำแหน่งประสิทธิภาพของแต่ละสไตล์เบราว์เซอร์แตกต่างกัน*//
ร่างกาย, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, รหัส, รูปแบบ, ชุดฟิลด์, ตำนาน, อินพุต, textarea, p, blockquote, th, td, hr, ปุ่ม
CLE, กัน, รายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, NAV, ส่วน {
มาร์จิ้น: 0; การตอบสนอง: 0;
สี:#333;
-
/ * รีเซ็ตแท็ก HTML5 เช่นจำเป็นต้องสร้าง CreateElement (TAG) ใน JS */
บทความ, นอกเหนือ, รายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, ส่วน {
แสดง: บล็อก;
-
/* ไฟล์สื่อ HTML5 สอดคล้องกับ IMG*/
เสียง, ผ้าใบ, วิดีโอ {
แสดง: Inline-block;*แสดง: inline;*Zoom: 1;
-
/* โปรดทราบว่าองค์ประกอบแบบฟอร์มไม่ได้สืบทอดตัวอักษรหลัก*/
Body, ปุ่ม, อินพุต, เลือก, textarea {
แบบอักษร: 12px/1.5 Tahoma, Arial, // 5b8b // 4F53;
-
อินพุตเลือก Textarea {
ขนาดตัวอักษร: 100%;
-
/* ลบระยะขอบของแต่ละเซลล์ตารางและทำให้ขอบทับซ้อน*//
โต๊ะ{
การล่มสลายของชายแดน: การล่มสลาย; ระยะห่างชายแดน: 0;
-
/* IE bug แก้ไข: th ไม่ได้รับการจัดตำแหน่งข้อความ*//
ไทย{
TEXT-ALIGN: สืบทอด;
-
/* ลบเส้นขอบเริ่มต้น*/
Fieldset, img {
ชายแดน: 0;
-
/* IE6 7 8 (Q) ข้อผิดพลาดจะแสดงเป็นประสิทธิภาพในบรรทัด*//
iframe {
แสดง: บล็อก;
-
/* ถอดเส้นขอบขององค์ประกอบนี้ภายใต้ Firefox*/
abbr, ตัวย่อ {
ชายแดน: 0; ฟอนต์-แปรผัน: ปกติ;
-
/* สไตล์ DEL ที่สอดคล้องกัน*/
del {
การตกแต่งข้อความ: บรรทัดผ่าน;
-
ที่อยู่, คำบรรยาย, อ้างอิง, รหัส, dfn, em, th, var {
สไตล์ฟอนต์: ปกติ;
Font-Weight: 500;
-
/ * ลบโลโก้ก่อนรายการ Li จะสืบทอด */
ol, ul {
รายการสไตล์: ไม่มี;
-
/* การจัดตำแหน่งเป็นปัจจัยที่สำคัญที่สุดในการพิมพ์อย่าจัดกึ่งกลางทุกอย่าง*/
คำบรรยายภาพ th {
TEXT-ALIGN: ซ้าย;
-
/* จาก Yahoo สร้างชื่อเองปรับให้เข้ากับแอปพลิเคชันหลายระบบ*//
H1, H2, H3, H4, H5, H6 {
ขนาดตัวอักษร: 100%;
Font-Weight: 500;
-
ถาม: ก่อนหน้านี้ Q: หลังจาก {
เนื้อหา:'';
-
/* Unified Superscript และ Subscript*/
sub, sup {
ขนาดตัวอักษร: 75%; ความสูงบรรทัด: 0; ตำแหน่ง: ญาติ; แนวตั้ง-แนว: พื้นฐาน;
-
sup {top: -0.5em;}
Sub {Bottom: -0.25em;}
A {
สี: #333;
-
/* ปล่อยให้ลิงก์แสดงขีดเส้นใต้ในสถานะโฮเวอร์*//
A: โฮเวอร์ {
การตกแต่งข้อความ: ขีดเส้นใต้;
สี: #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; border: 1px solid #dddddd; border-radius: 5px 5px 0px 0px;}
#club .Modle {width: 443px; ความสูง: 190px; ชายแดนขวา: 1px solid #dddddd; 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; margin: 0 auto; ความสูง: 160px; overflow: hidden;}
#club .Modle .modle_con ul li {border-bottom: 1px #ddd dotted; ตำแหน่ง: ญาติ;}
#club .Modle .Modle_Con .Modle_img {Width: 50px; ความสูง: 79px; text-allign: center;}
#club .Modle .Modle_Con .Modle_img img {margin-top: 14px;}
#club .Modle .Modle_Con .Modle_Img ฉัน {display: block; width: 15px; ความสูง: 17px; พื้นหลัง: url (../ image/buy.png) No-Repeat; ตำแหน่ง: Absolute; Top: 10px; ซ้าย: 60px;}}
#club .Modle .Modle_Con .Modle_Text {WIDTH: 337PX; ความสูง: 60PX; ล้น: ซ่อน;
#club .Modle .Modle_Con .Modle_Text PA {สี:#005EA7;}
#club .Modle .Modle_Con .Modle_Text Div A {color:#999999;}
</style>
</head>
<body>
<div id = "Club">
<div id = "modle_left">
<H2> <pan> รายการยอดนิยม </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<H2> <pan> รายการยอดนิยม </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> กาต้มน้ำไฟฟ้าที่ดีมาก </a> </p>
<div> <a href = ""> ความเร็วเร็วมาก สัญญาณดีและง่ายต่อการตั้งค่า สิ่งที่สำคัญที่สุดคือการดูว่ามีการใช้การจราจรมากน้อยเพียงใด </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <!-End Club->
<script type = "text/javascript" src = "jQuery-1.4.js"> </script>
<script>
$ (function () {
ฟังก์ชั่น scolldown (id, เวลา) {
var liheight = $ ("#"+id+"ul li"). ความสูง ();
var time = เวลา || 2500;
setInterval (function () {
$ ("#"+id+"ul"). prepend ($ ("#"+id+"ul li: สุดท้าย"). css ("ความสูง", "0px")
ความสูง: liheight+"px"
},"ช้า"));
},เวลา);
-
scolldown ("modle_left");
scolldown ("modle_right", 3000);
-
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน