jquery之图片左右切换动画效果

2009年08月31日 by 张 鑫旭 阅读 45165 次, 今日 4 次

我很喜欢jQuery,因为我发现只要我对css的了解的足够深入,即使我JavaScript不是很在行,一样能做出些不错的动画效果。这里所要展示的是很常见的一种JavaScript特效,在很多地方可以见到,新浪音乐首页就有这种类似的效果。原理是一样的,具体实现可能有差异,如果纯粹的JavaScript写,我估计要整好一会儿,但是使用jQuery,实现这类动画效果就像是踩棉花一样——松松的。
在本实例中,具体描述这个效果就是,您单击上面的小图,下面的大图就会迅速切换到对应的大图,而这个来回移动的效果是很酷的。
提供实例效果演示页面,提供源文件打包下载,希望对您有所帮助。

阅读全文…

jQuery之replace字符串替换实现不同尺寸图片切换

2009年08月30日 by 张 鑫旭 阅读 28429 次, 今日 4 次

学习是需要积累的,即使是一个函数,只要肯想,会实现不少好的效果的。这里,就是活用了一个replace字符串替换实现了大小图片切换的效果。
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小(font-size)控制图片尺寸的做法是跟Google学习的,但是jQuery代码是根据效果自己想出来的,逻辑很简单,没有什么精妙之处。核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。
这里重要的其实是图片大小切换效果,里面所蕴含的前端知识还是很多的,可以说将Google的picasa相册图片大小切换实现给提炼简化出来了。
提供实例页面和源文件打包下载,希望能对您有所帮助。

阅读全文…

jQuery-实现图片的放大镜显示效果

2009年08月30日 by 张 鑫旭 阅读 57782 次, 今日 7 次

网上购物日趋流行,商品的图片很重要,一个页面上信息量很大,商品图片必然大小有限,很流行的做法是放在图片上,图片放大显示,例如:淘宝。
然而,淘宝的商品图片放大只是单纯的放大,如果能够实现移动放大,局部放大,那么效果会更上一层楼。这里,即将展示的就是类似于放大镜效果的图片局部放大效果。
提供实例页面和源文件打包下载。希望对您有所帮助。

阅读全文…

jQuery-单击文字或图片内容放大显示效果插件

2009年08月30日 by 张 鑫旭 阅读 93810 次, 今日 16 次

css很强大,jQuery也很强大,两者结合在一起就是无比强大。
这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物。
支持文字,图片,flash动画,视频,复杂div的居中放大显示,而且含有自适应内容大小的圆角投影效果。
本文提供简单的使用讲解,实例页面,以及文件的打包下载,希望对您有所帮助。

阅读全文…

reflection.js-实现图片投影倒影效果js插件

2009年08月30日 by 张 鑫旭 阅读 37366 次, 今日 3 次

如果您使用过igoogle的话,可能注意到其“谷歌图片集锦”模块的底部图片都是有投影效果的。
要实现这种图片投影效果,需要用到一个HTML5中使用的标签,canvas标签。
如果您对canvas标签不熟,没有关系,已经有人将这种投影效果写成了插件,您直接调用此js就可以实现投影效果了。
使用方法很简单:
1.调用此js;
2.需要投影的图片添加class——”reflect”;
然后预览就可以实现图片的投影效果了。
本文提供实例页面和打包下载,希望对您有所帮助。

阅读全文…

jQuery-很酷的弹出层效果js插件

2009年08月30日 by 张 鑫旭 阅读 142434 次, 今日 5 次

告别生硬的系统自带的弹出提示效果,享受前端技术带来的炫酷的视觉效果和舒适的交互体验。这里向您推荐一款不错的弹出层插件,可以放置文字,图片,flash以及复杂的div层,支持定时弹出层消失,用做提示再好不过了。您不妨也来体验一下。

阅读全文…

大小不固定的图片、多行文字的水平垂直居中

2009年08月28日 by 张 鑫旭 阅读 212985 次, 今日 43 次

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。
css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。一起来一睹为快吧!

阅读全文…

复选框单选框与文字对齐问题的研究与解决

2009年08月27日 by 张 鑫旭 阅读 128753 次, 今日 25 次

目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性,控件本身的特殊性以及代码成本的控制等,使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了,因为平时对这个问题注意的比较多,也经常做些测试,对这个问题还是有一定的了解,也总结了不少自己的解决方法。今天我就写下来,供交流与参考。
尤其是第三和第五个方法,我是比较推荐使用的,其他方法也是很不错的,对于理解css,拓宽思路还是有些帮助的。

阅读全文…

css margin的相关属性,问题及应用

2009年08月25日 by 张 鑫旭 阅读 95511 次, 今日 7 次

margin为css中非常常用的一个属性,其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述,包括其属性,使用过程中会遇到的问题,以及一些高级应用等。
其中属性将着重分享自己记margin各个参数个数位置含义的方法;
margin常见问题部分将讨论margin双倍边距形成的条件以及推荐的解决方法,讨论margin重叠的问题,简单叙述margin不起作用的一些情况;
margin负值的相关应用将讨论页面背景定位的问题,宽度自适应布局,选项卡中的应用,文字与图片对齐等问题。

阅读全文…

IE6下png背景不透明问题的综合拓展

2009年08月22日 by 张 鑫旭 阅读 171471 次, 今日 4 次

IE6不支持png背景透明或半透明。其解决方法有IE滤镜,纯粹的JavaScript,以及jQuery等,正所谓事非经过不知难,让png图片在IE6下背景透明显示只是第一步,如果对这些png图片做进一步的操作,往往会出现各类莫名的问题,例如无法响应单击事件,图片大小控制失效,无法实现background-position的定位等。本篇文章讲详尽阐述png背景透明会出现这些问题的原因,以及对每一个问题提供相应的解决方法,每个对应的方法提供相应的demo实例页面。在问题的探讨过程中会尽可能的分享我的一些经验。文章内容较多,涉及css, javascript, jQuery, flash, ActionScript, flash通信, photoshop图片处理等,有一定的深度和广度,希望对大家有帮助。

阅读全文…