图片经过时悬停动画
js方式兼容性到ie9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<style type="text/css">
ul{width:800px;margin:auto;}
li{list-style:none;width:200px;height:200px;margin-left:20px;float:left;background:url('images/buy_25.jpg') center no-repeat;}
/* li img{width:200px;display:inline;} */
/* img:hover{transform:scale(1.1);transition:all 1s ease 0s;-webkit-transform:scale(1.1);-webkit-transform:all 1s ease 0s;} */
</style>
<ul>
<li></li>
<li></li>
<li><!-- <img src="images/buy_25.jpg"/>-->
</li>
</ul>
<script type="text/javascript">
$(function(){
/*鼠标悬停动画*/
$('li').css({"background-size":"100%"});
$("li").hover(function() {
$(this).stop().animate({ "background-size": "108%"},{"duration":300});
}, function() {
$(this).stop().animate({"background-size": "100%"},{"duration":300});
});
});
</script>
</body>
</html>
css3方式兼容到ie10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<style type="text/css">
ul{width:800px;margin:auto;}
li{list-style:none;width:200px;height:200px;margin-left:20px;float:left;overflow:hidden;}
li img{width:200px;display:inline;}
img{transition:all 0.3s;}
img:hover{transform:scale(1.1);transition:all 1s ease 0s;-webkit-transform:scale(1.1);-webkit-transform:all 1s ease 0s;}
</style>
<ul>
<li>
<img src="images/buy_25.jpg"/>
</li>
<li>
<img src="images/buy_25.jpg"/>
</li>
<li>
<img src="images/buy_25.jpg"/>
</li>
</ul>
</body>
</html>
css3鼠标经过图片放大、增加白色透明遮罩效果。
.work-item img:hover{transform:scale(1.1);transition:all 1s ease 0s;-webkit-transform:scale(1.1);-webkit-transform:all 1s ease 0s;}
.newslist li img:hover{opacity:.7;}
