妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 17680|回复: 18

妙味课堂-特效-用原生JS实现jQuery导航效果

  [复制链接]
leo 发表于 2011-9-30 22:49:43 | 显示全部楼层 |阅读模式
妙味课堂5号QQ群(100566743)里,有一位朋友 [深圳]ICM ,在网上看到像这样的效果:

http://www.ahuing.com/other/dh/index.html

觉得很炫,又不想用jQuery,想用原生的JS实现,不仅如此,还积极实践的写了n多代码(这一点很令人喜欢哈~~),并与群里的朋友一起讨论了一天,即便没有成功实现,但也非常令人欣慰了。

现在写了一个类似的效果,供这位朋友参考:

3d_nav.gif

>>点击查看


这个效果在原先基础上,添加了自适应文字宽,所以先用这一段来动态设置每个a以及strong的宽

for(var i=0; i<aStrong.length; i++)
{

    aA.style.width=aStrong.style.width=aStrong.getElementsByTagName('span')[0].offsetWidth+'px';

    aStrong.style.position='absolute';

    aStrong.style.top=aStrong.style.left=0;
}



接下来,就比较容易了,原理也是很简单,当鼠标滑入时,让strong向上滑动到指定的位置,比如-40,当鼠标滑出时,strong再回到0的位置即可~


运动形式上,选择了缓冲运动,这样就不必判断方向了~~


-------------------------------------------------------------------------


这位5号群里的童鞋还发了一个问题帖,见这里:


http://bbs.miaov.com/viewthread.php?tid=1044&extra=page%3D1
回复

使用道具 举报

448426312 发表于 2011-10-2 10:02:09 | 显示全部楼层
blue老师,我看了下代码,下面这段else语句还不是很懂~

else
                {
                        var iSpeed=(target-obj.offsetTop)/10;
                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                        obj.style.top=obj.offsetTop+iSpeed+'px';
                }

麻烦详细讲解一下呢,或者用简单一点的代码来替换~~
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2011-10-2 22:13:42 | 显示全部楼层
blue老师,我看了下代码,下面这段else语句还不是很懂~

else
                {
                        var iSpeed=(target-obj.offsetTop)/1 ...
448426312 发表于 2011-10-2 10:02




话说我不是blue咧~~
这段代码就是妙味课堂的运动课程中出现的:缓冲运动公式了,你所发的效果,就是一个缓冲的变化,不是匀速的哈~~
回复 支持 反对

使用道具 举报

448426312 发表于 2011-10-3 13:01:53 | 显示全部楼层
额,不好意思,没有细看~~看视频的时候全是BLUE老师的~~
那段代码对我现在来说,貌似太复杂了,我记下这段代码,只能留待以后研究了~~~

灰常感谢leo老师~~~~(这次应该8会错了~~)
回复 支持 反对

使用道具 举报

chudaozhe 发表于 2011-10-5 14:41:13 | 显示全部楼层

弱弱的问下,老师的gif效果是怎样做的?
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2011-10-9 20:46:53 | 显示全部楼层
弱弱的问下,老师的gif效果是怎样做的?
chudaozhe 发表于 2011-10-5 14:41


呃。。。别叫“老师”了哈,妙味课堂里都直接叫名字的,GIF图片是用一个叫:CamtasiaStudio  的软件制作的~~
回复 支持 反对

使用道具 举报

chudaozhe 发表于 2011-10-9 21:56:47 | 显示全部楼层
谢leo~~~~:lol
回复 支持 反对

使用道具 举报

dongxue 发表于 2011-11-17 12:10:30 | 显示全部楼层
哦哦~~~~
回复 支持 反对

使用道具 举报

怎么都不会 发表于 2011-11-29 04:36:37 | 显示全部楼层
顶一个啊啊啊啊 啊啊啊
回复 支持 反对

使用道具 举报

蜜蜂小 发表于 2012-1-3 02:05:59 | 显示全部楼层
妙味课堂——用原生JS实现jQuery导航效果
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-3-23 08:07 , Processed in 0.157111 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表