今天给大家分享一款基于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. Wannafly 22A

    题解 另g = gcd(a1,a2,a3....) 那么k * g % m的方案书就是答案 这个式子子显然是有循环节的 x * g = 0 mod m ,x * g + y * m = 0 exgcd ...

  2. Codeforces Round #272 (Div. 2) B. Dreamoon and WiFi dp

    B. Dreamoon and WiFi 题目连接: http://www.codeforces.com/contest/476/problem/B Description Dreamoon is s ...

  3. Linux——多线程下解决生产消费者模型

    我们学习了操作系统,想必对生产消费者问题都不陌生.作为同步互斥问题的一个经典案例,生产消费者模型其实是解决实际问题的基础模型,解决很多的实际问题都会依赖于它.而此模型要解决最大的问题便是同步与互斥.而 ...

  4. match_parent和fill_parent的区别(转)

    有网友表示对于很多工程中的MATCH_PARENT出现在layout中感到不明白,过去只有FILL_PARENT和WRAP_CONTENT那么match_parent到底是什么类型呢? 其实从Andr ...

  5. [Go] 单元测试/性能测试 (go test)

    特征 Golang 单元测试对文件名和方法名,参数都有很严格的要求.例如: 1.文件名必须以 _test.go 结尾 2.方法名必须是 Test 开头 3.方法参数必须是 t *testing.T 或 ...

  6. Revit API判断是不是柱族模板

    OwnerFamily即族模板.获取类别的方法:Document.Settings.Categories.get_Item(BuiltInCategory.OST_Columns); //判断是不是柱 ...

  7. WinForm多线程实现HTTP网络检测工具

    一.背景描述与课程介绍 明人不说暗话,跟着阿笨一起玩WinForm.本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高 ...

  8. 大不列颠百科全书Encyclopaedia Britannica Ultimate 2014光盘镜像

    大不列颠百科全书又名大英百科全书,是目前最古老的百科全书之一.大英百科全书每10余年出一个版本,如今已经推出到Encyclopaedia Britannica Ultimate 2014.此次推荐的是 ...

  9. AutoMapper在MVC中的运用03-字典集合、枚举映射,自定义解析器

    本篇AutoMapper使用场景: ※ 源字典集合转换成目标字典集合 ※ 枚举映射 ※ 自定义解析器 ※ 源中的复杂属性和Get...方法转换成目标属性 源字典集合转换成目标字典集合 □ Domain ...

  10. C#编程（四十五）----------格式字符串

    格式字符串 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) 案例: string str=string.Format("{0:C}",0.2); ...