首页  网站建设  网站优化  服务项目  建站案例  新闻资讯  关于我们  联系我们
菜单
当前您的位置:济南网站建设 > 新闻资讯 > 网页开发 —— 图片放大动画效果

网页开发 —— 图片放大动画效果

  • 文章来源:未知
  • 文章作者:admin
  • 时间:2020-05-30
  • 浏览:105

网页开发 —— 图片放大动画效果
就是那种很多网站都在用的,鼠标移过去图片会自动放大的动画。
这种可以只用CSS设置一下就好。
 
代码写少了又要担心字数的问题了,字数不够也挺麻烦。
 
目录
(凑字数)
 
HTML + CSS
需要自备一个和html文件同目录下的img文件夹,并且在里面要放一张名为"1.jpeg"的图片
HTML + CSS + JavaScript
 
HTML + CSS
需要自备一个和html文件同目录下的img文件夹,并且在里面要放一张名为"1.jpeg"的图片
<!DOCTYPE html>
<html>
<head>
    <title>图片放大</title>
</head>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    .content{
        position: absolute;
        width: 640px;
        height: auto;
        left: 50%;
        top: 50%;
        margin-left: -320px;
        margin-top: -25vh;
        overflow: hidden;
    }
    img{
        width: 640px;
        height: auto;
        transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    img:hover{
        transform: scale(1.6);
    }
</style>
<body>
<div class="content">
    <img src="./img/1.jpeg">
</div>
</body>
</html>
HTML + CSS + JavaScript
(其实这里也只是凑字数的,没必要用js)
 
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <title>图片放大</title>
</head>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    .content{
        position: absolute;
        width: 640px;
        height: auto;
        left: 50%;
        top: 50%;
        margin-left: -320px;
        margin-top: -25vh;
        overflow: hidden;
    }
    img{
        width: 640px;
        height: auto;
        transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
   /* img:hover{
        transform: scale(1.6);
    } */ 
</style>
<body>
<div class="content">
    <img src="./img/1.jpeg">
</div>
</body>
<script type="text/javascript">
    $("img").hover(function(){
        $("img").css("transform","scale(1.6)");
    });
    $("img").mouseleave(function(){
        $("img").css("transform","scale(1)");
    });
</script>
</html>
Copyright © 2011-2019 山东塞尼铁克网络科技有限公司AII Rights Reserved. Powered by Yongsy