JS는 text_javascript 기술을 자동으로 전환하기 위한 탐색 효과 코드를 구현합니다.
- WBOY원래의
- 2016-05-16 15:42:281989검색
이 기사의 예에서는 자동으로 텍스트를 전환하는 JS 탐색 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
자동 텍스트 전환을 지원하는 탐색 메뉴 효과를 소개합니다. 사실 얼핏 보면 메뉴처럼 보이지 않고 양쪽에 화살표 제어 버튼이 있는 선택 드롭다운 상자처럼 보입니다. 메뉴 텍스트를 위쪽으로 전환하려면 왼쪽을 클릭하고, 메뉴 항목 내용으로 전환하려면 오른쪽을 클릭하거나, 마우스를 클릭하지 않으면 자동으로 메뉴 텍스트가 변경됩니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-auto-cha-font-nav-style-codes/
구체적인 코드는 다음과 같습니다.
<HTML>
<HEAD>
<TITLE>变化的文字导航条</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>变化的文字导航条</CENTER><BR>
<CENTER>
<TABLE borderColor=#99FFFF border=5 borderlight="green">
<TBODY>
<TR>
<TD>
<STYLE>.scrollerstyle {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BACKGROUND: #ffffff; BORDER-LEFT: #000000 1px solid; CURSOR: hand; BORDER-BOTTOM: #000000 1px solid; FONT-FAMILY: webdings
}
</STYLE>
<SCRIPT language=javascript>
var msgs = new Array(
"欢迎光临小站",
"网易娱乐",
"搜狐门户",
"央视国际" );
var msg_url = new Array(
"http://www.sina.com",
"http://www.163.com",
"http://www.sohu.com",
"http://www.cctv.com" );
var target_url = new Array(
"0",
"0",
"0",
"1" );
var barwidth=350 //Enter main bar width in px or %
var setdelay=2000 //Enter delay between msgs, in mili-seconds
var mouseover_color='#B5D0FF' //Specify highlight color
var mouseout_color='#FFFFFF' //Specify default color
var count=0;
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
if (ie4||ns6){
document.write('<form name="news_bar"><input type="button" value="3" onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:' + mouseout_color + '; width:'+barwidth+'; height:22; border-width:1; border-color:#000000; cursor:hand" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value="4" onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;" name="next" title="Next News"></form>');
}
else{
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')
if (navigator.userAgent.indexOf("Opera")!=-1)
document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')
else
document.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')
document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')
}
function init_news_bar(){
document.news_bar.news_bar_but.value=msgs[count];
}
function moveit(how){
if (how==1){ //cycle foward
if (count<msgs.length-1)
count++
else
count=0
}
else{ //cycle backward
if (count==0)
count=msgs.length-1
else
count--
}
document.news_bar.news_bar_but.value=msgs[count];
}
function tick_bar(){
setInterval("moveit(1)",setdelay)
}
function goURL(){
if(target_url[count]=="0")
{
location.href=msg_url[count];
}
else
{
window.open(msg_url[count]);
}
}
tick_bar(); // delete this line if you don't want messages to tick
init_news_bar();
</SCRIPT>
</TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.