Categories


Tags


十个JavaScript页面布局技巧

交付信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计,能使用户更好的理解内容。不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它。本文里面收集的11种高超的JavaScipt技术,让你更好的控制内容的显示方式,以便用于下一次的布局设计。

“页面滑动门”, “隐藏的内容”, “图片和内容滑动门”, “动画幻灯片”, “传送带”, “Tab内容选项卡” ,结合各种拖拽、滑动、灯箱等特效,这就是下面将为你呈现的。

1. jQuery pageSlide

jQuery pageSlide 是一个jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就弹出来。再次点击隐藏页面以外的空间,它就又关闭。

这适合在有限的空间里,在主页里放重要内容,而隐藏页放一些并不一定要显示,而是有需要的用户才去展开显示的内容。

2. Create a simple ul list with a nice slide-out effect for<li>elements

这个教程使用 MooTools slideOut() ,实现一个简单的UL列表,且为每个LI元素添加一个漂亮的点击隐藏特效。

3. Portfolio Layout Idea Using jQuery

非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。

它在页面两边显示带缩略的作品列表,当你点击每个条目时,会在中间部分以退场然后进场的特效呈现出该作品的全部内容。

4. Creating a Slick Auto-Playing Featured Content Slider

Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件 ,实现我们常说的”图片焦点特效”。多用于门户站。

5. Easy Image or Content Slider

可设置项非常丰富的滑动门特效。

6. mooSlide

mooSlide 是一个可以用来取代“lightbox” 模块的特效脚本,它拥有许多有趣的功能选项,比如它可以从上或从下面弹出,它支持载入其它页面的内容等。

7. jQuery.SerialScroll

jQuery.SerialScroll 可以让任何元素实现漂亮的动画移动效果。它使用 jQuery.ScrollTo 来实现移动特效。

8. Agile Carousel

9. Animated JavaScript Slideshow

这个轻量级的JavaScript动画幻灯片脚本,包含一系列很酷的功能来样式化你的内容: 描述支持,链接支持,没有命名限制,肖像图片支持,缩略图状态等等。

10. Sexy Lightbox 2

Sexy Lightbox 2是一个精美的Lightbox克隆,不过它更小巧. 支持显示图片和HTML元素,并且完全兼容HTML, 也就是说它可以显示条目,页面,视频和所有其它你想要显示的东西。超大图片还可以自适应浏览器。需  要Mootools框架。

11. UI.Layout

这个布局脚本的灵感来自于 extJS border-layout. 它可以创建任何你想要的UI外观-从简单的标题到侧边栏,到一个应用程序的工具栏,菜单,帮助面板,状态栏,提并表单等等。(via)

来源:月光博客


Public @ 2018-11-27 15:45:15

网站建设:提高网站访问量的策略

提高网站访问量是每个网站所有者都关注的一个问题。以下是一些提高网站访问量的策略: 1. 优化SEO:通过优化网站的SEO(搜索引擎优化),使其在搜索引擎中更容易被找到。优化关键词、网站结构以及内容质量是其中重要的一部分。 2. 内容营销:提供高质量、有价值的内容来吸引用户。可以通过博客、文章、视频等形式分享有益的信息,吸引访问者并保持他们的兴趣。 3. 社交媒体推广:在社交媒体平台上建立品牌

Public @ 2023-07-28 06:50:32

[原创]shopex清理数据库挂马

最近收到客户反馈,网站出现意外弹窗和挂马的情况,于是对其进行了一番排查。最终发现是由于shopex数据库积累了大量的无用数据和垃圾数据,导致网站运行缓慢,甚至被黑客攻击。 为了解决这个问题,我们采用了以下方法: 1. 清除无用数据 首先,我们针对数据库进行深度清理,删除所有无用的数据记录。这些数据可能是已经过期或者无用的,例如一些用户退订了订阅,但是它们的数据仍然保留在数据库里面。我们使用卡

Public @ 2023-04-05 19:50:38

从SEO角度看网站重新设计

作为AI,我无法感知界面美学,但从SEO的角度来看,对网站进行重新设计可能对SEO产生以下影响: 1. 更好的用户体验—— 用户体验是重要的SEO因素,因为Google更青睐用户体验良好的网站,重新设计网站可能会提高用户体验,从而提高排名。 2. 更好的可访问性—— 网站重新设计可能会更好地满足残障人士的需要,这将提高网站的可访问性,从而提高在搜索引擎中的排名。 3. 更好的技术基础—— 网

Public @ 2023-04-27 18:00:20

把握5元素,让页面文字阅读更舒适

一、创造有趣的内容。 1.建立有意义的内容,围绕主题来组织文章,合理的主题让读者更快的把握文章的重点和脉络,更舒服的阅读文字。 2.使用语言活泼生动,文字有形象、有趣、有搞笑效果,能够让读者有更加舒适的阅读体验。 3.更合理的字体布局,字体大小,字体间距,行与行之间的距离等,让页面的字体布局美观大方,更利于读者的阅读。 4.关于图文的搭配,贴合主题的图文伴随,能够让文字更有生命力,也能

Public @ 2023-03-04 20:00:21

更多您感兴趣的搜索

0.414894s