jq/css鼠标经过图片放大效果


<html>
<head>
<style>
img{display:block;}
.box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;}
.box img{width:200px;height:160px;position:relative;}
style>
<script src="jquery.js">script>
<meta charset="utf-8">
<title>jq鼠标经过图片放大效果title>
head>

<body>
<div class="box"><img src="焦点图/images/120617_pic1.jpg">div>
<script>
$(".box").mouseenter(function(){
    $(this).children("img").animate({width:"200%",height:"200%",marginTop:"-50%",marginLeft:"-50%"})   
}).mouseleave(function(){
    $(this).children("img").animate({width:"100%",height:"100%",marginTop:0,marginLeft:0}) 
})
script>
body>
html>

<html>
<head>
<style>
img{display:block;}
.box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;}
.box img{width:200px;height:160px;position:relative; transition:all 2s;}
.box:hover img{-webkit-transform:scale(1.5,1.5);}
style>
<meta charset="utf-8">
<title>css鼠标经过图片放大效果title>
head>

<body>

<div class="box"><img src="焦点图/images/120617_pic1.jpg">div>

body>
html>

你可能感兴趣的:(前端笔记,jquery,css)