早在前几天就把顶部菜单修改了一下,原始的几个css代码已经远远满足不了对美观的要求,思来想去就加上了一个云朵在底下滑动的特效,因为云朵比较符合我们这个网站的蓝色天空主题。白色云朵是一个png的图片,把底色已经过滤掉了的,只剩下云朵那一块,ps还花了我不少挤时间哎。好在这个javascript特效还是比较简单的。
闲来谈谈具体要怎么实现吧。对于顶部导航菜单来说一般都是li标签来分隔开来的。对于position是非absolute的元素,我们先要建立一个数组,记录下来这些分类的名称,然后就是将这个分类的postion改为absolute,最后就是写云朵div移动的函数了。好了代码如下:
function MoveCloud(step)
{
document.getElementById("menu_cloud").style.left=document.getElementById("menu_cloud").offsetLeft+step+"px";
quanMove=quanMove+step;
if(quanMove<=2 &&quanMove>=-2){
window.clearInterval(quanTime);
quanClock=false;
//var link=quanStopLi.getElementsByTagName('a');
//link[0].style.color="#03F";
}
}
function ChangeMenuBack(obj,check)
{
if(check==0)
{
if(quanClock==false)
{
if(obj.offsetLeft>document.getElementById("menu_cloud").offsetLeft && obj.offsetLeft<(document.getElementById("menu_cloud").offsetLeft+document.getElementById("menu_cloud").offsetWidth/2))
{
}
else
{
window.clearInterval(quanTime);
var AimLeft=obj.offsetLeft-(document.getElementById("menu_cloud").offsetWidth-obj.offsetWidth)/2;
var space=parseInt(document.getElementById("menu_cloud").offsetLeft-AimLeft);
if(space>0)
{
quanMove=space;
quanTime=setInterval("MoveCloud(-5)",1);
}
if(space<0)
{
quanMove=space;
quanTime=setInterval("MoveCloud(5)",1);
}
//云朵离开,颜色变回为白色。
var link=obj.getElementsByTagName('a');
link[0].style.color="#03F";
//alert(link[0].innerHTML);
link=quanStop.getElementsByTagName('a');
link[0].style.color="#FFF";
//alert(link[0].innerHTML);
quanStop=obj;
quanClock=true;
}
}
}
else{
}
}
//菜单云朵代码
function scall(){
var MenuCat=document.getElementById('top_menu_cat').getElementsByTagName('li');
var CatTop=new Array();
var CatLeft=new Array();
var i,adminHeight;
if(document.getElementById("wpadminbar")){
adminHeight=document.getElementById("wpadminbar").offsetHeight;
}
else
{
adminHeight=0;
}
for(i=0;i
当然,要使用以上代码,在li中你需要把onmousemove和onmouseover事件绑定到ChangeMenuBack函数。不过你也可以通过js代码addevent等来实现,具体不说了,仅供参考。
如无特别说明,本博客文章皆为原创。转载请说明,来自吵吵博客。
原文链接:http://chaochaoblog.com/archives/608
吵吵微信朋友圈,请付款实名加入:
很美的云朵,只是我不会用这玩意!!
我不用wordpress了 呵呵
难道返回去用z-blog了?
我没有用WP,所以了解下了!
你太有才了。
文章写得太好了,收藏一下
不是吧,在火狐下没有移动啊
真的假的,我自己测试过了会移动啊。
太能折腾了,O(∩_∩)O哈哈~
问下博主,右侧的热门文章咋弄的?~~o(>_<)o ~~
我用的是postview_plus,该插件提供函数,调用浏览最多的几个篇日志。
这个好东西
火狐测试,没有效果,建议再做一些修改