cari

Rumah >hujung hadapan web >tutorial js >JS melaksanakan kod kesan khas bar status untuk teks muncul berulang-alik kemahiran javascript

JS melaksanakan kod kesan khas bar status untuk teks muncul berulang-alik kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:34:181309semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan JS bagi kod kesan khas bar status untuk teks muncul berulang-alik. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Apabila menjalankan kesan bar status ini di mana teks muncul berulang-alik, sila beri perhatian pada bar status di penjuru kiri sebelah bawah halaman. Nampaknya kesannya tidak dapat dilihat dalam versi IE8 dan ke atas. Jadi bagaimana ia dicapai? Terutamanya menggunakan fungsi untuk memaparkan mesej, mengambil rentetan semasa untuk dipaparkan berdasarkan nilai tempat, bersiap untuk menutup paparan selepas 300 milisaat, menambah satu pada pembilang panjang rentetan yang diperlukan untuk menyediakan paparan seterusnya pada masa yang sama, menggunakan fungsi untuk menyembunyikan mesej, Ambil rentetan dengan panjang tertentu di sebelah kanan Mesej dan tetapkan kelewatan untuk mengosongkan aksara seterusnya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/

Kod khusus adalah seperti berikut: 

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 欢迎光临脚本之家，请多多提出你的建议!!! "; //这里可自定义显示内容
var place=1;
function scrollIn() { //这个函数用来显示消息
window.status=Message.substring(0, place); //根据place的值取当前需显示的字符串
if (place >= Message.length) { //如果全部信息已经显示完毕
place=1; //则将place重置
window.setTimeout("scrollOut()",300); //准备在300毫秒后收起显示
} else { //否则(信息还没有显示完)
place++; //将需取的字符串长度计数器加一
window.setTimeout("scrollIn()",50); //准备下一次显示
  } 
}
function scrollOut() { //这个函数用来消隐消息
window.status=Message.substring(place, Message.length); //取Message右边的一定长度的字符串
if (place >= Message.length) { //如果已经无字符可取(信息已经完全消隐)
place=1; //则初始化place
window.setTimeout("scrollIn()", 100); //设定下一次操作是显示信息
} else { //否则(信息还没有消隐完毕)
place++; //计数器加一
window.setTimeout("scrollOut()", 50); //设定消隐下一个字符的延时
  }
}
// End -->
</SCRIPT>
<title>来回出现文字的状态栏特效</title>
</head>
<body onLoad="scrollIn()">
<b>请注意页面左下角的状态栏</b>
</body>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery melaksanakan kod kesan tatal lancar halaman web_jqueryArtikel seterusnya：jquery melaksanakan kod kesan tatal lancar halaman web_jquery

Artikel berkaitan

Lihat lagi