编程论坛 » JavaScript论坛 » [求助]我想实现层的滑动效果，请问怎么弄啊

juleitai 发表于 2007-9-10 15:37

[求助]我想实现层的滑动效果，请问怎么弄啊

层一开始是隐藏的，点击一个图片后，层出现，我现在想实现点击图片后，层从页面的最低下向上滑动到我定义的那个层的位置上，请教大家应该怎么作啊？？？

jkll007123 发表于 2007-9-10 18:25

&lt;html&gt;<BR>&lt;head&gt;<BR>&lt;style type="text/css"&gt;<BR>&lt;!--<BR>#div1{<BR>position:absolute;<BR>display:none;<BR>bottom:0px;<BR>border:3px double #ff00ff;<BR>height:100;<BR>width:200;<BR>z-index:2;<BR>left:0;<BR>background-color:#00ffff;<BR>}<BR>--&gt;<BR>&lt;/style&gt;<BR>&lt;script language="javascript"&gt;<BR>&lt;!--<BR>var runnerbottom=0;<BR>function run()<BR>{<BR>document.getElementById("div1").style.position="absolute";<BR>document.getElementById("div1").style.bottom=runnerbottom;<BR>runnerbottom+=<FONT color=#ff0000>2</FONT>;   每次运行增加的距离<BR>if(runnerbottom==<FONT color=#ff0000>400</FONT>)   //这个是指定当层与底的距离为指定距离时停止<BR>window.clearInterval(runto);<BR>}<BR>function show()<BR>{<BR>var divNode=document.getElementById("div1");<BR>divNode.style.display="inline";<BR>var runto=window.setInterval(run,<FONT color=#ff0000>10</FONT>); //每隔指定时间数运行一次run函数<BR>}<BR>//--&gt;<BR>&lt;/script&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;a href="javascript:show();"&gt;&lt;img src="" alt="单击图片显示层并滑动到指定的位置" height="100" width="200"&gt;&lt;/a&gt;<BR>&lt;div id="div1"&gt;&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;

juleitai 发表于 2007-9-11 09:38

可以出现层，但不是滑动的，好像是一下子就出来了？？？并且报错
[align=right][color=#000066][此贴子已经被作者于2007-9-11 9:55:14编辑过][/color][/align]

jkll007123 发表于 2007-9-11 11:24

在我这边测试没问题，你用什么浏览器？

jkll007123 发表于 2007-9-11 13:05

不好意思出了点小毛病<BR><BR>&lt;html&gt;<BR>&lt;head&gt;<BR>&lt;style type="text/css"&gt;<BR>&lt;!--<BR>#div1{<BR>position:absolute;<BR>display:none;<BR>bottom:0px;<BR>border:3px double #ff00ff;<BR>height:100;<BR>width:200;<BR>z-index:2;<BR>left:0;<BR>background-color:#00ffff;<BR>}<BR>--&gt;<BR>&lt;/style&gt;<BR>&lt;script language="javascript"&gt;<BR>&lt;!--<BR>var runnerbottom=0;<BR><FONT color=#ff0000>var runto;</FONT><BR>function run()<BR>{<BR>document.getElementById("div1").style.position="absolute";<BR>document.getElementById("div1").style.bottom=runnerbottom;<BR>runnerbottom+=2;   <FONT color=#ff0000>//</FONT>每次运行增加的距离<BR>if(runnerbottom==400)   //这个是指定当层与底的距离为指定距离时停止<BR>window.clearInterval(runto);<BR>}<BR>function show()<BR>{<BR>var divNode=document.getElementById("div1");<BR>divNode.style.display="inline";<BR>runto=window.setInterval(run,10); //每隔指定时间数运行一次run函数<BR>}<BR>//--&gt;<BR>&lt;/script&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;a href="javascript:show();"&gt;&lt;img src="" alt="单击图片显示层并滑动到指定的位置" height="100" width="200"&gt;&lt;/a&gt;<BR>&lt;div id="div1"&gt;&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;

juleitai 发表于 2007-9-11 16:31

多谢了，可以滑动了

论坛元老 发表于 2008-4-2 14:40

不错，值得学习

查看完整版本: [求助]我想实现层的滑动效果，请问怎么弄啊