您的位置：首页 > Web前端 > CSS

CSS3-阴影 效果做成的立体图片效果

2013-12-30 20:35 375 查看




 
 
 
 
 
 
 
 <!DOCTYPE
html>
<html>
<head>
   
<meta charset="utf-8">
   
<title>图片阴影效果</title>
   
<script
src="js/jquery.js"></script>
   
<style>
   
    #mypanel{
   
     
  width: 537px;
   
     
  height: 430px;
   
     
  margin: 90px auto;
   
    }
   
    img{
   
     
  -webkit-box-shadow:8px 8px 10px
black;
   
     
  -moz-box-shadow:8px 8px 10px black;
   
    }
   
</style>

</head>
<body>
   
<div id="mypanel">

   
</div>
   
<script
type="text/javascript">
   
    //图片的张数
   
    var img_count=4;
   
    for(var
i=0;i<img_count;i++){
   
     
  var
image=document_createElement_x("img");
   
     
 
image.setAttribute("src","images/shadow"+(i+1)+".jpg");
   
     
  image.setAttribute("class","img");
   
     
  image.style.width="250px";
   
     
  image.style.margin="8px";
   
     
 
   
     
 
document.getElementByIdx_x("mypanel").a(image);

   
     
  //设置鼠标移动到图片上变阴影的效果
   
     
  $(".img").each(function(){
   
     
     
$(this).mouseover(function(){
   
     
     
   
$(this).css("-webkit-box-shadow","8px 8px 10px gray");
   
     
     
    //鼠标变成小手形状
   
     
     
   
$(this).css("cursor","pointer");
   
     
     
});
   
     
     
$(this).mouseout(function(){
   
     
     
   
$(this).css("-webkit-box-shadow","8px 8px 10px
black");
   
     
     
});

   
     
  });
   
    }
   
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航