请教高手一种特效的实现代码

moplusplus 2008-03-31 11:08:45

我希望在网页中实现弹出菜单,是滑动出的那种,就是有一个字段或者按钮,当我的鼠标移动到那个字段或者按钮上时,横向滑动出菜单.请问高手如何实现?

...全文

214 点赞收藏 32

写回复

32 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

文盲老顾 2008-04-03

机器速度问题，关几个软件再看

回复赞

moplusplus 2008-04-03

我再把我的问题描述的具体一点：
我从photoshop中切割出了一个网页的各个部分，其中一个部分我放入了代码：
<div style="position:relative;width:40;height:40;background:#FFCCDD;border:1px solid black;" id=tst onmouseover=showMenu('Sub_tst'); onmouseout=hideMenu('Sub_tst');>
<div style="position:absolute;left:99%;height:40;width:0px;border:1px solid black;background:#FFFFDD;overflow:hidden;" id=Sub_tst>
<div style="width:300px;">this is a menu line </div>
</div>
</div>

<script>
var ts;
function showMenu(id){
var obj = document.getElementById(id);
var width = obj.style.width.replace('px','') * 1;
var mn = (obj.childNodes[0].nodeName!='DIV')?(obj.childNodes[1]):(obj.childNodes[0]);
if (width < mn.offsetWidth * 1){
clearTimeout(ts);
obj.style.width = (width + 2) + 'px';
ts = setTimeout("showMenu('" + id + "');",10);
}else{
obj.style.width = mn.offsetWidth + 'px';
}
}

function hideMenu(id){
var obj = document.getElementById(id);
var width = obj.style.width.replace('px','') * 1;
if (width > 0){
clearTimeout(ts);
obj.style.width = (width - 2) + 'px';
ts = setTimeout("hideMenu('" + id + "');",10);
}else{
obj.style.width = '0px';
}
}
</script>

我运行时，当隐藏层出现时，屏幕似乎在不停的刷新一样，就是鼠标不停的闪，而且旁边有沙漏，请问高手这是怎么回事？

回复赞

xtdenglei 2008-04-03

你装　一个dreamwearver cs3看看，里面自带很多特效功能功能。

回复赞

nongdun 2008-04-02

谢谢各位高手。留下代码备用~~

回复赞

moplusplus 2008-04-02

按照那位高手的做法做了,就是我的隐藏的层打开的过程中,我的鼠标不停的在闪,而且鼠标经常出现沙漏.不知是为什么

回复赞

正宗老冉 2008-04-02

楼上正解，效果很不错。
把你的菜单扔到那个层里就可以了。

回复赞

ab520ah 2008-04-02

http://qzshi.com

回复赞

moplusplus 2008-04-01

就是如何加载到页面当中，我运行时，系统报错：缺少对象

回复赞

moplusplus 2008-04-01

回复superwfei:
这段代码如何与具体的菜单控件绑定呢？

回复赞

fishidea 2008-04-01

楼上正解,好代码,比我用的好像还简洁,收下了^_^

回复赞

文盲老顾 2008-04-01

<div id=online_help style="width:150;position:absolute;top:70;left:0;cursor:text;z-index:99" onmouseover="javascript:perf=4;" onmouseout="javascript:perf=-4;">

</div>



<script>

var perf=0;

var onlineleft=0;



function move_online1(){

	onlineleft+=perf;

	if ((onlineleft>99)||(onlineleft<1)){

		perf=0;

		if(onlineleft>99){

			onlineleft=100;

		}else{

			onlineleft=0;

		}

	}

	loc_top=document.body.scrollTop+70;

	now_top=online_help.style.pixelTop;

	online_help.style.left=document.body.scrollLeft-100+onlineleft;

	if (loc_top!=now_top){

		online_help.style.top=now_top+Math.round((loc_top-now_top)/20)+Math.abs(loc_top-now_top)/(loc_top-now_top);

	}

	setTimeout("move_online1()",20);

}



move_online1();

</script>

回复赞

Anlige 2008-04-01

js就可以实现啊~

回复赞

moplusplus 2008-04-01

楼上高手能否说的详细一些，由于刚入门，理解起来有些困难。呵呵

回复赞

文盲老顾 2008-04-01

[Quote=引用 5 楼 lxtrayn 的回复:]
DIV隐藏和展示，要平滑的话得加个延时程序。
[/Quote]

定义 left 与 scrollLeft 的差值

回复赞

lxtrayn 2008-04-01

DIV隐藏和展示，要平滑的话得加个延时程序。

回复赞

snlixing 2008-04-01

http://www.7stk.com/caidan/cd03.htm

回复赞

silence2k 2008-04-01

鼠标放问号上就有效果

回复赞

silence2k 2008-04-01

可以提供代码不过人家是混淆过的要的话得自己分析
这个是纵向滚动的
http://www.wood-son.com/temp/code/slide.html

回复赞

moplusplus 2008-04-01

请高手帮忙啊

回复赞

文盲老顾 2008-04-01

<div style="position:relative;width:40;height:40;background:#FFCCDD;border:1px solid black;" id=tst onmouseover=showMenu('Sub_tst'); onmouseout=hideMenu('Sub_tst');>

	<div style="position:absolute;left:99%;height:40;width:0px;border:1px solid black;background:#FFFFDD;overflow:hidden;" id=Sub_tst>

		<div style="width:300px;">this is a menu line</div>

	</div>

</div>



<script>

var ts;

function showMenu(id){

	var obj = document.getElementById(id);

	var width = obj.style.width.replace('px','') * 1;

	var mn = (obj.childNodes[0].nodeName!='DIV')?(obj.childNodes[1]):(obj.childNodes[0]);

	if (width < mn.offsetWidth * 1){

		clearTimeout(ts);

		obj.style.width = (width + 2) + 'px';

		ts = setTimeout("showMenu('" + id + "');",10);

	}else{

		obj.style.width = mn.offsetWidth + 'px';

	}

}



function hideMenu(id){

	var obj = document.getElementById(id);

	var width = obj.style.width.replace('px','') * 1;

	if (width > 0){

		clearTimeout(ts);

		obj.style.width = (width - 2) + 'px';

		ts = setTimeout("hideMenu('" + id + "');",10);

	}else{

		obj.style.width = '0px';

	}

}

</script>