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

关于网站被挂马\黑客入侵的只读\误杀相关问题

如果网站被挂马或者黑客入侵,可能会对网站的功能和安全性造成影响,甚至会导致用户的隐私信息被泄露。 为了减少这种情况的发生,网站管理员需要采取一些安全措施,如定期检查网站是否存在漏洞,更新网站的软件版本和插件等。此外,网站管理员还需要设置强密码,限制登录次数和IP等。 如果网站被误杀导致被封禁或者无法访问,可以向相应的安全机构申诉,并提供相关证明材料。同时,也需要保证网站所有的内容和插件均为正版

Public @ 2023-06-18 09:50:17

网站成功关键之三:彪悍的执行力

为了让网站获得成功,具有彪悍的执行力是很重要的。以下是一些关键因素: 1. 严格遵循时间表:网站开发、更新和维护都需要时间计划。重要的是要保持这个时间表并及时完成工作。 2. 网站内容的时效性:网站上的内容应该有时效性,必须保证它的更新频率。确保网站上的信息是最新的,这可以提高网站流量和用户的满意度。 3. 报告和分析:每一个有用的浏览器统计工具都会在很大程度上增强您的执行力。使用网站分析工

Public @ 2023-06-07 09:00:16

如何设计一个成功的网站

1. 确定目标受众: 确定你希望网站吸引的受众群体并了解他们的需求和偏好,以此作为你网站设计的基础。 2. 网站结构的简洁性: 在设计网站时,应该尽量保持简单而清晰的布局和导航,让用户可以直观的理解网站的内容结构和信息架构。 3. 沉浸式体验: 网站设计不应该仅仅是美学和布局,用户体验应该与之紧密结合在一起,通过提供互动功能、引人注目的图片和动画等方式,创造出有趣、有趣和沉浸式的用户体验。

Public @ 2023-06-09 23:50:28

网站配色的实用须知

最近发现,很多用户都反馈,在做网站设计的时候对网站背景颜色的选取很难把握,不知道什么颜色才适合自己的企业网站。因此,这期就为大家分享一下网站的颜色应该如何选择。网站颜色的重要性根据研究表明,90%的快速购买决定完全是由颜色感知决定的。网页颜色搭配的是否合理会直接影响到访问者的情绪,它有助于创建想法,传达信息,调用情感和提高兴致。普通用户的注意力跨度为15秒,因此最好的方式就是让用户在你的网站上多停

Public @ 2009-07-02 15:45:21

更多您感兴趣的搜索

0.465046s