今天给大家分享一款基于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='angular.min.js'></script>

    <script src='TweenMax.min.js'></script>

    <script src='angular-animate.min.js'></script>

    <script>        //cue : highlight mouse click position

        (function () {

            var cue = document.createElement('div'),

  pressed = false;

            cue.id = 'cue';

            document.body.appendChild(cue);

            var offset = cue.offsetWidth / 2;

            document.addEventListener('mousedown', function (ev) {

                document.body.classList.add('down');

                pressed = true;

                movecue(ev.pageX, ev.pageY);

            }, false);

            document.addEventListener('mouseup', function (ev) {

                document.body.classList.remove('down');

                pressed = false;

            }, false);

            function movecue(x, y) {

                cue.style.left = x - offset + 'px';

                cue.style.top = y - offset + 'px';

            }

            document.addEventListener('mousemove', function (ev) {

                if (pressed) { movecue(ev.pageX, ev.pageY); }

            }, false);

        })();

        //********************

        //app directive

        angular

  .module("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的更多相关文章

  1. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  2. 一款基于TweenMax.js的网页幻灯片

    之前介绍了好多网页幻灯片.今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  3. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  4. 跟随鼠标指针跑的div拖拽效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 一款基于jquery实现的鼠标单击出现水波特效

    今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览   源码下载 实现的代 ...

  6. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  7. 一款基于css3非常实用的鼠标悬停特效

    今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 实现 ...

  8. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 一款基于css3鼠标经过圆形旋转特效

    今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

随机推荐

  1. vue 直接改变数组数据不刷新

    因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}: 修改数据的长度,如 vm.items.length = 0. 为 ...

  2. DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点

    (1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...

  3. oracle切割以，隔开的数字字符串

    提前声明strsplit_typeCREATE OR REPLACE TYPE strsplit_type as table of varchar2(4000); 如果不,会报错:PLS-00201: ...

  4. rails 数据迁移 -migration

    1.创建一个fruits 项目: rails new fruits -d mysql --skip-bundle 2.修改Gemfile: source 'https://gems.ruby-chin ...

  5. MikroTik RouterOS 5.x使用HunterTik 2.3.1进行破解

    一.加载光驱: 二.一路回车: 三.说明: 1.可以不安装Debian内核,但如果在无缝升级到6.6的版本,此项就一定要选择. 2.6版本的破解必须小于等于1G的空间,不然无法破解成功,亲测有效,如果 ...

  6. [原创]Jmeter工具学习思维导图

    [原创]Jmeter工具学习思维导图

  7. 【图像处理】基于OpenCV底层实现的直方图匹配

    image processing 系列: [图像处理]图片旋转 [图像处理]高斯滤波.中值滤波.均值滤波 直方图匹配算法.又称直方图规定化.简单说.就是依据某函数.或者另外一张图片的引导,使得原图改变 ...

  8. STM32学习日志--使用DMA功能自动更新PWM的输出

    /******************************************************************************* 编译环境: EWARM V5.30 硬 ...

  9. Revit API得到类别Category设置类别可见性

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] public class c ...

  10. Creating Reusable XAML User Controls with Xamarin Forms

    In the previous post on making fancy layouts with Xamarin Forms we saw how you can design a Dashboar ...