Rumah >hujung hadapan web >tutorial js >JS CSS melaksanakan templat navigasi tapak web e-dagang kesan kemahiran code_javascript
JS CSS melaksanakan templat navigasi tapak web e-dagang kesan kemahiran code_javascript
- WBOYasal
- 2016-05-16 15:39:501487semak imbas
Contoh dalam artikel ini menerangkan pelaksanaan JS CSS bagi kod kesan templat navigasi tapak web e-dagang. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah templat navigasi tapak web e-dagang yang dilaksanakan oleh JS CSS, dengan menu navigasi kedua, pengindahan hebat dan kepraktisan hebat saya ingin berkongsi dengan semua orang.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/
Kod khusus adalah seperti berikut:
<!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">
<TITLE>适合电子商务网站CSS导航模板版</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style>
BODY {
}
UL {
LIST-STYLE-TYPE: none;
padding:0px;
margin:0px;
}
LI {
FONT-SIZE: 12px;
COLOR: #333;
LINE-HEIGHT: 1.5em;
FONT-FAMILY: "宋体", Arial, Verdana;
}
.hide {
DISPLAY: none
}
#mainmenu_top UL LI .menuhover {
BACKGROUND: url(images/mainmenu_s.gif) no-repeat;
COLOR: #fff;
}
#mainmenu_body
{
margin-top:100px;
}
#mainmenu_top UL LI A {
MARGIN-TOP: 2px;
CURSOR: pointer;
PADDING-TOP: 8px;
HEIGHT: 20px;
text-decoration: none;
}
#mainmenu_top {
width:100%;
HEIGHT: 28px;
display:block;
overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
WIDTH: 81px;
height:auto;
DISPLAY: block;
COLOR: #666666;
TEXT-ALIGN: center;
FONT-WEIGHT: bold;
BACKGROUND: url(images/mainmenu_h.gif) no-repeat;
}
#mainmenu_bottom {
width:100%;
height:32px;
line-height:32px;
display:block;
overflow:hidden;
BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
HEIGHT: 32px;
COLOR: #fff;
MARGIN-LEFT: 0px;
PADDING: 0px 0px 0px 5px;
BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%;
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
PADDING-LEFT: 8px;
FLOAT: left;
MARGIN-LEFT: 7px;
HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
FLOAT: left;
MARGIN-LEFT: 7px;
HEIGHT: 32px;
PADDING-LEFT: 8px;
BACKGROUND: url(images/menulink_bg_l.gif) no-repeat;
}
#mainmenu_bottom UL LI A {
COLOR: #fff;
LINE-HEIGHT: 32px;
PADDING-RIGHT: 18px;
DISPLAY: block;
text-decoration: none;
BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
}
#mainmenu_bottom UL LI A:hover {
BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
COLOR: #fff;
LINE-HEIGHT: 32px;
PADDING-RIGHT: 18px;
DISPLAY: block;
BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%;
}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//获取id的函数
{
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
function SetTimer()//主导航时间延迟的函数
{
for(j=1; j <10; j++){
if (j == number){
if(getObject("mm"+j)!=false){
getObject("mm"+ number).className = "menuhover";
getObject("mb"+ number).className = "";
}
}
else{
if(getObject("mm"+j)!=false){
getObject("mm"+ j).className = "";
getObject("mb"+ j).className = "hide";
}
}
}
}
function CheckTime()//设置时间延迟后
{
secondLeft--;
if ( secondLeft == 0 )
{
clearInterval(timer);
SetTimer();
}
}
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
{
number = Num;
sourceObj = thisobj;
secondLeft = 1;
timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
{
clearInterval(timer);
}
</SCRIPT>
<!--导航开始-->
<DIV id=mainmenu_body>
<!--主导航开始-->
<DIV id=mainmenu_top>
<UL>
<LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI>
<LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>CCS导航</A> </LI>
<LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>源码下载</A> </LI>
<LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS模板</A> </LI>
<LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>后台模板</A> </LI>
<LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
<LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS菜单</A> </LI>
<LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>HTML+CSS模板</A> </LI>
<LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL>
</DIV>
<!--子导航导航开始-->
<DIV id=mainmenu_bottom>
<DIV class=mainmenu_rbg>
<UL class=hide id=mb1>
<LI><A href="#">本导航非常适合于分类比较多电子商务站等网站的导航模板版</A> </LI>
<LI><A href="#">此导航很漂亮</A> </LI>
</UL>
<UL class=hide id=mb2>
<LI style="DISPLAY: none"><A href="#" target=_parent>免费模板网</A> </LI>
<LI><A href="#" target=_parent>免费模板网</A> </LI>
<LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
<LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
<LI><A href="#" target=_parent>HTML+CSS教程</A> </LI>
<LI><A href="#" target=_parent>网页特效</A> </LI></UL>
<UL class=hide id=mb3>
<LI style="DISPLAY: none"><A href="#" target=_parent>免费模板网</A> </LI>
<LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>免费模板网</A> </LI>
<LI><A href="#" target=_parent>网上商城</A> </LI>
<LI><A href="#" target=_parent>网上商城</A> </LI>
<LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
<LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
<LI><A href="#" target=_parent>电子商务</A> </LI>
<LI><A href="#" target=_parent>网页特效</A> </LI></UL>
<UL class=hide id=mb4>
<LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>免费模板网首页</A> </LI>
<LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>
<LI><A href="#" target=_parent>MYSQL数据库</A> </LI>
<LI><A href="#" target=_parent>MSSQL数据库</A> </LI></UL>
<UL class=hide id=mb5>
<LI style="DISPLAY: none"><A href="#" target=_parent>服务器租用首页</A> </LI>
<LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用首页</A> </LI>
<LI><A href="#" target=_parent>服务器租用</A> </LI>
<LI><A href="#" target=_parent>服务器托管</A> </LI>
<LI><A href="#" target=_parent>超级机房</A> </LI>
<LI><A href="#" target=_parent>CDN加速设施</A> </LI></UL>
<UL class=hide id=mb6>
<LI style="DISPLAY: none"><A href="#" target=_parent>企业邮局首页</A> </LI>
<LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>企业邮局首页</A> </LI>
<LI><A href="#" target=_parent>绿色G级邮箱</A> </LI>
<LI><A href="#" target=_parent>绿色企业邮箱</A> </LI></UL>
<UL class=hide id=mb7>
<LI style="DISPLAY: none"><A href="#" target=_parent>网站制作首页</A> </LI>
<LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>企业建站</A> </LI>
<LI><A href="#" target=_parent>商城制作</A> </LI>
<LI><A href="#" target=_parent>个人建站</A> </LI>
<LI><A href="#" target=_parent>门户建站</A> </LI></UL>
<UL class=hide id=mb8 style="DISPLAY: none">
<LI style="MARGIN-LEFT: 270px"><A href="#" target=_parent>代理加盟</A> </LI>
<LI><A href="#" target=_parent>代理加盟</A> </LI>
<LI><A href="#" target=_parent>代理加盟</A> </LI></UL>
<UL class=hide id=mb9>
<LI style="MARGIN-LEFT: 180px"><A href="#">代理加盟</A> </LI>
<LI><A href="#" target=_parent>联系我们</A> </LI>
<LI><A href="#" target=_parent>本站通知</A> </LI>
<LI><A href="#" target=_parent>行业新闻</A> </LI>
<LI><A href="#" target=_parent>诚聘英才</A> </LI></UL>
<script>
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小写
//thisUPage=thisUPage.substring(0,4)
if(thisUPage_s=="test.jb51.net"||thisUPage_s=="www.jb51.net"||thisUPage_s=="demo.jb51.net")
{
getObject("mm1").className="menuhover"
getObject("mb1").className = "";
}
else if(thisUPage_s=="domain")
{
getObject("mm2").className="menuhover"
getObject("mb2").className = "";
}
else if(thisUPage_s=="hosting")
{
getObject("mm3").className="menuhover"
getObject("mb3").className = "";
}
else if(thisUPage_s=="mail")
{
getObject("mm4").className="menuhover"
getObject("mb4").className = "";
}
else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
getObject("mm5").className="menuhover"
getObject("mb5").className = "";
}
else if(thisUPage_s=="promotion"){
getObject("mm6").className="menuhover"
getObject("mb6").className = "";
}
else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
getObject("mm7").className="menuhover"
getObject("mb7").className = "";
}
else if(thisUPage_s=="benefit"){
getObject("mm8").className="menuhover"
getObject("mb8").className = "";
}
else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
getObject("mm9").className="menuhover"
getObject("mb9").className = "";
}
else
{
getObject("mm1").className="";
getObject("mb1").className = "";
}
}
window.load=mmenuURL()
</script>
</DIV>
</DIV>
</DIV>
</body>
</html>
Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.
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：Penggunaan Kuki Kehadiran WeChat untuk kemahiran WeChat Enterprise Account Development_javascriptArtikel seterusnya：Penggunaan Kuki Kehadiran WeChat untuk kemahiran WeChat Enterprise Account Development_javascript
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional