今天给大家分享一款基于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. 7617:输出前k大的数

    7617:输出前k大的数 查看 提交 统计 提问 总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 65536kB 描述 给定一个数组,统计前k大的数并且把这k个数从大到小 ...

  2. Bzoj3677:树形DP

    首先我们知道这棵树的形态,一眼DP.考虑蓝线的性质,显然蓝线在树上是连接连续三个节点的.这样就有三种情况:连接 一个节点 的 某个孩子->本身->父亲 或者 一个孩子->本身-> ...

  3. （android高仿系列）今日头条 --新闻阅读器 （转载）

    非常不错,原文地址:http://blog.csdn.net/vipzjyno1/article/details/26514543

  4. BZOJ2944 : [Poi2000]代码

    对于根,要让它的排名尽量小,也就是要让右子树的点数尽量多. 于是从大到小枚举右子树的点数,用Catalan数计算方案数,直到找到相应的右子树的点数为止. 此时根的排名已经确定,接下来要让左子树的代码的 ...

  5. 关于输出螺旋矩阵的demo

    输出类似 1 2 3 8 9 4 7 6 5 主要难点是如何找到表示的算法 我的理解是,先生成一个n*n的矩阵,然后再往里面塞数字,而塞的方法分别有四种:由左往右,由上往下,由右往左,由下往上,没塞完 ...

  6. 完全卸载oracle11g步骤(转)

    转自:http://blog.csdn.net/machinecat0898/article/details/7792471 完全卸载oracle11g步骤:1. 开始->设置->控制面板 ...

  7. 接口开发-集成数据库操作（mybatis）

    关于数据存储,最常用的方式就是存到数据库,此篇以MySQL数据库为例,以mybatis框架完成数据库的操作. 一.添加对应依赖 <!-- 数据库:MySQL --> <depende ...

  8. 何时调用C++复制构造函数和拷贝构造函数(转)

    1. 何时调用复制构造函数 复制构造函数用于将一个对象复制到新创建的对象中.也就是说,它用于初始化过程中,而不是常规的赋值过程中.类的复制构造函数原型通常如下: class_name(const cl ...

  9. 使用GSON和泛型解析约定格式的JSON串(转)

    时间紧张,先记一笔,后续优化与完善. 解决的问题: 使用GSON和泛型解析约定格式的JSON串. 背景介绍: 1.使用GSON来进行JSON串与java代码的互相转换. 2.JSON的格式如下三种: ...

  10. C#快速找出磁盘内的所有文件

    本文只针对NTFS格式化的磁盘文件快速检索,速度不是非常快,是让你震惊. 一般用文件遍历的方法检索一个50G的文件夹需要几十分钟甚至一个小时的时间,而用本方法只需几秒. using System; u ...