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

   

   

   

    <!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>