html
1<body> 2 3</body>
css
1@charset "utf-8"; 2body{ 3 position:relative; 4} 5.cursor_animate{ 6 position: absolute; 7 left: 50px; 8 top: 50px; 9 width: 60px; 10 height: 60px; 11 border: 1px solid #ccc; 12 border-radius: 50%; 13} 14.cursor_animate.cursor_animate--on{ 15 animation-name: linearAnimation; 16 animation-duration: 1s; 17 animation-timing-function: linear; 18 animation-iteration-count: 3; 19 animation-direction: alternate; 20 animation-fill-mode:forwards; 21 /*animation-play-state: running;*/ 22} 23 24@keyframes linearAnimation { 25 0% { 26 transform: scale(1); 27 } 28 100% { 29 transform: scale(1.5); 30 } 31} 32
js
1$(function(){ 2 $(document).on("mousemove",function(e){ 3 var pagex=e.pageX; 4 var pagey=e.pageY; 5 $("body").append("<div class='cursor_animate'></div>"); 6 $(".cursor_animate").each(function(){ 7 var test1 = pagex - $(this).width() /2 ; 8 var test2 = pagey - $(this).height() /2 ; 9 /*console.log(test1);*/ 10 $(this).css({"left":test1,"top":test2}).addClass("cursor_animate--on"); 11 /* transition終了時 */ 12$(this).on("animationend webkitAnimationEnd oAnimationEnd mozAnimationEnd",function(){ 13 $(this).fadeOut( 1500, function() { 14 $(this).remove(); 15}); 16 17}); 18 }); 19 20 21 22 }); 23});
マウスが移動した時にtriggerメソッドなので、擬似的にclickイベントを発生させてPAGEXなどを取得してイベントを発生させたいのですがPAGEXなどが取得できません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。