javascript - js的背景浮动特效求问！！
本文介绍了javascript - js的背景浮动特效求问！！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
类似天猫的一个导航背景浮动特效不知道为什么，写的JS函数没有反应，网上看了很多方法都没用，感觉应该是概念上的问题，无法解决，还有就是jq里有fadeIn这样的渐变，js应该怎么实现呢，求解答。感谢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#shopNav{background-color:black;margin-top:56px;height:30px;position:relative;}
#shopNavleft{margin-left:30px;width:198px;height:30px;line-height:30px;font-size:16px;font-weight:bold;color:white;background-color:#C60A0A;float:left;}
#shopNavleft span{padding:0 10px;}
#shopNavright{height:30px;}
#shopNavright a{padding:0 30px;font-size:16px;color:white;font-weight:bold;display:inline-block;position:relative;}
#catEar{position:absolute;top:-10px;left:270px;display:none;}
</style>
<script type="text/javascript">
window.onload=function(){
var catEar=document.getElementById("catEar");
var catEarWidth=catEar.offsetWidth;
var shopNavright=document.getElementById("shopNavright").getElementsByTagName("a");
for(var i=0;i<shopNavright.length;i++){
shopNavright[i].index=i;
shopNavright[i].onmouseover=function(){
catEar.style.display="block";
catEar.style.left="270px"+((parseInt(catEarWidth))*(this.index)+"px");
}//这段应该怎么写呢，根据i*catEarWidth定位置?
shopNavright[i].onmouseout=function(){
catEar.style.display="none";
}
}
}
</script>
</head>
<body>
<div id="shopNav">
<div id="shopNavleft">
<span>≡</span><span>商品分类</span>
</div>
<img id="catEar" src="CSS/log/未命名-4.fw.png">
<div id="shopNavright">
<a href="#"><img src="CSS/log/QQ截图20170301182013.png" value="supermarket" height="20px"></a>
<a href="#"><img src="CSS/log/QQ截图20170301182024.png" value="inter" height="20px"></a>
<a href="#">天猫会员</a>
<a href="#">品牌街</a>
<a href="#">电器城</a>
<a href="#">营业厅</a>
<a href="#">飞猪旅行</a>
<a href="#">苏宁易购</a>
</div>
</div>
</body>
</html>解决方案
先打开控制台看看报错信息
document.getElementsByClassName("shopNavright").document.getElementsByTagName('a');看看这写的都是啥，很多报错信息。
点击这里，去查各种获取元素的api的正确用法。
自己先修改下。
补充：其实天猫的是纯css写的；
然后你上面的js目前是能跑的；
css
#shopNav{
position: absolute;
left: 100px;
top: 100px;
}
.hover{
background-color: red;
/*width: 50px;*/
height: 40px;
line-height: 40px;
}
.hover .cat{
position: absolute;
top:0;
left: 15%;
width: 70%;
height: 10px;
transition: all .4s;
translateY(0px);
background-color: red;
opacity: 0;
}
.hover:hover .cat{
transform: translateY(-10px);
opacity: 1;
}html
<div id="shopNav">
<div class="hover">
天猫会员
<div class="cat" data="我是小猫头">
</div>
</div>
</div>用js的话也是不使用hover,直接添加包含这个的transform: ranslateY(-10px);opacity: 1;的类，触发transition过渡，jQuery的一样，只是不是通过添加类名而是通过添加和删除内联样式触发过渡。
这篇关于javascript - js的背景浮动特效求问！！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
