如何用css鼠标经过给图片添加个阴影效果呢?做网站的应该没有想过自己如何实现它呢?那就和合肥工作室一起来看看如何来实现这种效果吧!其实做起来很简单,关键是你想不想去做!有没有一颗坚持的心,相信自己,我能行,没有什么不可以!我先把代码贴出来吧!
<div id="profileAvatar">
<i><i><i><i>
<a href=http://www.lz-studio.net><img src="/jscss/demoimg/wall_s3.jpg" width="180" id="image" onmouseover="show()" onmouseout="show()" /></a>
</i></i></i></i>
</div>
<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>
<style>
*{padding:0;margin:0;}
body{background:#E8EDF1;padding:20px;}
#profileAvatar {overflow:hidden;zoom:1;}
#profileAvatar i{float:left;visibility:hidden;background:url(/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>
说下实现的思路,我们利用JS和CSS结合,适应大小不同的图片,值得大家尝试一用哦!
免费电话咨询
18955177249