前端开发常用技巧

1、背景图片中部放大、缩小

<html>
<head>
    <title>测试背景图片属性</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <style>
        .back{width:200px;height:200px;line-height:200px;background-image:url("http://a.hiphotos.baidu.com/image/pic/item/f9dcd100baa1cd11daf25f19bc12c8fcc3ce2d46.jpg");background-repeat:no-repeat;background-size:90%;background-position:center;}
    </style>
</head>
<body>
    <div class="back"></div>
    <script>
        $(".back").mouseover(function(){
            $(".back").animate({backgroundSize:'95%'},1000,function(){});
        });
        $(".back").mouseout(function(){
            $(".back").animate({backgroundSize:'90%'},500,function(){});
        });
    </script>
</body>
</html>

 

你可能感兴趣的:(前端开发常用技巧)