"舍简求繁"的MSN Spaces图片浏览器

  • 时间:
  • 浏览:1
  • 来源:大发PK10APP下载_大发PK10APP官方

    LEFT: -906px; CLIP: rect(0px 919px 13px 906px);

    分析到这里,我都在些迷糊了,到底M$出于哪几种目而这麼设计实现了你這個 图片浏览器呢?!

早先微软给全都人 提供了一个多多多 叫MSN Spaces的博客类网站。初看Spaces它具有全都MyMsn的遗风,也支持在网页上自由托拽布局啥的,但微软的全都东西似乎习惯了叫好不叫卖,结果是到目前也并这麼不要 的人对其感冒。后来问你为何搞得国内的几只大blog SP对Spaces还展开了围剿之势,整个搞得乌烟瘴气、乱七八糟的。

    我对Spaces你這個 服务同样也是不感冒,它那有博客园用起来体贴舒服啊,不过MSN一系列网站在全都设计思想和开发技术上是非常值得全都人 关注的。在MyMsn出来不久的后来,我写过一篇文章介绍其自由拖放布局设计,"MyMsn动态Resize页框架的布局详解"。现在全都人 再来看看MSN Spaces顶端的一个多多多 组件,图片浏览器的实现细节。下图后来Spaces的图片浏览器的工具条,你這個 图片浏览和XP的资源管理的filmstrip浏览风格全都相像,而操作区又是模仿的WMP10哦。

    关键后来:CLIP: rect(0px 893px 13px 81000px);,它负责取出了图片中的:。

    Spaces这麼实现,且不说计算rect的麻烦,因为clip属性不不能在元素的position属性为absolute的情形下不能生效,全不不能计算被布局元素的left和top值后来容易。全都实现这麼一个多多多 图片浏览器,使用的javascript代码slideshow3.js文件一个多多多 后来: 6,288 lines。当然我目前人太好 能算得上好的一个多多多 好处后来可不不不能复用图片,解决众多*.gif小图片对Web服务器带来request负担,别的更大意义我暂时还未成想到。

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

    // 实际你這個 图是一排的,为了不影响blog的排版,我把它弄成两排     在Windows桌面守护线程池池中做过自定义皮肤,以及做过小的2D游戏的全都人 一定非常熟悉你這個 图片的布局格式。原来在网页制作中,全都人 习惯看过的似乎应该是一大堆小的*.gif图片,每个图片只含晒 我本人的显示内容。在Windows编程中提取这麼一个多多多 图片中的不不能主次,不不能对图片进行binary级别的操作,而在Web页面执行环境Browser中,是这麼土法子进行原来操作的。不过强大的CSS却可不不不能变通的解决原来的图片,使用CSS中的一个多多多 叫clip的属性就可不不不能得到一个多多多 大图片中,全都人 想要得到的任何主次来进行指定的显示,人太好 全都人 最终这麼物理上切割你這個 图片,但显示的效果完整篇 可不不不能达到期望。使用CSS里的clip解决图片最经典的应用场景是当初幻宇同志的JS星际顶端,在可移物体八方向移动姿态上,他把clip属性的使用发挥到了及至!不过JS星际因为图片资源不要 了,一个多多多 农民都在六个方向移动、采矿、修理,整个下来全用单独的*.gif小图,幻宇同志肯定早在图片素材解决上就累废了

    单看你這個 图片浏览器人太好 并这麼哪几种很糙,网上用javascript写的WMP10风格的视频播放器和flash播放器一把一把的,后来有不少还比你這個 错综复杂得多。这麼你這個 图片浏览器的很糙之处到底在哪里呢?在上图中随便找一个多多多 图片元素,不管是play, stop, forward还是backward按钮,点击右键选:Save Picture As...。这是全都人 存下来的是哪几种内容呢?是一个多多多 一个多多多 小的gif图片吗?当然都在了,不管在你這個 图片浏览器的任何图片上Save Picture As,全都人 得到的都在下面你這個 图片

    带来的负面哪几种的问題就比较多了,就正如我文章标题中说的你這個 设计是"舍简求繁"。因为使用绝对定位,每个position:absolute的图片的位置不要 固定,下图是该图片浏览器元素布局图:

   

    // DIV Elements' border is red, SPAN Elements' border is blue.



    再看前面说的那个CheckBox。刷新一下图片浏览器,或改变browser字体大小,顶端提到那个IMG的布局变为了:

    回头继续说Spaces的图片浏览器,这麼clip到底为何用呢?全都人 已第一张图片中"Show titles"按钮左边那个CheckBox的图片来举例,看看下面的代码就能清楚多了: