javascript - How to follow mouse movement the opposite direction? -

-

i have div follows mouse coordinates opposite direction , within div .box. when move mouse red box should move opposite direction, looks kind of parallax effect. move on mouse speed , not want. box move slightly, see box move little bit opposite direction. , have align box center of mouse.

i have code script let red box follow mouse movement, doesn't know how above work. 

$(document).ready(function(){   $('div.container').on('mousemove',function(e){         var x = e.pagex - this.offsetleft;         var y = e.pagey - this.offsettop;         $('div.box').css({'left': x, 'top': y});   }); });

hope can me out. thanks.

http://codepen.io/anon/pen/zbrkga

try change top bottom , left right may solve problem like,

$('div.box').css({'right': x, 'bottom': y}); 

$(document).ready(function() {    $('div.container').on('mousemove', function(e) {      var x = e.pagex - this.offsetleft;      var y = e.pagey - this.offsettop;      $('div.box').css({        'right': x,        'bottom': y      });    });  });
.container {    margin: 0 auto;    width: 300px;    height: 300px;    border: 1px #000 solid;    position: relative;  }  .box {    width: 50px;    height: 50px;    border: 1px #000 solid;    position: absolute;    right: 200px;    background: red  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="container">    <div class="box"></div>  </div>

updated, fixing box in 100px range delay

$(document).ready(function() {    $('div.container').on('mousemove', function(e) {      var x = (e.pagex - this.offsetleft);      var y = (e.pagey - this.offsettop);      if(x<100||x>200||y>200||y<100) return false;      settimeout(function() {        $('div.box').css({          'right': x,          'bottom': y        }).text(x+','+y);      }, 500);    });  });
.container {    margin: 0 auto;    width: 300px;    height: 300px;    border: 1px #000 solid;    position: relative;  }  .box {    width: 50px;    height: 50px;    border: 1px #000 solid;    position: absolute;    right: 200px;    background: red  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="container">    <div class="box"></div>  </div>


Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati...
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc...
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc...
Read more