文章关键字 ‘图片’

纯js无图片无外链CSS图片幻灯片播放插件

2010年05月5日,星期三

美女 1分快3
本文展示我自己写的极轻量级的图片幻灯片播放的插件js,无外链图片,无外链CSS,兼容性性效果俱佳,无需调用外部的库,可谓大图幻灯片播放之首选。
本文提供demo,源文件下载,以及使用示例,希望能对您有所帮助。

阅读全文…

CSS “渐进增强”在web制作中常见应用举例

2010年04月29日,星期四


“渐进增强”是对”Progressive Enhancement”一词的译文,我觉得翻译的很是得体。所谓“渐进增强”,有点农村包围城市的味道。打个不太恰当的比方,就是要先解决广大劳苦大众的温饱问题(即“渐进”),再这个基础上尽量的往小康方向发展(谓“增强”),至于是否要所有的人都过着小康水平,则不强求,当然越多小康家庭越好,没有也无妨,反正温饱不成问题,至少不会饿死。

就目前而言,虽对“渐进增强”有所了解的人挺多,但是要说普及与深入人生还远远不到火候。再举个不恰当的比方,现在就页面重构而言,占据主流的还是 “大锅饭”思想,即人人平等,人人相等,也就是以各个浏览器下表现一致为准则。这本身没有什么问题,大家都有饭吃,但是,显而易见,这会让领先的浏览器(Firefox、chrome等)优势无法显现出来。

CSS的“渐进增强”有别于CSS hack,hack可以说是提供选择,你死我亡,竞争效应;而“渐进增强”属于更进一步,锦上添花,辅助效应。前者应尽量避免使用,而后者适当使用则有裨益……

本文将非常详细的展示“渐进增强”在web站点上的一些常见应用,提供丰富的截图示例,希望能对您的学习有所帮助。

阅读全文…

jQuery Lightbox(balupton版)图片展示插件讲解

2010年01月17日,星期日

插件效果截图

jQuery Lightbox(balupton版)图片展示插件可以说是最优秀的lightbox效果的图片上一个下一个图片切换显示插件,没有之一。我将其原项目进行了翻译,自己进行了一系列的测试,并对原js文件一些英文内容替换成了中文,修改部分CSS文件代码使更符合中文的显示。

本文提供此插件详尽的概述,提供源文件下载,配合demo页面,相信一定会对您对这款插件的掌握有所帮助的。

阅读全文…

CSS3 animate实现图片墙3D翻转效果

2010年01月12日,星期二

本文主要就是展示了一个用纯CSS实现的图片墙动画3D翻转效果,有图片演示,有视频演示,有demo页面,提供简单的代码分析和原理讲解。目前而言仅chrome浏览器和Safari浏览器下有效果,所以,本文主要在于展示CSS3的一些特性以及潜能。希望对有兴趣的朋友有所帮助。

阅读全文…

像素的世界及其在web开发制作中的应用

2009年12月7日,星期一


什么是像素的世界?如果您现在正在电脑前看这篇文章,那么您现在看到的就是像素的世界。本文的中心思想就是传达我们眼前所见都是由像素构成的这个意识。为了是让我们多一种思维的角度,对于我们web设计与开发有所帮助。内容多是个人的观点,可能会有不正确之处,欢迎指正,欢迎交流。提供必要的demo页面,配合丰富的插图,希望对您的学习有所帮助。

阅读全文…

CSS实现圆角六色渐变自适应按钮详解

2009年11月21日,星期六

本文将要展示如何用纯css实现2个像素的真正意义上的圆角,并且按钮带有细腻圆滑的渐变效果,其色彩丰富,可支持6种过渡色,从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理,将代码形象化,提供demo,希望您可以充分了解这种技术,也希望能开阔您的思维,对您的工作与学习有所帮助。

阅读全文…

告别图片—使用字符实现兼容性的圆角尖角效果beta版

2009年11月6日,星期五

字符既是文字又是图片,所以很多时候我们可以使用字符代替图片实现一些貌似只有图片才能实现的效果,例如,圆角,尖角等。您就可以使用字符实现这类效果。可以优化页面,提高性能。
本文以Google gmail邮箱中字符应用为引子,讨论的字符的一些特性,与图片相比的一些优缺点。而后,以字符+css的方式展示如果使用字符实现圆角效果,如何实现尖角效果。最后拿新浪微博的对话框做实际的实例,演示如何使用字符代替图片,实现几乎同样效果的优化,以展示字符的实际应用性及潜力。
本文提供详尽细致的demo页面,提供源文件打包下载,希望本文的论述能够对您有所帮助。

阅读全文…

JavaScript实现图片幻灯片滚动播放动画效果

2009年10月21日,星期三

在网页上用幻灯片动画效果展示图片等是常用的手段之一,有一类效果相对酷一点的是JavaScript+flash的实现,但是一般这类动画总是占据网页最重要的位置,如果用户未安装flash插件,则显然会有问题。在大型网站上,多使用纯粹的JavaScript实现这类效果。
这里我就尝试性的实现了这个效果。在本文中所展示的这个图片切换的JavaScript代码,个人觉得,还是挺精炼的,希望对有兴趣的同仁能提供一些参考。提供直观的demo实例页面,源代码可以在实例页面上右键单击查看,希望对您有所帮助。

阅读全文…

搜狐白社会似iphone短信对话框效果的优化

2009年09月10日,星期四

搜狐有个白社会,今年六七月份露出水面的。其首页css我是从头到尾看了一遍,学了些东西,也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框,有些形似iphone里面的可爱的短信对话框。

这个对话框效果是不错的,能支持高度上限500像素的文字内容,宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后,发现要实现这样的效果,这代码,至少是这图片肯定是优化不够的。而本文将对比其原来的方法,提供更加大小优化的图片和对应的没有兼容性问题的css代码,看如何将css发挥到机制实现图片背景的优化。

文章主体将简要展示对原图片做如何的处理,展示在各个浏览器下的兼容性表现,以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助!

阅读全文…

jQuery之图片关联伸缩效果

2009年08月31日,星期一

这里要介绍的这个效果又称为手风琴效果。用css就可以实现类似的效果,但是使用css只是单纯地将宽度变大和缩小,而使用jQuery可以实现流畅的动画效果,体验会更加不错的!而实现的关键就是animate这个很神奇很伟大很实用的动画函数。
主要的不是讲解animate这个函数,我jQuery,js研究不深,讲了只会被人笑。所以这里只是展示下效果而已,希望能对您有所帮助!

阅读全文…