今天给大家分享一款基于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. HTTP错误405

    405 - 用来访问本页面的(方法不被允许) HTTP 错误 405 -禁止访问资源 HTTP 错误 405 405 不允许此方法 对于请求所标识的资源,不允许使用请求行中所指定的方法.请确保为所请求 ...

  2. 快速排序之Java实现

    快速排序之Java实现 代码: package cn.com.zfc.lesson21.sort; /** * * @title QuickSort * @describe 快速排序 * @autho ...

  3. XXX on tree

    %了发树上莫队 nlognsqrt(n) // luogu-judger-enable-o2 #include<bits/stdc++.h> using namespace std; in ...

  4. BZOJ.2660.[BJOI2012]最多的方案(DP)

    题目链接 首先我们知道: 也很好理解.如果相邻两项出现在斐波那契表示法中,那它们显然可以合并. 所以我们能得到\(n\)的斐波那契表示,记\(pos[i]\)为\(n\)的斐波那契表示法中,第\(i\ ...

  5. NOI.AC NOIP模拟赛 第二场 补记

    NOI.AC NOIP模拟赛 第二场 补记 palindrome 题目大意: 同[CEOI2017]Palindromic Partitions string 同[TC11326]Impossible ...

  6. hdu 4451 37届金华赛区 J题

    题意:给出衣服裤子鞋子的数目,有一些衣服和裤子,裤子和鞋子不能搭配,求最终的搭配方案总数 wa点很多,我写wa了很多次,代码能力需要进一步提升 #include<cstdio> #incl ...

  7. JAVA poi 帮助类

    pom.xml 添加引用: <!--poi--> <dependency> <groupId>org.apache.poi</groupId> < ...

  8. Western Subregional of NEERC, Minsk, Wednesday, November 4, 2015 Problem I. Alien Rectangles 数学

    Problem I. Alien Rectangles 题目连接: http://opentrains.snarknews.info/~ejudge/team.cgi?SID=c75360ed7f2c ...

  9. Bugzilla Error message: couldn't create child process: 720003: index.cgi

    two steps is try to fix this issue. 1. Turn off the windowns firewall 2. Register the perl to the sy ...

  10. STM32 F4 DAC DMA Waveform Generator

    STM32 F4 DAC DMA Waveform Generator Goal: generating an arbitrary periodic waveform using a DAC with ...