Mover elemento dentro de un div junto al mouse(EN VARIOS BOTONES)

PHOTO

Thu Dec 16 2021 15:50:17 GMT+0000 (Coordinated Universal Time)

let etiqueta = document.querySelectorAll('.etiqueta');

etiqueta.forEach(link => {
    
    link.addEventListener("mouseover",() => { // mouseover cuando el mause entra al elemento etiqueta
	
        const t = link.getBoundingClientRect(); // calcula la posición de link(etiqueta) 
	let hijo = link.querySelectorAll('.hijo');

	hijo.forEach(l1 => {

	    l1.classList.add("edd1"); // solo quita un class, que le quita color red y la escala

	    function mover(e){

	       let left = e.pageX;
	       let top = e.pageY;
	       l1.style.left =  left - t.left + "px";
	       l1.style.top =   top - t.top  + "px";
	    };
	l1.parentNode.addEventListener("mousemove", mover);

	});
    });

    link.addEventListener("mouseleave",() => {// mouseleave cuando el mouse salio del elemento etiqueta
	let hijo = link.querySelectorAll('.hijo');
	hijo.forEach(l2 => {
        l2.classList.remove("edd1"); // le solo quita un class, que le quita color red y la escala 1
	l2.parentNode.onmousemove = null;
	});
    });
});

//HTML

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div> 

//css
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0) translate(-50%,-50%); //posiciona el inicio 
transition: transform 0.9s ease;
}
.edd1{
transform:scale(5) translate(-50%,-50%); // posiciona cuando ya sufrio la escala 5
transform-origin: 0% 0%;
background-color: red;
}

COPY

l2.parentNode.onmousemove = null; --.parentNode : seleciona al padre del elemento hijo(l2) --.onmousemove : enciende el evento mousemove, y al ponerle null se apaga. ---LINK: pregunta que hice en stackoverlflow

https://es.stackoverflow.com/questions/504585/problemas-para-remover-un-evento-mousemove

Save snippets that work from anywhere online with our extensions

Comments

efectos-botones

@samn

botones donde solo uno está activado mover un elemento junto al mouse, dentro de un div (eventos de mouse) Mover elemento dentro de un div junto al mouse(EN VARIOS BOTONES)

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

#javascript

How to store fetch response in javascript variable - Stack Overflow

async function fun() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
}

const data  = await fun();

#javascript #jquery

jQuery.post() - AJAX for post requests

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Mover elemento dentro de un div junto al mouse(EN VARIOS BOTONES)

Save snippets that work from anywhere online with our extensions

Comments

More like this

efectos-botones

Browse more snippets >>

Mover elemento dentro de un div junto al mouse(EN VARIOS BOTONES)

Save snippets that work from anywhere online with our extensions

Comments

More like this

efectos-botones

Browse more snippets >>

Embed code snippet