首页
网页特效库
网页特效库
导航菜单
按钮表单
背景特效
时间日期
图片特效
鼠标特效
文本操作
窗口页面
状态栏类
警告对话
综合应用
游戏娱乐
首页
>
特效
>
图片特效
> 正文
纯CSS实现鼠标移上图片添加阴影效果
2009-12-31 图片特效 375℃
<p><style type="text/css"> *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(http://zlcool.com/jscss/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></p> <div id="profileAvatar"><i><i><i><i><a href="http://www.zlcool.com"><img id="image" alt="" width="180" onmouseout="show()" onmouseover="show()" src="/images/tx/s1.jpg" /></a> </i></i></i></i></div> <p>鼠标移上去显示圆滑的阴影 <br /> <br /> <input type="button" onclick="document.getElementById('image').width -=10;" value="缩小图片" /> <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></p>
相关特效代码
无相关信息
热门特效代码
js图片自动切换代码
CSS实现区域内等比例放大缩小图片
JS图片切换效果
飘动图片广告代码
鼠标经过图片变大
简单高效的javascript 幻灯片播放
JavaScript封装的平滑图片滚动,
点击图片出现大图
图片局部放大效果特效
图片上下左右拉伸效果特效
推荐特效代码
点击按钮淡入淡出弹出图文信息
探照灯效果图片特效代码
简单高效的javascript 幻灯片播放
飘动图片广告代码
JavaScript封装的平滑图片滚动,
超酷超绚精美图片展示效果代码