网页浮动层之我见:优势很多 但也不能滥用


  浮动层是网页效果中的一种形式,它的表现样式为其始终显示在屏幕的特定位置上,不跟随鼠标的滚动而滚动以达到强调其内容的或者衔接上下文解释说明的效果。

  浮动层在前段时间沉寂了一下下,现在,又重出江湖,得到了重视,发挥其巨大的作用(PS:浮动广告不算其列)。

  浮动层在网页中的应用主要有以下几种情况(自己总结,不全面请补充哦):

  1 导航类浮动层:

  当网友在某一页面中浏览内容时发现已没有兴趣或者没有找到自己想要找到的内容的时候,需要从导航进入到另一个页面里继续浏览或者找寻。故当现有的很多导航为固定导航时,网友需要将页面重新拉回到顶端或者结合“返回顶端”按钮来进行下步操作(没有“返回顶端”按钮就比较悲剧了T_T)。但是如果导航做成浮动的,这个问题就比较完美的解决了。

  如图A。 新版的新浪微博的页顶一级导航采用了浮动的效果,符合微博用户的心理(很少微博用户能一页一页耐心仔细的翻看微博,微博的浏览是跳跃式的),跳转更方便。与此同时,淘宝的商品详情页也进行了细微的改版,商品详情切换导航才用了浮动层得效果,也和从前就存在的“返回顶部”做了整合,切合现在商品展示越来越细,页面越来越长的实际情况。


  2 对比类浮动层

  现在各种产品越来越丰富,用户越来越无从下手,所以各种产品页面都增加了对比的功能,有两种,三种,四种产品同时对比,且对比的参数也越来越多,导致对比的页面越来越长。

  如果有4种产品同时对比,对比参数的列表高度有1屏以上,那么浏览到下面,用户会有大脑混乱的可能,某个参数到底是哪个产品的?同学,你有没有这种情况的发生?当产品的名称行做成浮动的,一直提示用户某个参数对照某一产品,用户头脑会清晰很多,相应的,也能很快的对产品做出选择。

  例如图B中的QQ汽车对比页面,汽车的参数有很多,所以这个对比页面的高度很高,还有正在规划设计中的365商业地产单铺对比页面,最多同时有4个商铺进行对比,页面单位信息量太大,所以此类对比页面产品名称行做成浮动是比较合适的,让用户一目了然,不再有参数与产品对不上的感觉。


  3 提示类浮动层

  此类浮动层应用是最广泛的,各种客服,返回页顶,新版提示等等,都会采用这种形式。如图C。


  虽然浮动层的优势很多,但是也不能滥用,针对各种情况要进行用户浏览方式的分析,合理的使用浮动效果。同时也要控制浮动层的数量,不是越多越好。Thank you!

  作者:文击每耳

  文章来源:365ucd.com

时间: 2024-07-28 17:40:44

网页浮动层之我见:优势很多 但也不能滥用的相关文章

js实现从右向左缓缓浮出网页浮动层广告的方法

  这篇文章主要介绍了js实现从右向左缓缓浮出网页浮动层广告的方法,可实现右侧浮动广告的定时弹出及点击展开.折叠等功能,非常具有实用价值,需要的朋友可以参考下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

兼容标准XHTML的浮动层特效实现

xhtml|标准|浮动|浮动层|特效 关键字: div, layer, absolute, 层, 移动, setCapture 1. 浮动层的显示.移动一个简单的例子:<div id="mydiv" style="position:absolute;">my div contents</div><script language="javascript">var dX = 10;var dY = 10;funct

JavaScript点击按钮后弹出透明浮动层的方法

  这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

FLASH遮盖了浮动层解决方法

flash遮盖了浮动层解决方法 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-e

jQuery powerFloat万能浮动层下拉层插件使用介绍_jquery

一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:"懒".不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉就好比<大话西游>里悟空一巴掌拍死唐僧这只苍蝇一样.那,这里提及的类似的功能是指?当当当当,就是与某元素有位置关系的浮动层(例如tip类效果,鼠标经过显示大图,下拉列表等). 二.插件概述 插件名为jque

JavaScript点击按钮后弹出透明浮动层的方法_javascript技巧

本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法.分享给大家供大家参考.具体分析如下: 这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下. <HTML> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <META http-equiv=Content-Type content="text/htm

js 浮动层菜单收藏_导航菜单

使用说明 即仅需把附件中的 JS 文件和 CSS 文件引用到网页里,如: 复制代码 代码如下: <script type="text/javascript" src="DivMenu.js"></script> <link href="DivMenu.css" rel="stylesheet" type="text/css" /> 在线演示 http://img.jb51

js 右侧浮动层效果实现代码(跟随滚动)_javascript技巧

实现代码一. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <!--**

js 弹出浮动层

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-