html+css3+jquery鼠标经过图标导航高亮旋转动画
1、新建html文档。
2、书写hmtl代码。
<div class="mian">
<div class="adframe">
<div class="adleft">
<div class="ico"> <i class="fa fa-code"></i> </div>
<span class="title"> 百度经验 </span> <span class="depict"> 百度经验 </span>
<div class="right" id="r">
<div class="rbt"> <span>百度经验</span> </div>
</div>
</div>
<div class="adleft">
<div class="ico"> <i class="fa fa-cloud"></i> </div>
<span class="title"> 百度经验 </span> <span class="depict"> 百度经验 </span>
<div class="right" id="r">
<div class="rbt"> <span>百度经验</span> </div>
</div>
</div>
<div class="adleft">
<div class="ico"> <i class="fa fa-diamond"></i> </div>
<span class="title"> 百度经验 </span> <span class="depict"> 百度经验 </span>
<div class="right" id="r">
<div class="rbt"> <span>百度经验</span> </div>
</div>
</div>
<div class="adleft">
<div class="ico"> <i class="fa fa-weixin"></i> </div>
<span class="title"> 百度经验 </span> <span class="depict"> 百度经验 </span>
<div class="right" id="r">
<div class="rbt"> <span>百度经验</span> </div>
</div>
</div>
<div class="adright"></div>
</div>
</div>
3、书写css代码。
html{font-family: "Microsoft YaHei";}
body{background:url("img/bg.jpg");background-repeat:no-repeat;}
*{padding:0px;margin:0px;list-style: none;}
.mian{background-color: #ffffff;margin: 0 auto;height:260px;text-align: center;overflow: hidden;width: 884px;position: relative;top:200px;margin:0 auto;}
.mian span{display: block;margin-top: 10px;}
.adleft{width:180px;height: 260px;background: #fff;border-right: 1px solid #ececec;padding-top: 45px;padding-left:20px;padding-right: 20px;float:left;}
.ico{margin: 0 auto;}
.title{letter-spacing: 2px;margin-bottom: 10px;color: #7b7b7b;}
.ico{border-radius: 100px;display: block;border: 1px solid #eeeeee;width: 70px;height: 70px;background: #fff;}
.ico i{font-size: 40px;color: #8e8e8e;line-height: 70px;}
.depict{font-size: 13px;color: #9c9c9c;margin-bottom: 10px;border-top: 1px solid #eeeeee;padding-top: 5px;letter-spacing: 1px;}
.right span{display: block;width:90px;height: 30px;border-radius: 3px;line-height: 30px;background: #00b7ca;color:#eee; }
.right{margin-left: 40px;}
4、书写并添加js代码。
<script src="js.js"></script>
<script>
FeiChao.Organ();
</script>
5、书写并添加<script src="js.js"></script>码。
<script>
var FeiChao = window.FeiChao ||{};
FeiChao.Organ = function(){
document.onreadystatechange = Organadvert;
function Organadvert() {
var ad = document.getElementsByClassName("adleft");
var adlength = ad.length;
for(var i=0;i<adlength;i++)
{
var adid = ad[i].id = 'ad'+i;
if(adid)
{
var nid = document.getElementById(adid);
nid.onmouseover=function () {
for (var i = 0; i < ad.length; i++) {
var tfc = this.lastElementChild;
ad[i].style.background = '#eeeeee'
this.style.background = '#fff'
tfc.style.transform = 'rotate(360deg)';
tfc.style.transition = '1s';
fadein(tfc);
var tfl = this.firstElementChild;
tfl.style.transform = 'rotate(360deg)';
tfl.style.transition = '1s';
}
}
nid.onmouseout=function() {
for (var i = 0; i < ad.length; i++) {
var tfc = this.lastElementChild;
tfc.display = 'none';
ad[i].style.background = '#fff'
tfc.style.transform = 'rotate(0deg)';
fadeout(tfc);
var tfl = this.firstElementChild;
tfl.style.transform = 'rotate(0deg)';
}
}
}
}
}
}
//fadein
function fadein(el)
{
el.style.opacity = 0;
el.style.display = "";
var last = +new Date();
var tick = function()
{
el.style.opacity = +el.style.opacity + (new Date() - last);
last = +new Date();
if(+el.style.opacity >0)
{
(window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick,16));
}
}
}
function fadeout(el)
{
el.style.opacity = 1;
el.style.display = "";
var last = +new Date();
var tick = function()
{
el.style.opacity = +el.style.opacity + (new Date() - last);
last = +new Date();
if(+el.style.opacity <1)
{
(window.requestAnimationFrame && requestAnimationFrame(tick) || setTimeout(tick,16));
}
}
}
</script>
6、代码整体结构。
7、查看效果。
