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. 影响品牌知名度 一个好的域名能帮助公司更容易被人们记住和搜索,增加品牌知名度和曝光度。 2. 影响品牌信任度 一个与品牌相关的域名可以增加品牌的信任度和可信度,并让客户更愿意与品牌建立联系和交易。 3. 影响品牌声誉 域名的历史和背景可能会影响品牌声誉,如遭受黑客攻击或有涉嫌违法行为的历史。 4. 影响品牌传播效果 域名的易用性和可记性影响品

Public @ 2023-04-24 22:00:20

令网站打开提高速度的7大秘方

1. 优化图片:使用适当的格式和尺寸来实现快速加载图片。 2. 压缩文件:压缩文件大小以减少加载时间。 3. 简化代码:消除不必要的代码,使页面更轻量级,加载更快。 4. 将CSS和JS文件放在顶部:这会在页面加载时优先加载CSS和JS,并且减少延迟。 5. 使用CDN:CDN(内容分发网络)通过运用多个位于全球各地的服务器来缓存和分发网站内容。这可以显著加快网站的加载时间。 6. 使缓

Public @ 2023-06-24 16:00:10

十大网站设计错误

1. 缺乏响应式设计:网站无法适应不同设备和屏幕尺寸,导致用户体验差。 2. 复杂的导航结构:网站的导航结构过于复杂,用户难以找到所需内容。 3. 信息过载:网站页面上充斥着大量的信息和广告,导致用户无法专注于重要内容。 4. 缺乏明显的呼吁行动:网站缺乏明确的呼吁行动按钮,让用户难以进行预期的操作。 5. 慢加载速度:网站加载速度过慢,导致用户等待时间过长,影响用户体验。 6. 闪光效果过度:网

Public @ 2023-07-21 18:00:33

网站成功关键之一:网站设计

你愿意把自己辛苦挣来的钱花在一个连网站都建的马马虎虎的网站身上吗?答案是否定的,网站的设计是网络营销的第一步。下面卢松松将从网站设计方面来讲解影响网站成功的因素,2011年,让我们从新设计自己的网站吧。1:颜色是影响网页的重要因素不同的颜色对人的感觉有不同的影响。如:红色和橙色使人兴奋并使得心跳加速;黄色使人联想到阳光;黑颜色显得比较庄重,考虑到你希望对浏览者产生什么影响。所以,当你决定做一个网站

Public @ 2009-12-09 15:45:21

更多您感兴趣的搜索

0.449090s