JS CSS는 전자상거래 웹사이트 탐색 템플릿 효과 code_javascript 기술을 구현합니다.
- WBOY원래의
- 2016-05-16 15:39:501496검색
이 기사의 예에서는 전자상거래 웹사이트 탐색 템플릿 효과 코드의 JS CSS 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
JS CSS로 구현한 전자상거래 웹사이트 탐색 템플릿으로, 보조 탐색 메뉴, 뛰어난 미화, 뛰어난 실용성을 갖추고 있습니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/
구체적인 코드는 다음과 같습니다.
<!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>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.