<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<meta charset="UTF-8">
<style>
div {
text-align: center;
border: 1px solid #a1a1a1;
width: 100px;
height: 100px;
border-radius: 15px;
padding: 2px;
overflow: hidden;
}
img {
width: 100%;
}
.imgHover {
width: 120%;
position: relative;
left: -10%;
top: -10%;
}
.divHover {
border: 2px solid darkorange;
}
</style>
</head>
<body>
<div>
<img src="ajax.jpg">
</div>
</body>
<script>
$(document).ready(function () {
$("div").mouseover(function () {
$("img").addClass("imgHover");
$("div").addClass("divHover");
});
$("div").mouseleave(function () {
$("img").removeClass("imgHover");
$("div").removeClass("divHover");
});
});
</script>
</html>div固定大小，鼠标划过图像放大
猜你喜欢
转载自huangyongxing310.iteye.com/blog/2373273
今日推荐
周排行