jq和css3图片拉近效果

来源：互联网发布：淘宝怎么知道卖家电话编辑：程序博客网时间：2024/06/04 20:03

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script src="js/jquery-1.7.2.min.js"></script>    <title></title></head><body><style>    #test{width:200px;height:200px;font-size:12px;transition:all 1s ease 0s;-webkit-transition: all 1s ease 0s;-moz-transition:all 1s ease 0s; -o-transition:all 1s ease 0s;}    #test:hover{-moz-transition: all 1s ease 0s;width:240px;height:240px;font-size:40px;}    .test1{width:200px;height:200px;}</style><!-- css3实现 --><div style="width:200px;height:200px;overflow: hidden;">    <img id="test" src="store_logo_280x0.jpg"/></div><!-- jq实现 --><div style="width:200px;height:200px;overflow: hidden;">    <img class="test1" src="store_logo_280x0.jpg"/></div><script>    $(".test1").mouseover(function()    {        $(this).animate({height:240,width:240,},1000);    });    $(".test1").mouseout(function()    {        $(this).animate({height:200,width:200,},1000);    });</script></body></html>

经过测试绝对可靠，注意要引用jq

0 0