码迷,mamicode.com
首页 > 其他好文 > 详细

导航-换肤

时间:2015-09-23 11:58:12      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:简单导航

简单导航示例


  1. 效果

技术分享源码:

-------------------------------------

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>导航-换肤</title>

  <style>

*{padding:0px;margin:0px;}

a{text-decoration:none;}

body{font:14px "微软雅黑";/*font-family:"微软雅黑";font-size:14px;*/}

#wrap{width:1200px;margin:100px auto;background:#141414;height:50px;}

#left{width:250px;height:50px;background:linear-gradient(90deg,#FF4A00,#6FBE6A);

float:left;text-align:center;line-height:50px;font-size:20px;color:#fff}

#left span:before{content:"★"}

#right{height:50px;background:#404144;float:left;width:950px;}

#right .items{width:90px;display:inline-block;height:50px;line-height:50px;

text-align:center;font-size:18px;color:#fff;padding-left:1px;transition:all 0.3s ease;position:relative;}

#right .items:hover{background:#333;transition:all 0.3s ease;}

#right .items:hover i{

border-top:6px solid transparent;

border-right:6px solid transparent;

border-bottom:6px solid #fff;

border-left:6px solid transparent;

display:inline-block;

position:absolute;/*站着位置*/

top:38px;

left:36px;

}

  </style>

 </head>

 <body>

<div id="wrap">

<div id="left"><span>全部商品分类</span></div>

<div id="right">

<a href="#" class="items">首页<i></i></a>

<a href="#" class="items">米聊 <i></i></a>

<a href="#" class="items">游戏<i></i></a>

<a href="#" class="items">多看阅读<i></i></a>

<a href="#" class="items">云服务<i></i></a>

<a href="#" class="items">小米网移<i></i></a>

<a href="#" class="items">Love<i></i></a>

<a href="#" class="items">Much<i></i></a>

<a href="#" class="items">Phone<i></i></a>

<a href="#" class="items">Java<i></i></a>

</div>

</div>

<a href="javascript:void(0);" onclick="changeColor()">换肤</a>

<script type="text/javascript">

function changeColor(){

var rcolor = getRandomColor();

var lcolor = getRandomColor();

document.getElementById("left").style.background= lcolor;

document.getElementById("right").style.background= rcolor;

};

//定时切换皮肤

setInterval(function(){

changeColor();

},3000);


//这是获取一个随机的十六进制颜色

function getRandomColor(){

 return ‘#‘+Math.floor(Math.random()*16777215).toString(16);

}

</script>

 </body>

</html>


本文出自 “wennuanyiran” 博客,转载请与作者联系!

导航-换肤

标签:简单导航

原文地址:http://dingzhaoqiang.blog.51cto.com/5601059/1697374

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!