问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Jquery元素居中放大效果，求指教思路谢谢？

头像
alandi
    5501091136

    页面中已经有一个DIV了，并且始终保持居中状态的，我想让它从0开始慢慢放大，这个过程要始终居中显示，请教下各位大侠重点在哪儿？若能有实例代码就更好了O(∩_∩)O~先谢啦！

    javascriptjquery
    阅读 3k
    3 个回答
    得票最新
    头像
    ea
      38011831
      ✓ 已被采纳

      jQuery实现很简单啊,写了个demo给你

      <html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//localhost/jquery-3.1.0.min.js"></script>
    <style>
        .wrap { position: relative; width: 500px; height: 500px; background-color: #eee; }
        .wrap div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); width: 0px; height: 0px; background-color: red; }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
    </div>
</body>
<script>
$(function(){
    $('.wrap div').animate({height:'500px', width:'500px'},2000);
})
</script>
</html>
      头像
      sunofbeach
        1936

        可以用css3的动画啊，我之前用keyframe写了一个渐变效果
        稍作修改即可
        当动画为 25% 及 50% 时改变宽度高度，然后当动画 100% 完成时再次改变：

        @keyframes myfirst
{
    0%   {width:xxx;height:xxx;}
    25%  {width:xxx;height:xxx;}
    50%  {width:xxx;height:xxx;}
    100% {width:xxx;height:xxx;}
}
xxx的数字不断增大即可

        这个方法是用css实现，性能上面优于js实现方式，但是要看你的使用场景，如果是表现类的话推荐用css实现，如果需要控制的话加入js部分只需要操作css改变即可。

        这里你将里面的css属性改变为你需要的width和height，我想可以实现你要的效果。我刚才已经测试了，是可行的，供你参考哈：）

        头像
        灰螳螂
          1.6k676115

          不考虑兼容用 scale，不要用宽高放大

          <!doctype html>
          <html>
          <head>

          <meta charset="UTF-8">
<title></title>
<style>
    @keyframes full {
        0%{
            transform:scale(0);
        }
        100%{
            transform:scale(1);
        }
    }
    .z {
        width: 200px;
        height: 200px;
        border:1px solid #ccc;
        position: absolute;
        top:50%;
        left:50%;
        margin:-100px 0 0 -100px;
        transform-origin: center center;
        animation: full .3s linear forwards;
    }
</style>

          </head>
          <body>
          <div class="z"></div>
          </body>
          </html>

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题