纯CSS实现的当鼠标移上图片添加阴影效果代码

更新时间：2009年12月22日 23:07:56 作者：

这个效果挺实用，当把鼠标放到一幅静止的图片上，图片的四周边框会出现阴影，具有立体感的效果，代码是第二次修正，能适应大小不同的图片，值得大家尝试一用哦。

<html> <head> <title>CSS给图片添加阴影</title> <style> *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(//img.jbzj.com/demoimg/200912/avatar.gif) 0 0 no-repeat;} #profileAvatar i i{background-position:100% 0; } #profileAvatar i i i{background-position:0 100%;} #profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; } #profileAvatar img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;} </style> </head> <body> <div id="profileAvatar">                     <i><i><i><i> <a href="https://www.jb51.net"><img src="https://www.jb51.net/images/logo.gif" width="215" id="image" onmouseover="show()" onmouseout="show()" /></a>     </i></i></i></i> </div> 鼠标移上去显示圆滑的阴影   <input type="button" value="缩小图片" onclick="document.getElementById('image').width -=10;" /> </body> <script type="text/javascript">     var imgBg=document.getElementById('profileAvatar').getElementsByTagName('i')     function show(){         for(i=0;i<imgBg.length;i++)         {                 if(imgBg[i].style.visibility=='visible')             imgBg[i].style.visibility='hidden';             else             imgBg[i].style.visibility='visible'         }     } </script> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

照片各部分的彩色与黑白交替更换
照片各部分的彩色与黑白交替更换...
2007-02-02
javascript 指定区域内图片等比例缩放实现代码脚本之家整合版
javascript 区域内图片等比例缩放实现代码脚本之家整合版，兼容ie跟firefox。
2009-10-10
js 图片放大效果修正版
下面的演示可能存在一些与页面JS冲突的问题。如果想要演示或者完整的放大效果 html
2010-05-05
图片友情链接滚动横向,带控制按钮
超不错的图片友情链接滚动特效,横向排列,带控制按钮,这里已经将横向锁定,不能将其修改为竖向的,否则会出错,专一用于横排的图片滚动,也可以不用作友情链接,产品滚动当然也可以哦.
2009-10-10
js 新浪的一个图片播放图片轮换效果代码
新浪网的一个图片展示效果！不错的效果！共享一下。
2008-07-07
仿Vista进程条效果
仿Vista进程条效果...
2007-03-03
javascript实现网站顶部出现几秒后图片缓慢消失的效果
快过年了，很多网站首页都放上了新春的祝福，有些是直接换成皮肤了，而有些则是用一张很大的图片放在网站顶部，在倒数几秒后，缓慢升上去直到最后消失。
2011-01-01
多图幻灯Wipe擦洗效果
多图幻灯Wipe擦洗效果...
2006-12-12
JS 单击连接保存图片的函数
下面的代码主要用于一些图片网站上，只要点击一下链接，即可出现保存图片对话框。
2009-04-04
超级简单的图片防盗(HTML),好用
超级简单的图片防盗(HTML),好用...
2007-04-04