软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：CSS,图片,添加阴影

<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(http://files.jb51.net/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> 
<img src="http://www.jb51.net/images/logo.gif" width="215" id="image" onmouseover="show()" onmouseout="show()" /> 
    </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>

技术文章快速查找

利用腾讯的ip地址库做ip物理地址定位

jquery indexOf使用方法

Prototype ObjectRange对象学习

文本框中,回车键触发事件的js代码[多浏览器兼容]

jquery 分页控件实现代码

Javascript 获取页面高度（多种浏览器）

jquery1.4.2 for Visual studio 2010 模板文件

javascript中的缓动效果实现程序

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建