Beranda>Tutorial Desain Web>Standardisasi WEB

Bagaimana menerapkan efek teks bergulir yang sesuai dengan standar WEB

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 00:37:26

Karena tag marquee semakin jarang digunakan, sebagian besar efek pengguliran diimplementasikan menggunakan JavaScript. Bagi mereka yang tidak mengerti mengapa tidak menggunakan tag marquee saja, Anda sebaiknya membaca artikel ini terlebih dahulu.

Gunakan javascript untuk mensimulasikan pendekatan tenda.

Berikut isi kutipannya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
<title>Berita Hangat webjx.com</title>
<gaya tipe="teks/css">
<!--
tubuh {
margin: 0 piksel;
ukuran font: 12px;
warna: #938C43;
tinggi garis: 150%;
perataan teks:tengah;
}
a:link{color: #9D943A;ukuran font:12px;}
a:hover{color: #FF3300;ukuran font:12px;}
a:mengunjungi{color: #9D943A;ukuran font:12px;}
a.merah:link{color: #ff0000;ukuran font:12px;}
a.merah:hover{color: #ff0000;ukuran font:12px;}
a.red:mengunjungi{color: #ff0000;ukuran font:12px;}
#marqueeBox{background:#f7f7f7;border:1px perak solid;padding:1px;text-align:center;margin:0 auto;}
-->
</gaya>
</kepala>

<tubuh>
<h4>Berita terkini</h4>
<skrip bahasa="JavaScript" type="teks/javascript">
var marqueeContent=Array baru();
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>Gunakan "Dream Security" untuk mengambil sandi akun Anda dengan cepat</ sebuah>";
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>Situs Web Resmi Pesanan Umum NetEase</a>";
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>Unduhan wallpaper terbaru</a>";
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>Unduhan screensaver terbaru</a>";
var marqueeInterval=Array baru();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
fungsi initMarquee() {
var str=marqueeContent[0];
document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]= setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
fungsi startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(document.getElementById("marqueeBox").childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
document.getElementById("marqueeBox").appendChild(nextLine);
}
kalau tidak {
document.getElementById("marqueeBox").childNodes[0].innerHTML=str;
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);
document.getElementById("marqueeBox").scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
fungsi gulirMarquee() {
document.getElementById("marqueeBox").scrollTop++;
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarq<div><font color=#999999 title="Halaman Pertama"><font face="webdings">9</font></font>
<font color=#999999 title="Sepuluh halaman sebelumnya"><font face="webdings">7</font></font>
<font color=#999999 title="Halaman sebelumnya"><font face="webdings">3</font></font>
<b>1</b>
<a href="./142220269IF5J4C4E387110_2.html">2</a>
<a href="./142220269IF5J4C4E387110_3.html">3</a>
<a href="./142220269IF5J4C4E387110_2.html" title="halaman berikutnya"><font face="webdings">4</font></a>
<font color=#999999 title="Sepuluh halaman berikutnya"><font face="webdings">8</font></font>
<a href="./142220269IF5J4C4E387110_3.html" title="Halaman terakhir"><font face="webdings">:</font></a>
</div></div>

<div class="ad_613x60"><a href="Http://www.qkeer.com/" rel="external">
<img src="" /></a></div>

<div class="art_detail_now">Anda sedang membaca artikel:
<span>Cara menerapkan efek teks bergulir yang sesuai dengan standar WEB</span><br />
● Kata kunci:
<rentang>

<skrip bahasa="javascript" src="/ad/adnav.js"></script></span><br />
Artikel sebelumnya: <label id="PrevPage_9IF5J4C4E387110"></label><script Language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=PrevPage"></script><br />
Artikel berikutnya: <label id="NextPage_9IF5J4C4E387110"></label><script Language="JavaScript" type="text/javascript" src="http://www.cz268.com.cn/Showpage.asp?Id = 9IF5J4C4E387110&Type=NS&PageType=Halaman Berikutnya"></script></div>
<div class="art_detail_list">
<span>Artikel terkait</span>

<ul>


<li><a href="/Design/w3c/1623584026185I9KAFFJCCG.html">Studi pendahuluan tentang teknologi konstruksi situs Web2.0 skala besar</a> 16-10-2007</li>

<li><a href="/Design/w3c/142225888I21I6FFC808716.html">Empat metode pengaturan terkait ukuran teks dalam desain web</a> 14-10-2007</li>

<li><a href="/Design/w3c/142224258035241B9KH76II.html">Tidak semua konten dalam desain web harus menggunakan DIV sebagai "wadah"</a> 14-10-2007</li>

<li><a href="/Design/w3c/142222952EAH1AAG8J73G9I.html">Beberapa metode untuk mengatasi masalah bahwa versi di bawah IE7 tidak mendukung kelas semu A-state</a> 14-10-2007</li>

<li><a href="/Design/w3c/14222022KII5I8FFEFGBBEH.html">Efek khusus dari hitungan mundur pembukaan Olimpiade Beijing 2008, demonstrasi sederhana! </a> 2007-10-14</li>

<li><a href="/Design/w3c/42424628G7K05J96984BB.html">Sesuaikan kode CSS untuk garis bawah hyperlink halaman web</a> 04-10-2007</li>
</ul>
</div>
</div>
<div kelas = "r">
<div kelas="nav">
<div kelas="nav_title">
<div id="n1">268 Basis Pengetahuan Webmaster</div>
</div>
<div kelas="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Design/Pages/">Halaman Web</a> </li>
<li><a href="http://www.cz268.com.cn/Design/Edit/">Pemrograman</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Seo/">Pengoptimalan</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Pormot/">Promosi</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Blog/">Blog</a> </li>
<li><a href="http://www.cz268.com.cn/Design/w3c/">Standar WEB</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/RecSite/">Situs Keren</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Exp/">Pengalaman</a> </li>
<li><a href="http://www.cz268.com.cn/Webbiz/Free/">Sumber Daya</a> </li>
<li><a href="http://www.cz268.com.cn/Webmaster/Reading/">Harus dibaca</a> </li>
<li><a href="http://www.cz268.com.cn/Server/">Server</a> </li>
<li><a href="http://www.cz268.com.cn/cms/">Pembuatan situs web CMS</a> </li>
</ul></div>
<div kelas="nav_title">
<div id="n2">Jaringan Webmaster yang terkait dengan industri</div>
</div>
<div kelas="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/article/p1/14.html">Industri</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/15.html">Pembiayaan</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/16.html">Portal</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/17.html">Penelusuran</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/19.html">Bisnis</a> </li>
<li><a href="http://www.cz268.com.cn/article/p1/18.html">Pengembangan</a> </li></ul></div>
<div kelas="nav_title">
<div id="n3">Informasi Aliansi Jaringan Webmaster</div>
</div>
<div kelas="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Union/News/">Persatuan</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Intro/">Pendahuluan</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Comment/">Komentar</a> </li>
<li><a href="http://www.cz268.com.cn/Union/Skill/">Keterampilan</a> </li>
<li><a href="http://www.cz268.com.cn/Union/">Pembicaraan Serikat</a> </li></ul></div>
<div kelas="nav_title">
<div id="n4">Alat Umum Jaringan Webmaster</div></div>
<div kelas="nav_list">
<ul>
<li><a href="http://www.cz268.com.cn/Tool/Alexa/">Alexa</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/IP/">IP</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Whois/">WHOIS</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/PR/">PR</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Meta/">DAGING</a> </li>
<li><a href="http://www.cz268.com.cn/Tool/Key/">Kata Kunci</a></li></ul></div></div>
<div kelas="ad_300x250">
<skrip type="teks/javascript"><!--
google_ad_client = "pub-8464933448352541";
google_ad_width = 300;
tinggi_iklan_google = 250;
google_ad_format = "300x250_as";
google_ad_type = "gambar";
//2007-08-10: Http://www.cz268.com.cn
google_ad_channel = "3774858981";
google_color_border = "191919";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_text = "000000";
google_color_url = "32527A";
//-->
</skrip>
<tipe skrip="teks/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</skrip>
</div>

<div class="mba_title">『Artikel populer』
<span>268 Jaringan Webmaster</span></div>


<div class="perbatasan mba">

<ul>

<li><a title="Pertimbangan pemasangan dan konfigurasi server Web 64-bit" href="/Server/Web/4137C923K9KAH60B5CIK6.html" rel="external">Pertimbangan pemasangan dan konfigurasi server Web 64-bit..</a >< /li>
<li><a title="Xu Jinglei: Webmaster, apakah Anda memahami hype tersebut?" href="/News/IT/192134JB90KE4B655BH2AJ0.html" rel="external">Xu Jinglei: Webmaster, apakah Anda memahami hype tersebut? ..</a></li>
<li><a title="Pedoman menghasilkan uang dengan melamar Google Adsense" href="/Union/Skill/9164326D9ECBA8J5BI0D99.html" rel="external">Panduan menghasilkan uang dengan melamar Google Adsense..</a ></li>
<li><a title="Pemasaran blog berarti tidak mudah untuk mencintaimu" href="/Webbiz/Blog/412787AJ1IA91239A1F8D.html" rel="external">Pemasaran blog berarti tidak mudah untuk mencintaimu..</a ></li>
<li><a title="Dampak situs web yang mematuhi tata letak DIV+CSS standar XHTML pada SEO" href="/Webbiz/Exp/18299H53K4407DDK1K6JA.html" rel="external">Dampak situs web yang mematuhi tata letak DIV+CSS standar XHTML SE..</a></li>
<li><a title="Bagaimana kita menulis artikel lunak untuk menipu jumlah klik agar meningkat!" href="/Webbiz/Pormot/31429J1AC36GA779F380KF.html" rel="external">Bagaimana kita menulis artikel lunak untuk menipu jumlah klik meningkat!..< /a></li>
<li><a title="Catatan: Anda hanya berhak menggunakan nama domain Xinwang Internet!" href="/News/IT/3101584H84FGI21K0F4HI2.html" rel="external">Catatan: Anda hanya berhak untuk menggunakan nama domain Hak Penggunaan Internet Xinwang..</a></li>
<li><a title="Pengajuan dalam negeri itu sulit, akal sehat dasar tentang pemindahan ruang asing" href="/News/IT/27151C4C6HF6G1540EE67E.html" rel="external">Pengajuan dalam negeri itu sulit, akal sehat dasar tentang pemindahan luar negeri ruang..< /a></li>
<li><a title="Bangun situs portal lokal dengan strategi komprehensif dan pengoptimalan SEO super untuk memberi Anda analisis komprehensif" href="/Webbiz/Seo/7335242704F1BI101D8FI.html" rel="external">Bangun situs portal lokal dengan strategi komprehensif dan optimasi super SEO.</a></li>
<li><a title="Sepuluh pertanyaan dan jawaban tentang topik klasik akan membantu Anda meningkatkan tingkat transaksi online Anda" href="/Webmaster/Reading/232917D5H6JID4CH06IG6.html" rel="external">Sepuluh pertanyaan dan jawaban tentang topik klasik akan membantu Anda meningkatkan Transaksi penjualan online Anda..</a></li>
</ul>
</div>


<div kelas="ad_125x125">
<skrip type="teks/javascript"><!--
google_ad_client = "pub-8464933448352541";
google_ad_width = 120;
tinggi_iklan_google = 60;
google_ad_format = "120x60_as_rimg";
google_cpa_choice = "CAEQxIjL9gEaCJHH53FOqPVZKITT6n4";
//-->
</skrip>
<skrip type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</skrip>

<skrip type="teks/javascript"><!--
google_ad_client = "pub-8464933448352541";
google_ad_width = 120;
tinggi_iklan_google = 60;
google_ad_format = "120x60_as_rimg";
google_cpa_choice = "CAEQy6OdzgEaCC8eN93A557iKLHM93M";
//-->
</skrip>
<skrip type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</skrip>
</div>
<div class="perbatasan samping">
<div class="border_title sideart_title">『<a
href="http://www.cz268.com.cn/cms/">Sekolah CMS Webmaster Akar Rumput</a>』268 Jaringan Webmaster</div>

<div kelas="sideart_content">

<ul>

<li><a title="Biarkan Fengxun menampilkan kode semua font sistem" href="/cms/foosun/13225022H3IGA159AD9B2KK.html" rel="external">Biarkan Fengxun menampilkan kode semua font sistem..</a ></li>
<li><a title="Tambahkan teks atau gambar ikonik untuk berita yang direkomendasikan dan berita hangat" href="/cms/foosun/132248778HC517G03K5I4BC.html" rel="external"><font color="#CC0000"> Tambahkan teks pengenal atau </font>..</a></li> untuk berita yang direkomendasikan dan berita hangat
<li><a title="Gambar dan angka dapat dipilih untuk secara otomatis menampilkan urutan daftar 1, 2, dan 3" href="/cms/foosun/132244870DIA50I5JA5I304.html" rel="external">Gambar dan angka dapat otomatis ditampilkan Karya urutan daftar 1, 2, 3..</a></li>
<li><a title="Foosun 4.0 mengimplementasikan fungsi clickeye NetEase" href="/cms/foosun/13224377846G00GHAHKFDA6.html" rel="external">Foosun 4.0 mengimplementasikan fungsi clickeye NetEase..</a></li>
<li><a title="Fengxun sp2 meluncurkan alat forum khusus" href="/cms/foosun/13224299B01I2DC9CIK4AE6.html" rel="external">Fengxun sp2 meluncurkan alat forum khusus..</a>< /li>
<li><a title="Fengxun FS4.0 menambahkan fungsi pencegahan hotlink gambar" href="/cms/foosun/1322413718G1DAA95JG2JI4.html" rel="external"><font color="#CC0000">Fengxun FS4 0 Tambahkan fungsi perlindungan hotlink gambar</font>..</a></li>
<li><a title="Cara membuat dua kolom daftar berita dengan Fengxun DIV+CSS" href="/cms/foosun/13224036HKICIB1BE9K64G5.html" rel="external">Fengxun DIV+CSS untuk membuat dua kolom berita Cara membagi daftar menjadi kolom..</a></li>
<li><a title="Menyediakan 6 set templat log anggota sistem Fengxun 4.0" href="/cms/foosun/13223694732D9E863FH8C82.html" rel="external">Menyediakan 6 set templat log anggota sistem Fengxun 4.0..< /a></li>
<li><a title="Fengxun Picture-in-Picture mengimplementasikan metode pemanggilan iklan Google" href="/cms/foosun/132234842AJAI5GD75C140K.html" rel="external">Fengxun Picture-in-Picture mengimplementasikan metode menelepon iklan Google. .</a></li>
<li><a title="Tambahkan "Anda memiliki pesan teks baru, harap perhatikan untuk memeriksa" fungsi perintah suara untuk sistem keanggotaan" href="/cms/foosun/132233141FHK3C9HA1GC34K.html" rel="external">Tambahkan " Anda mendapat SMS baru, silakan periksa..</a></li>
</ul>
</div>

</div></div>
<DIV class="border links"><SPAN>Friendly link</SPAN>
<DIV class="border_content links_content"> <lebar tabel="100%" border="0" Cellspacing="1" cellpadding="3">
<tr>
<td width="10%" align="center" valign="meddle"><a href="http://www.qkeer.com" target="_blank">QKeer.com</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.ip180.com" target="_blank">kueri umum IP180</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.jc286.com" target="_blank">Jaringan Tutorial jc286</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.21seo.cn" target="_blank">suku pengoptimalan SEO</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.51w3c.com" target="_blank">Asosiasi Standar Web</a></td >
<td width="10%" align="center" valign="meddle"><a href="http://www.cz268.com.cn" target="_blank">268 Jaringan Webmaster</a> < /td>

</tr>
</tabel></DIV>
</DIV>
<div class="footer"><a href="http://www.cz268.com.cn/">268 Laman Beranda Jaringan Webmaster</a> | <a href="http://www.cz268. com.cn/Webbiz">Operasi situs web</a> | <a href="http://www.cz268.com.cn/News">Berita industri</a> | <a href="http:// www.cz268.com.cn/Union">Informasi Serikat</a> | <a href="http://www.cz268.com.cn/Design">Akademi Webmaster</a> | <a href= " http://www.cz268.com.cn/Webmaster">Webmaster Online</a> | <a href="http://www.cz268.com.cn/tool">Alat Webmaster</a> > | <a href="http://www.cz268.com.cn/cms">Zona CMS</a> | <a href="http://www.cz268.com.cn/Server">Distrik Server< /a>|. <a href="http://www.cz268.com.cn/sitemap">Peta Situs</a><br />
<a
href="http://www.cz268.com.cn/">www.cz268.com.cn</a> © 2006-2008 Hak Cipta Dilindungi Undang-Undang 268 Jaringan Webmaster <img
id="hak cipta" src="/templets/files/ico_bg.gif" /><a href="http://www.miibeian.gov.cn/"
rel="external">Pengajuan ICP Beijing</a> Didukung oleh QQ469502097
<script src='http://s116.cnzz.com/stat.php?id=470833&web_id=470833' Language='JavaScript' charset='gb2312'></script><br />Informasi di situs ini berasal dari Internet_ Ini hanya untuk referensi dan tidak dapat digunakan sebagai dasar yang sebenarnya. Jika ada masalah hak cipta saat mencetak ulang atau mengutip artikel di situs ini, silakan hubungi kami sesegera mungkin</div>
<noskrip><iframe src="*.html"></iframe></noskrip>
</tubuh></html>

Artikel Terkait