今天给大家分享一款基于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. Bzoj4818:生成函数 快速幂

    转来的题面:首先这题显然补集转化,就是用全部方案减去不含任何质数的方案.然后怎么做呢?考虑m比较小,我们能大力把<=m的质数全都筛出来.发现n很大,要么倍增要么快速幂......发现p相当小,所 ...

  2. 吴恩达-coursera-机器学习-week5

    九.神经网络的学习(Neural Networks: Learning) 9.1 代价函数 9.2 反向传播算法 9.3 反向传播算法的直观理解 9.4 实现注意:展开参数 9.5 梯度检验 9.6 ...

  3. 16、Redis手动创建集群

    写在前面的话:读书破万卷,编码如有神 --------------------------------------------------------------------------------- ...

  4. HDU 5832 A water problem 水题

    A water problem 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5832 Description Two planets named H ...

  5. QQ和微信一键加群加好友代码

    QQ和微信一键加群加好友链接代码实现. 1.QQ加群加好友链接(借助腾讯QQ群推广链接和加好友链接实现) (1).加群技术链接: http://qun.qq.com/join.html (2).加好友 ...

  6. CentOS下使用autoenv实现进入特定目录后运行特定环境变量

    安装 # Mac git clone git://github.com/kennethreitz/autoenv.git ~/.autoenv # 安装默认shell echo 'source ~/. ...

  7. [SQL ERROR 800]Corresponding types must be compatible in CASE expression.

    SQL应用报错800.Corresponding types must be compatible in CASE expression. 错误描述: 11:00:51  [SELECT - 0 ro ...

  8. 解决ASP.NET MVC4中使用Html.DropDownListFor显示枚举值默认项问题

    从ASP.NET MVC 5开始,Html.DropDownListFor已经提供了对Enum的支持,但在这以前,需要通过帮助方法或扩展方法来让Html.DropDownListFor显示枚举值. 本 ...

  9. SugarCRM 插件介绍

    [转自 陈沙克日志:http://hi.baidu.com/chenshake/item/5d76203fe6a598fede22219d]经常有朋友问关于sugar的插件,我这里就整理一下,不过其实 ...

  10. 查询EBS系统在线人数

    /* Formatted on 2018/3/14 23:25:51 (QP5 v5.256.13226.35538) */ SELECT U.USER_NAME , APP.APPLICATION_ ...