2009年09月5日 by 张 鑫旭 阅读 497375 次, 今日 21 次
在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。css中有个属性叫做text-overflow:ellipsis;配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示,在加上opera浏览器的私有属性-o-text-overflow:ellipsis;就目前而言,可以实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省略号显示。
而本文将提供多种兼容性上佳的文字溢出点点点省略号显示的方法,而里面不少方法就是自己想出来的。有使用外部辅助文件的,有纯粹的css方法的,还有使用jQuery方法的。每种方法都提供各个浏览器下的截图验证,提供实例页面,提供部分源文件,都是值得信赖的方法,希望对您有所帮助。
阅读全文…
标签: box-flex, ellipsis, text-overflow, 字符限制, 插件, 点点点, 省略号
发布在 Web综合 | 120 条评论 »
2009年08月31日 by 张 鑫旭 阅读 59330 次, 今日 1 次
这是我上个月做的一个实例页面,主要想试试如何使用append加载HTML元素,于是想到做一个插入图片的效果。所以这个实例不是为了做插入图片效果而写的js代码,而是为了试试append而做了插入图片的效果。因而做插入图片,这个的代码肯定不是什么值得推荐的代码,但是对于了解append以及insertBefore还是有帮助的。
效果很简单,单击插入图片按钮,就会在页面上插入一张图片,直到8张图片全部显示完毕。
提供实例页面以及源文件下载,希望能对您有所帮助。
阅读全文…
标签: append, insertAdjacentHTML, insertBefore, jQuery, 插入图片
发布在 jQuery相关 | 4 条评论 »
2009年08月31日 by 张 鑫旭 阅读 49993 次, 今日 2 次
这里要介绍的这个效果又称为手风琴效果。用css就可以实现类似的效果,但是使用css只是单纯地将宽度变大和缩小,而使用jQuery可以实现流畅的动画效果,体验会更加不错的!而实现的关键就是animate这个很神奇很伟大很实用的动画函数。
主要的不是讲解animate这个函数,我jQuery,js研究不深,讲了只会被人笑。所以这里只是展示下效果而已,希望能对您有所帮助!
阅读全文…
标签: animate, css相关, javascript, jQuery, 关联伸缩, 图片, 手风琴效果, 滑动效果, 特效菜单
发布在 jQuery相关 | 9 条评论 »
2009年08月31日 by 张 鑫旭 阅读 67799 次, 今日 1 次
我很喜欢jQuery,因为我发现只要我对css的了解的足够深入,即使我JavaScript不是很在行,一样能做出些不错的动画效果。这里所要展示的是很常见的一种JavaScript特效,在很多地方可以见到,新浪音乐首页就有这种类似的效果。原理是一样的,具体实现可能有差异,如果纯粹的JavaScript写,我估计要整好一会儿,但是使用jQuery,实现这类动画效果就像是踩棉花一样——松松的。
在本实例中,具体描述这个效果就是,您单击上面的小图,下面的大图就会迅速切换到对应的大图,而这个来回移动的效果是很酷的。
提供实例效果演示页面,提供源文件打包下载,希望对您有所帮助。
阅读全文…
标签: javascript, jQuery, 交互, 动画, 滑动, 绝对定位
发布在 jQuery相关 | 13 条评论 »
2009年08月30日 by 张 鑫旭 阅读 43101 次, 今日 1 次
学习是需要积累的,即使是一个函数,只要肯想,会实现不少好的效果的。这里,就是活用了一个replace字符串替换实现了大小图片切换的效果。
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小(font-size)控制图片尺寸的做法是跟Google学习的,但是jQuery代码是根据效果自己想出来的,逻辑很简单,没有什么精妙之处。核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。
这里重要的其实是图片大小切换效果,里面所蕴含的前端知识还是很多的,可以说将Google的picasa相册图片大小切换实现给提炼简化出来了。
提供实例页面和源文件打包下载,希望能对您有所帮助。
阅读全文…
标签: em, font-size, javascript, jQuery, picasa, replace, web前端, 图片大小切换
发布在 jQuery相关 | 2 条评论 »
2009年08月30日 by 张 鑫旭 阅读 88607 次, 今日 3 次
网上购物日趋流行,商品的图片很重要,一个页面上信息量很大,商品图片必然大小有限,很流行的做法是放在图片上,图片放大显示,例如:淘宝。
然而,淘宝的商品图片放大只是单纯的放大,如果能够实现移动放大,局部放大,那么效果会更上一层楼。这里,即将展示的就是类似于放大镜效果的图片局部放大效果。
提供实例页面和源文件打包下载。希望对您有所帮助。
阅读全文…
标签: jQuery, 图片放大, 插件
发布在 jQuery相关 | 6 条评论 »
2009年08月30日 by 张 鑫旭 阅读 125081 次, 今日 2 次
css很强大,jQuery也很强大,两者结合在一起就是无比强大。
这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物。
支持文字,图片,flash动画,视频,复杂div的居中放大显示,而且含有自适应内容大小的圆角投影效果。
本文提供简单的使用讲解,实例页面,以及文件的打包下载,希望对您有所帮助。
阅读全文…
标签: css相关, javascript, jQuery, png, 内容放大显示, 图片放大, 圆角, 投影, 插件, 自适应圆角投影
发布在 jQuery相关 | 15 条评论 »
2009年08月30日 by 张 鑫旭 阅读 68339 次, 今日 3 次
如果您使用过igoogle的话,可能注意到其“谷歌图片集锦”模块的底部图片都是有投影效果的。
要实现这种图片投影效果,需要用到一个HTML5中使用的标签,canvas标签。
如果您对canvas标签不熟,没有关系,已经有人将这种投影效果写成了插件,您直接调用此js就可以实现投影效果了。
使用方法很简单:
1.调用此js;
2.需要投影的图片添加class——”reflect”;
然后预览就可以实现图片的投影效果了。
本文提供实例页面和打包下载,希望对您有所帮助。
阅读全文…
标签: box-reflect, canvas, HTML5, jQuery, js相关, 图片投影效果, 插件
发布在 JS实例 | 9 条评论 »
2009年08月30日 by 张 鑫旭 阅读 209160 次, 今日 6 次
告别生硬的系统自带的弹出提示效果,享受前端技术带来的炫酷的视觉效果和舒适的交互体验。这里向您推荐一款不错的弹出层插件,可以放置文字,图片,flash以及复杂的div层,支持定时弹出层消失,用做提示再好不过了。您不妨也来体验一下。
阅读全文…
标签: css相关, flash, javascript, jQuery, js相关, 交互, 前端, 弹出层效果, 插件
发布在 jQuery相关 | 31 条评论 »
2009年08月28日 by 张 鑫旭 阅读 407641 次, 今日 10 次
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。
css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。一起来一睹为快吧!
阅读全文…
标签: Firefox, hack, IE, inline-block, table-cell, vertical-align, 兼容性, 垂直居中, 浏览器
发布在 CSS相关 | 98 条评论 »