一款基于TweenMax跟随鼠标单击移动的div
浏览数：24 /
时间：2015年06月11日
今天给大家分享一款基于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 );
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
