关注前端开发
关注用户体验

经典滑动门-且看js和jQuery两版本哪个更胜

这是一个很不错的滑动门事件:

说说js版本的吧,js短小精湛,但html文档却很是臃肿;

jQuery版的相反,html赤裸文档,js更是小巧,令人着实喜欢。(css是一样的)

先看看两个版本的例子吧,效果一模一样:

js版本demo:http://www.daqianduan.com/demo/sliding-js.html

jQuery版本demo:http://www.daqianduan.com/demo/sliding-jquery.html

下面这个是js版的源代码

未经允许不得转载:大前端 » 经典滑动门-且看js和jQuery两版本哪个更胜
分享到:更多 ()

评论 60

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #42

    那里下载?

    辣角5年前 (2012-08-12)回复
  2. #41

    我认为纯JS的一般情况下要比jquery解析速度要快。当然还有个jquery库文件,块头也不小。
    还是根据项目情况决定。。

    Kite5年前 (2012-02-16)回复
  3. #40

    jquery没有效果啊。

    老Z6年前 (2011-12-11)回复
  4. #39

    从哪看下载的地址呢???

    蓝色冰点6年前 (2011-10-06)回复
  5. #38

    😛 😛

    蓝色冰点6年前 (2011-10-06)回复
  6. #37

    下面这个是js版的源代码

    where

    polaris04296年前 (2011-09-07)回复
  7. #36

    样式没法保存

    6年前 (2011-08-23)回复
  8. #35

    :sad:

    6年前 (2011-08-23)回复
  9. #34

    wo在哪里下载啊

    kuimin1296年前 (2011-07-27)回复
  10. #33

    收了。谢谢

    小鱼6年前 (2011-07-04)回复
  11. #32

    Hi

    Merrill Canizales6年前 (2011-05-09)回复
  12. #31

    Some time ago, I really needed to buy a good house for my business but I did not have enough cash and couldn’t buy something. Thank God my comrade proposed to take the personal loans from creditors. Hence, I acted so and was happy with my college loan.

    AgnesKaufman6年前 (2011-04-08)回复
  13. #30

    好的 谢谢
    :mrgreen:

    ko6年前 (2011-04-02)回复
  14. #29

    这个也很好········我先mark 再来学习······

    heson6年前 (2011-03-29)回复
  15. #28

    I’m adding your blog’s rss feed so that I can see your new posts. Keep up the good work!

    Green Tea6年前 (2011-03-24)回复
  16. #27

    Outstanding info it is surely. I’ve been looking for this content

    Inverter Generator6年前 (2011-03-11)回复
  17. #26

    Thanks for giving me the chance to read such a well written article, keep up the good work.

    Seedbox6年前 (2011-03-09)回复
  18. #25

    好像没有源代码啊!“下面这个是js版的源代码”,在哪里呀? :mrgreen: :mrgreen:

    John6年前 (2011-03-08)回复
    • 话说这哥们右键-查看源文件就ok了

      浩子6年前 (2011-03-09)回复
  19. #24

    Many thanks for the information in the post and also in people opinions.

    Katheryn Kieff6年前 (2011-03-08)回复
  20. #23

    Salute! You got to take a look at that interesting website – new car buying

    new car invoice prices6年前 (2011-03-08)回复
  21. #22

    Nice piece of information! May I reference part of this on my blog if I post a backlink to this webpage? ThanksThank you}.

    Free Debt Consolidation6年前 (2011-03-07)回复
  22. #21

    Cool news it is surely. I have been searching for this update

    Renting Generators6年前 (2011-03-07)回复
  23. #20

    Top-notch share indeed. My friend has been looking for this tips

    Generator Rentals6年前 (2011-03-05)回复
  24. #19

    very good article thanks for the info

    carpets6年前 (2011-03-04)回复
  25. #18

    Love the post, thanks keep up the good work! Bookmarked!. Great articles & Nice a site. .

    product reviews6年前 (2011-03-04)回复
  26. #17

    ???????????怎么评论部了

    smithyang6年前 (2011-03-03)回复
    • 初次评论需要审核!

      浩子6年前 (2011-03-04)回复
  27. #16

    真是太好了,谢谢

    smithyang6年前 (2011-03-03)回复
  28. #15

    💡 真是太好了

    smithyang6年前 (2011-03-03)回复
  29. #14

    Hi there may I use some of the information here in this post if I provide a link back to your blog?

    clickbank review6年前 (2011-02-11)回复
  30. #13

    Keep working ,splendid job!

    Arlinda Tweden7年前 (2011-01-11)回复
  31. #12

    滑动门只是一个css效果而已,你的js主要是为了实现tab切换。
    如果是两级菜单,貌似你用一个两层的ul更合理,js的写法就不罗嗦了。
    至于应用js库的问题,库的设计显然是为了解决项目问题而非技术问题的吧,尤其是项目中不断重复的同类问题。
    我们以前的库都是自己写的,为了精简合理。
    见笑了。

    水色7年前 (2010-08-23)回复
  32. #11

    博主很细心 还准备了源码体验和实例体验 赞 [:12]

    达人7年前 (2010-07-13)回复
  33. #10

    [:08] [:08] 不错不错 严重收藏

    达人7年前 (2010-07-13)回复
  34. #9

    @AKIN.C:确实是注释引起的问题 以前我都是用英文注释没遇到这种情况 确实不知道 原来这是编码不一致造成的 只要在CSS文件的头部添加@charset “gb2312″;设置CSS的编码就可以了!谢谢啦 又学到一个新知识!

    残云7年前 (2010-06-28)回复
  35. #8

    @残云:

    你说的应该是二级栏目的显示问题吧,直接把sliding.css样式表里的注释删除掉就可以了,很莫名奇妙的事情。 [:09]

    AKIN.C7年前 (2010-06-26)回复
  36. #7

    @残云:

    你说的应该是二级栏目的显示问题吧,直接把sliding.css样式表里的注释删除掉就可以了,很莫名奇妙的事情。

    AKIN.C7年前 (2010-06-26)回复
  37. #6

    @浩子:
    好的 谢谢

    残云7年前 (2010-06-23)回复
  38. #5

    @残云:ok,我再看看,调试好的话提醒你下!!

    浩子7年前 (2010-06-22)回复
  39. #4

    真的是很漂亮很简单的滑动门技术 我很喜欢 但是貌似在IE6的显示效果上不一样 有些不兼容 能不能做一个同样能兼容IE6的效果 虽然IE6也渐渐要淘汰了

    残云7年前 (2010-06-21)回复
  40. #3

    这样的滑动门也可以用简洁的html,简洁的js写出来啊。
    哪个版本更胜还得看具体的应用环境了。

    签名7年前 (2010-05-19)回复
  41. #2

    相比之下,我更喜欢js版本的,简单

    大⑨7年前 (2010-05-19)回复
  42. #1

    这是我见过最简单最漂亮的滑动门了,不收对不起自己,楼主真是强人啊

    大⑨7年前 (2010-05-19)回复

themebetter 国内更好的WordPress主题服务商

立即前往