首页 > 代码库 > 一款基于TweenMax跟随鼠标单击移动的div

一款基于TweenMax跟随鼠标单击移动的div

2024-08-03 10:45:45   225人阅读

今天给大家分享一款基于TweenMax跟随鼠标单击移动的div。在这款实例中你可以单击任意位置，div会移动到你单击的位置。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

 <html ng-app="app" ng-click="moveblock($event)">    <body>        <block class="block">Where Do You Want Me?<br />Click Anywhere On The Page<br /> To Direct Me</block>    </body>    <!--Doesn‘t properly work with touch; working on a fix for that and will update if/when I get it right.. !-->    <script src=http://www.mamicode.com/‘angular.min.js‘></script>"app", ["ngAnimate"])  .directive("block", blockDirective)  .animation(".block", blockAnimation);        //  Move Block        function blockDirective($animate) {            return {                restrict: "EA",                link: function (scope, element, attrs) {                    var radius = element[0].offsetWidth / 2;                    TweenMax.set(element, {                        x: window.innerWidth / 2 - radius,                        y: window.innerHeight / 2 - radius                    });                    scope.moveblock = function ($event) {                        $animate.animate(element, {}, {                            x: $event.pageX - radius,                            y: $event.pageY - radius                        });                    };                }            };        }        function blockAnimation() {            return {                animate: function (element, className, from, to, done) {                    TweenMax.to(element, 0.5, {                        x: to.x,                        y: to.y,                        ease: Back.easeOut,                        force3D: true,                        onStart: done                    });                }            };        }        //@ sourceURL=pen.js    </script>

css代码：

        html        {            cursor: pointer;        }        body        {            font-family: ‘Lato‘ , sans-serif;            font-size: 1em;            margin: 0;            background: radial-gradient(black 15%,     transparent 16%) 0 0, radial-gradient(black 15%,     transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1)    15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1)    15%, transparent 20%) 8px 9px;            background-color: #282828;            background-size: 16px 16px;            overflow: hidden;        }                .block        {            width: 250px;            color: #F7F6F2;            text-align: center;            padding-top: 1.5em;            height: 100px;            position: absolute;            background: #000;            opacity: 0.7;            border-radius: 2px;            border: none;            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            box-sizing: border-box;            box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);            -moz-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);            -webkit-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);            box-shadow: -4px 4px -4px 4px rgba(0,0,0,0.4);            -moz-shadow: -4px 4px -4px 4px rgba(0,0,0,0.4);            -webkit-shadow: -4px 4px -4px 4px rgba(0,0,0,0.4);        }        #cue        {            background: rgba(255, 255, 10, 0.5 );            width: 100px;            height: 100px;            position: absolute;            border-radius: 100px;            -webkit-transition: -webkit-transform 1s;            -moz-transition: -moz-transform 1s;            -ms-transition: -ms-transform 1s;            -o-transition: -o-transform 1s;            transition: transform 1s;            -webkit-transform: scale( 0,0 );            -moz-transform: scale( 0,0 );            -ms-transform: scale( 0,0 );            -o-transform: scale( 0,0 );            transform: scale( 0,0 );        }        .down #cue        {            -webkit-transform: scale( 1, 1 );            -moz-transform: scale( 1, 1 );            -ms-transform: scale( 1, 1 );            -o-transform: scale( 1, 1 );            transform: scale( 1, 1 );        }

一款基于TweenMax跟随鼠标单击移动的div


联系
我们