贵美商城首页特效

转载
mb6448bf9aabb9d 2023-04-26 15:32:51 博主文章分类：JS 粗浅
文章标签 javascript xhtml ViewUI 3G html 文章分类 代码人生
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵美商城首页</title>
<style type="text/css">
.float {
	position:absolute;
	z-index:1;
}
body {
	margin:0;
	margin-top:3px;
	padding:0;
	font-size:12px;
	line-height:20px;
	color:#333;
}
a {
	color:#333333;
	text-decoration: none;
}
a:hover {
	color:#ff7300;
}
ul, li, ol, h1, dl, dd {
	list-style:none;
	margin:0px;
	padding:0px;
}
#header {
	width:980px;
	height:135px;
	background-image:url(images/guimei_h_bg.jpg);
	background-repeat:no-repeat;
	margin-left:auto;
	margin-right:auto;
	background-position: -23px 0px;
}
/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等样式*/
.header_top {
	width:450px;
	height:40px;
	float:right;
	padding:10px 0px 0px 0px;
	clear:both;
}
.header_top ul li {
	float:left;
}
.pic {
	background-image:url(images/guimei_icon.gif);
	background-repeat:no-repeat;
	width:28px;
	height:25px;
}
.pic2 {
	background-position:-28px 0px;
}
.pic3 {
	background-position:-84px 0px;
}
.pic4 {
	background-position:-112px 0px;
}
.top_menu_text {
	text-align:center;
	padding: 5px 5px 0px 5px;
}
.btn {
	padding: 5px 5px 0px 5px;
	text-align:center;
	width:38px;
	background-position:0px -25px;
}
.header_middle {
	width:500px;
	float:right;
	height:35px;
	clear:both;
	padding-top:10px;
	color:#636362;
	letter-spacing:3px;
}
.nav {
	clear:both;
	width:100%;
	padding-top:5px;
}
.nav li {
	width:84px;
	float:left;
	text-align:center;
	font-weight:bold;
}
.nav li a {
	padding:8px 10px;
	line-height:32px;
	color:#333;
	font-size:14px;
}
.nav ul li a:hover {
	background-image:url(images/guimei_nav_bg.gif);
	background-repeat:no-repeat;
	background-position:0px -5px;
}
#main {
	width:980px;
	margin-left:auto;
	margin-right:auto;
}
.cat, .content, .sidebar {
	float:left;
	height:100%;
}
.cat {
	width:194px;
	height:606px;
	padding:38px 0px 0px 0px;
	background:url(images/guimei_bg.gif) no-repeat;
	padding-left:10px;
}
.cat_class {
	font-size:14px;
	color:#ff7300;
	font-weight:bold;
	float:none;
	clear:both;
	line-height:28px;
}
.cat_li {
	color:#636362;
	width:58px;
	line-height:24px;
	float:left;
}
.content {
	width:530px;
	padding-top:5px;
}
.adRotator {
	margin-left:auto;
	margin-right:auto;
	width:524px;
	height:190px;
}
.number_bg {
	position:relative;
	z-index:2;
	left:200px;
	top:-25px;
	width:200px;
	text-align:center;
}
.advers {
	font-weight: bold;
	color: #FFF;
	background-color:#FFCA95;
	display: block;
	float: left;
	height: 18px;
	width: 20px;
	border: 1px solid #FFBA75;
	margin-left: 5px;
}
.advers:hover {
	color: #FFF;
}
.shopping {
	background-image:url(images/guimei_bg.gif);
	background-repeat:no-repeat;
	background-position:-210px -205px;
	margin-left:auto;
	margin-right:auto;
	width:510px;
	height:415px;
	margin-top:10px;
	padding-top:30px;
	padding-left:10px;
	padding-right:10px;
}
.shopping_images {
	float:left;
	width:170px;
	text-align:center;
	height:90px;
}
.shopping_text {
	float:left;
	width:170px;
	text-align:center;
	height:45px;
}
.sidebar {
	background-image:url(images/guimei_bg.gif);
	background-repeat:no-repeat;
	background-position:-740px 0;
	width:245px;
	height:260px;
	padding-top:180px;
}
#dome {
	overflow:hidden; /*溢出的部分不显示*/
	height:240px;
	width:215px;
	padding-left:20px;
	padding-right:10px;
}
#dome dl {
	clear:both;
	padding-top:10px;
}
#dome dt {
	width:60px;
	height:50px;
	float:left;
	border:solid 1px #666;
	margin-right:10px;
}
#dome dd {
	padding-top:15px;
}
.tab {
	width:233px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	height:202px;
}
.tab dt {
	float:left;
	height:32px;
}
.tab dd {
	clear:both;
	height:170px;
}
#footer {
	width:980px;
	margin-left:auto;
	margin-right:auto;
	height:150px;
	padding-top:10px;
	clear:both;
}
.copyright {
	width:100%;
	text-align:center;
	line-height:20px;
}
</style>
</head>
<body>
<div id="float" class="float"><img src="images/guimei_float.jpg" id="floatImg" alt="漂浮广告" /></div>
<script type="text/javascript">
/*漂浮广告*/
//定义全局变量
var moveX = 0;       //X轴方向移动的距离
var moveY = 0;      //Y轴方向移动的距离
var step = 1;      //图片移动的速度
var directionY = 0;   //设置图片在Y轴的移动方向
var directionX = 0;   //设置图片在X轴的移动方向              

function changePos(){
var img = document.getElementById("float");  //图片所在层ID
var width = document.documentElement.clientWidth;       //浏览器宽度
var height = document.documentElement.clientHeight;    //浏览器高度
var imgHeight=document.getElementById("floatImg").height;   //漂浮图片高度
var imgWidth=document.getElementById("floatImg").width;     //漂浮图片宽度 
img.style.left =parseInt(moveX + document.documentElement.scrollLeft)+"px";     //漂浮图片距浏览器左侧位置
img.style.top = parseInt(moveY + document.documentElement.scrollTop)+"px";      //漂浮图片距浏览器顶端位置
//alert(img.style.left);
if (directionY==0){    
moveY = moveY + step;   //漂浮图片在Y轴方向上向下移动
}
else{
moveY = moveY - step;   //漂浮图片在Y轴方向上向上移动
}
if (moveY < 0) {     //如果漂浮图片漂到浏览器顶端时，设置图片在Y轴方向上向下移动
directionY = 0;
moveY = 0;
}
if (moveY >= (height - imgHeight)) {   //如果漂浮图片漂到浏览器底端时，设置图片在Y轴方向上向上移动
directionY = 1;
moveY = (height - imgHeight);
}
if (directionX==0){
moveX = moveX + step;     //漂浮图片在X轴方向上向右移动
}
else {
moveX = moveX - step;     //漂浮图片在X轴方向上向左移动
}
if (moveX < 0) {     //如果漂浮图片漂到浏览器左侧时，设置图片在X轴方向上向右移动
directionX = 0;
moveX = 0;
}
if (moveX >= (width - imgWidth)) {     //如果漂浮图片漂到浏览器右侧时，设置图片在X轴方向上向左移动
directionX = 1;
moveX = (width - imgWidth);
}
// setTimeout("changePos()",30);
}
setInterval("changePos()",30); 
</script>
<!--网页导航部分开始-->
<div id="header">
  <div class="header_top">
    <ul>
      <li class="pic pic1"></li>
      <li class="top_menu_text "><a href="#">购物车</a></li>
      <li class="pic pic2"></li>
      <li class="top_menu_text"><a href="#">帮助中心</a></li>
      <li class="pic pic3"></li>
      <li class="top_menu_text"><a href="javascript:addCookie()">加入收藏</a></li>
      <li class="pic pic4"></li>
      <li class="top_menu_text"><a href="javascript:setHomePages()">设为首页</a></li>
      <li class="pic btn"><a href="#">登录</a></li>
      <li class="pic btn"><a href="#">注册</a></li>
    </ul>
  </div>
  <div class="header_middle" id="header_middle">
    <script type="text/javascript">time()</script>
  </div>
  <div class="nav">
    <ul>
      <li><a href="#"> 首   页 </a></li>
      <li><a href="#">家用电器</a></li>
      <li><a href="#">手机数码</a></li>
      <li><a href="#">日用百货</a></li>
      <li><a href="#"> 书   籍 </a></li>
      <li><a href="#">帮助中心</a></li>
      <li><a href="#">免费开店</a></li>
      <li><a href="#">全球咨询</a></li>
    </ul>
  </div>
</div>
<!--网页中间部分开始-->
<div id="main">
  <!--左则菜单开始-->
  <div class="cat">
    <ul id="cat_menu">
      <!--
本菜单使用纯HTML实现的代码如下：
<li class="cat_class">家用电器</li>
<li class="cat_li">大家电</li>
......
<li class="cat_li">摄像机</li>
<li class="cat_class">书籍</li>
<li class="cat_li">文学</li>
......
<li class="cat_li">法律</li>
<li class="cat_class">手机数码</li>
<li class="cat_li">电脑整机</li>
......
<li class="cat_li">网线</li>
<li class="cat_class">日用百货</li>
<li class="cat_li">儿童床品</li>
......
<li class="cat_li">减肥</li>

本例使用JavaScript方法实现
-->
      <script type="text/javascript">
/*左侧菜单*/
function menu(){
var menu=new Array();
menu["家用电器"]=["大家电","洗衣机","平板电视","电热水器","家庭音响","热水器","空调冰箱","冷柜","DVD","电视附件","电燃气","家电下乡","家电服务","电饭煲","摄像机"];
menu["书籍"]=["文学","科普","保健","家教","美丽生活","旅游","体育","个人理财","地图","生活","文化","历史","哲学","宗教","法律"];
menu["手机数码"]=["电脑整机","网络设备","DIY配件","GSM手机","CDMA","联通3G","电信3G","移动3G","电话机","对讲机","电脑桌","电脑包","键盘","鼠标","网线"];
menu["日用百货"]=["儿童床品","枕巾","浴巾","春秋被","床单","工艺摆设","装饰画","家居清洁","衣物整理","眼罩","指甲刀","字画","日用礼品","常备药品","减肥"];
var cat_menu=document.getElementById("cat_menu");
cat_menu.innerHTML="";
for(var i in menu){
var title="<li class='cat_class'>"+i+"</li>";
cat_menu.innerHTML+=title;
for(var j in menu[i]){
var title_menu="<li class='cat_li'>"+menu[i][j]+"</li>";
cat_menu.innerHTML+=title_menu; 
}
}	
}
menu();
</script>
    </ul>
  </div>
  <!--中间广告和疯狂购物开始-->
  <div class="content">
    <!--带按钮的横幅广告开始-->
    <div class="adRotator"> <img src="images/guimei_ad-01.jpg" alt="scroll" id="adverImg"/>
      <div class="number_bg"> <a href="javascript:show(1)" class="advers">1</a> <a href="javascript:show(2)" class="advers">2</a> <a href="javascript:show(3)" class="advers">3</a> <a href="javascript:show(4)" class="advers">4</a> </div>
    </div>
    <!--疯狂购物开始-->
    <div class="shopping">
      <dl>
        <dd class="shopping_images"><img src="images/guimei_shopping_01.jpg" alt="shopping"/></dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_02.jpg" alt="shopping"/></dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_03.jpg" alt="shopping"/></dd>
        <dd class="shopping_text">惠普商务移动应用英寸笔记本</dd>
        <dd class="shopping_text">夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！</dd>
        <dd class="shopping_text">三星家庭影院 HT-TZ325 购机送好礼(超值性价比)</dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_04.jpg" alt="shopping"/></dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_05.jpg" alt="shopping"/></dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_06.jpg" alt="shopping"/></dd>
        <dd class="shopping_text">明基MP512投影机 2899元 送100元京卷 SVGA 2200流明</dd>
        <dd class="shopping_text">罗技数据1TB移动鼠标729元开抢了！</dd>
        <dd class="shopping_text">海森那尔极品耳机绝对不容错过！</dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_07.jpg" alt="shopping"/></dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_08.jpg" alt="shopping"/></dd>
        <dd class="shopping_images"><img src="images/guimei_shopping_09.jpg" alt="shopping"/></dd>
        <dd class="shopping_text">亚马逊随时阅读，随时记录，时尚最佳选择！</dd>
        <dd class="shopping_text">优雅相框</dd>
        <dd class="shopping_text">IBM 2009最新上网本，特色尽显</dd>
      </dl>
    </div>
  </div>
  <!--右侧开始-->
  <div class="sidebar">
    <div id="dome">
      <div id="dome1">
        <dl>
          <dt><img src="images/guimei_scroll_01.jpg" alt="scroll" /></dt>
          <dd>大牌狂降价，三折直送</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_02.jpg" alt="scroll" /></dt>
          <dd>大学老师开网店</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_03.jpg" alt="scroll" /></dt>
          <dd>黑眼圈推荐，美白不停</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_04.jpg" alt="scroll" /></dt>
          <dd>瘦身狂潮风，修形之选</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_01.jpg" alt="scroll" /></dt>
          <dd>大牌狂降价，三折直送</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_02.jpg" alt="scroll" /></dt>
          <dd>大学老师开网店</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_03.jpg" alt="scroll" /></dt>
          <dd>黑眼圈推荐，美白不停</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_04.jpg" alt="scroll" /></dt>
          <dd>瘦身狂潮风，修形之选</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_01.jpg" alt="scroll" /></dt>
          <dd>大牌狂降价，三折直送</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_02.jpg" alt="scroll" /></dt>
          <dd>大学要求老师开网店</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_03.jpg" alt="scroll" /></dt>
          <dd>黑眼圈推荐，美白不停</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_04.jpg" alt="scroll" /></dt>
          <dd>瘦身狂潮风，修形之选</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_01.jpg" alt="scroll" /></dt>
          <dd>大牌狂降价，三折直送</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_02.jpg" alt="scroll" /></dt>
          <dd>大学老师开网店</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_03.jpg" alt="scroll" /></dt>
          <dd>黑眼圈推荐，美白不停</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_04.jpg" alt="scroll" /></dt>
          <dd>瘦身狂潮风，修形之选</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_03.jpg" alt="scroll" /></dt>
          <dd>黑眼圈推荐，美白不停</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_04.jpg" alt="scroll" /></dt>
          <dd>瘦身狂潮风，修形之选</dd>
        </dl>
        <dl>
          <dt><img src="images/guimei_scroll_01.jpg" alt="scroll" /></dt>
          <dd>大牌狂降价，三折直送</dd>
        </dl>
      </div>
      <div id="dome2"></div>
    </div>
    <!--TAB切换开始-->
    <div class="tab">
      <dl>
        <dt><img src="images/guimei_left1.jpg" alt="笔记本" id="left1"/><img src="images/guimei_left2.jpg" alt="笔记本" id="left2" οnmοuseοver="change('top1')" style="display:none;"/></dt>
        <dt><img src="images/guimei_right1.jpg" alt="手机充值" id="right1" οnmοuseοver="change('top2')"/><img src="images/guimei_right2.jpg" alt="手机充值" id="right2" style="display:none;" /></dt>
      </dl>
      <dl>
        <dd><img src="images/guimei_end1.jpg" alt="笔记本" id="end1" /><img src="images/guimei_end2.jpg" alt="手机充值" id="end2" style="display:none;"/></dd>
      </dl>
    </div>
    <!--TAB切换结束-->
  </div>
  <!--中间的右侧内容结束-->
</div>
<!--网页版权部分开始-->
<div id="footer">
  <div class="copyright">友情链接：  <a href="#">百度</a> | <a href="#">Google</a> | <a href="#">雅虎</a> | <a href="#">淘宝</a> | <a href="#">拍拍</a> | <a href="#">易趣</a> | <a href="#">当当</a> | <a href="#">京东商城</a> | <a href="#">迅雷</a> | <a href="#">新浪</a> | <a href="#">网易</a> | <a href="#">搜狐</a> | <a href="#">猫扑</a> | <a href="#">开心网</a> | <a href="#">新华网</a> | <a href="#">凤凰网</a><br />
    <hr size="1" />
    COPYRIGHT ©  2003-2010 <a href="#">北京市贵美商城有限公司</a> ALL RIGHT RESERVED<br />
    热线：400-66-13060 Email:service@prd.com<br />
    ICP：<a href="#">沪ICP备05021104号</a><br />
    <img src="images/guimei_copy_01.gif" alt="alt" /><img src="images/guimei_copy_02.gif" alt="alt" /><img src="images/guimei_copy_03.gif" alt="alt" /><img src="images/guimei_copy_04.gif" alt="alt" /> </div>
</div>
<!--网页版权部分结束-->
<script type="text/javascript">
//根据id获取元素
function $(id){return document.getElementById(id);}

/*带按钮的轮换显示的横幅广告*/
var nowPic = 1;
var maxPic = 4;
function show(pic){
if(Number(pic)){
nowPic = pic;
}
for(var i=1; i<(maxPic+1); i++){
if(i==nowPic){
$("adverImg").src = "images/guimei_ad-0"+i+".jpg";
break;
}
}	
if(nowPic==maxPic)
nowPic = 1;
else
nowPic++;
}
setInterval("show()",3000);
window.onload = show;

/*循环向上滚动的文字*/
var dome = $("dome");
var dome1 = $("dome1");
var dome2 = $("dome2");
dome2.innerHTML = dome1.innerHTML;	
function moveTop(){
if(dome2.offsetHeight - dome.scrollTop <= 0){
dome.scrollTop=0;
}else{
dome.scrollTop ++;
}
}
var mar = setInterval("moveTop()",10);
dome.onmouseover = function(){clearInterval(mar);}
dome.onmouseout = function(){ mar = setInterval("moveTop()",10);}


/*加入收藏*/
function addCookie(){
if(document.all){
//支持IE
window.external.addFavorite("http://www.gmgw.com","贵美商城")
}else if(window.sidebar){
//支持Firefox
window.sidebar.addPanel("贵美商城","http://www.gmgw.com","")
}
}

/*设为首页*/
function setHomePages(){
document.documentElement.style.behavior = "url(#default#homepage)";
document.documentElement.setHomePage("http://www.gmgw.com");	
}

/*屏蔽右键功能*/
function clicks(){
alert("右键功能不能用"); //点击右键时，弹出警告框，屏蔽右键
return false;
}
document.oncontextmenu = clicks;
</script>
</body>
</html>
效果图：
贵美商城首页特效_3G