百度图片放大特效

作者:林炜贤来源:www.163css.com发表时间:(2013-04-18)

首先,我们在百度图片里搜下汽车,出现下图:

当我将鼠标移到图片时,图片会放大,接着出现标题及大小网址,相对于以前的简单展示,这种模式显得高级点啊,我们看下GOOGLE的:

哈哈,看来百度学习google学得不错啊,毕竟美国人的技术还是牛啊,我们得向他学习。。。

作为一个草要站长,我们如何实现百度这种图片效果呢?

我就是能通过hover函数,加上样式名on,接着对放大的图片作下判断。。。

事实上,脚本实现起来是简单,但对于CSS代码,还是值得分析的:

当鼠标划过时,我们添加了样式名‘on’,这个时候得写上z-index,不然,弹出的层会被旁边的图片挡住。。。

下面的文字标题及图标呢,我们需要在p标签里写上relative,接着让图片absolute居右,不然,图标的位置就不会居右了。。

这是我制作的效果截图,相对百度来说,少了一个缓慢变大的过程。。。。这里,我们顺便提下之前做的百度图片自动缩放:“JS实现百度图片搜索等比例缩放”。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/10/bdpic/index.html

下载地址:百度图片放大特效.zip

返回作者主页:www.163css.com阅读 (3452)
更多 1