使用CSS3的translate和transition功能，控制一个两个div块的联动

最新推荐文章于 2021-01-21 09:24:57 发布

weixin_30740581

最新推荐文章于 2021-01-21 09:24:57 发布

阅读量389

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/duck-ifox/p/7158912.html

版权

之前的工作有接触到一些css3的新特性。div块的移动和回到初始位置，可以利用在开发中的很多地方。这里记录下来，下次就不用辛苦的灾区百度了。

<html>
     <head>
     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     <style type="text/css">
        
     </style>
     
     </head>
     <body>
        <div style="width:100px;height:30px;" id="trDiv">
            <div style="width:50%;height:100%;background-color:black;float:left" id="div1"></div>
            <div style="width:50%;height:100%;background-color:green;float:left" id="div2" onclick="movePlane()"></div>
        </div>
        
     </body>
     <script type="text/javascript">
        /**
         * 控制检索的面板移动
         * 使用css3特效
         */
         
         var goLeft = true;
        function movePlane(){
            var style = '';
            if(goLeft)style = 'translateX(300px)';
            else style = 'translateX(0px)';
        
            $('#div1').css({
                'Webkit-transform':style
            });
            $('#div2').css({
                'Webkit-transform':style
            });
            
            $('#div1').css({'Webkit-transition' : 'transform 0.5s linear'});
            $('#div2').css({'Webkit-transition' : 'transform 0.5s linear'});
            goLeft = !goLeft;
        }

    </script>

     
</html>

转载于:https://www.cnblogs.com/duck-ifox/p/7158912.html

weixin_30740581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3的translate和transition功能，控制一个两个div块的联动

之前的工作有接触到一些css3的新特性。div块的移动和回到初始位置，可以利用在开发中的很多地方。这里记录下来，下次就不用辛苦的灾区百度了。<html> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> ...
复制链接

扫一扫