jquery - JavaScript pictureChange() and rotation -


i've been searching hours on internet solve problem , still can't find solution. i'm new in js, i'm quite excited still have problems when writing code. i'd is, onclick , change picture while rotating it. had first part of effect ( works once, image stop rotating), i'd rotate again of 180 deg , change first image. idea menu 3 bars, google ones, becomes "x" when clicked, , vice versa. first part of script,

var img = document.queryselector('.navicon');  img.addeventlistener('click', onclick, false);  function onclick() { var deg = 180 ; var css = '-webkit-transform: rotate(' + deg + 'deg);'; this.setattribute(     'style', css  );  }  function picturechange() { document.getelementbyid("navicon").src="images/buttons/xbutton.png";  } 

this css

.navicon:hover { opacity:0.7; } .navicon { margin-top: 25px; margin-left:-75px; position:relative; display:block; left:50%; width: 45px; height:45px; left:500px;  opacity: 1; -webkit-transition: -webkit-transform 0.1s ease-out; }  

this html

<img src="images/buttons/navicon.png" class="navicon rotation"     style="border=0;" id="navicon" onclick="picturechange()"> 

i thought adding new class , call function works new one, not seem work...

i try avoid setting css in javascript when can. better way use javascript add , remove classes, , let css handle actual transformation. in case can have css this:

.rotate {   -webkit-transform: rotate(180deg); } 

and have following line in onclick function:

this.classlist.toggleclass('rotate') 

to change image src , forth, make variables (or array) hold sources, , change them in onclick function. no need have onclick="picturechange()" in html.


Comments

Popular posts from this blog

php - Admin SDK -- get information about the group -

dns - How To Use Custom Nameserver On Free Cloudflare? -

Python Error - TypeError: input expected at most 1 arguments, got 3 -