JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<html>
<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
<body>
  
  
  
  
	<div>
				<div style="position:relative;">

					 <div style="background:url(http://padid.net/images/radiobg.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);height:225px;width:250px;position:relative;">
						<div class="radioanalog">
							<div class="felesh"></div>
						</div>
					 </div>

				</div>
			</div>

 <div id="fp_gallery" class="fp_gallery">

			<ul id="fp_galleryList" class="fp_galleryList">
				<li>Paris</li>
				<li>New York</li>
			</ul>
			<div id="fp_thumbContainer">
				<div id="fp_thumbScroller">
					<div class="container">
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
						</div>
						<div class="content">
							<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
						</div>
						<div...

CSS

.felesh{
	position:absolute;
	background:url(http://padid.net/images/felesh.png);
	width:170px;
	height:170px;
	transition: 0s;
	-webkit-transition: 0s;
}
.radioanalog{
	background: url(http://padid.net/images/radiobut.png) no-repeat scroll 0% 0% transparent;
	height: 170px;
	position: relative;
	width: 170px;
    left:45px;
  top:30px;
}

.fp_bgPattern{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:transparent url(../images/greyscale_natural_grunge3.jpg) repeat bottom left;
	opacity:0.3;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
img.fp_bgImage{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	opacity:0.2;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
h1{
	font-weight:normal;
	margin:40px 0px 10px 0px;
	text-transform:uppercase;
}
h2{
	font-weight:normal;
	font-size:22px;
	color:#FFED2F;
	margin-bottom:50px;
}
a{
	outline:none;
}
ul.fp_galleryList{
	list-style:none;
	position:relative;
}
ul.fp_galleryList li{
	display:inline;
	margin:0px 30px;
	text-transform:uppercase;
	cursor:pointer;
	font-size:14px;
	text-shadow:0px 0px 1px #fff;
}
ul.fp_galleryList li.current{
	color:#FFED2F;
}
ul.fp_galleryList li.current:hover{
	border:none;
}
ul.fp_galleryList li:hover{
	border-bottom:1px solid #fff;
}
#fp_thumbContainer{
	position:relative;
	overflow:hidden;
	width:100%;
	margin:50px 0 30px 0;
	height:0px; /*240px to show*/
	background-color:#111;
	-moz-box-shadow:0px 0px 10px #000 inset;
	-webkit-box-shadow:0px 0px 10px #000 inset;
	box-shadow:0px 0px 10px #000 inset;
}
#fp_thumbScroller{
	position:relative;
	overflow:hidden;	
}
#fp_thumbScroller .container{
	position:relative;
	float:left;
	display:none;
}
#fp_thumbScroller .content{
	float:left;
	margin-top:17px;
}
#fp_thumbScroller .content div{
	margin:0px 5px;
	height:100%;
}
#fp_thumbScroller img{
	border:3px solid #fff;
	height:200px;
	-moz-box-shadow:1px 1px 3px #000;
	-webkit-box-shadow:1px 1px 3px #000;
	box-shadow:1px 1px 3px...

JavaScript

$('.radioanalog').each(function(){
  
var $el = $(this),
    $sl = $el.find('.felesh'),
    rad = $el.width()/2 ,
    elP = $el.offset(),
    elPos = { x:elP.left, y:elP.top },
    s = {d:0,p:0},
    s2 = {d:s.d,p:s.p};

function d(e){
    var mPos = {x: e.pageX-elPos.x,y: e.pageY-elPos.y};	
	var getAtan = Math.atan2(mPos.x-rad, mPos.y-rad);    
    s.d = -getAtan/(Math.PI/180) + 180;
    s.p =  Math.round(s.d*100/360);
    if(s.d<135 && s.d>45){
    s.d=90;}
  else if(s.d>225 && s.d<315){
    s.d=270;}
  else if(s.d>315 && s.d<360){
   s.d=0;}
  else if(s.d>0 && s.d<45){
   s.d=0;}
}

$el.mousemove(function(e){
  d(e);  
  $sl.css({transform:'rotate('+ s.d +'deg)'});
}).click(function(){
  s2 = {d:s.d, p:s.p};
}).mouseleave(function(){
  $sl.css({transition:'0.3s',transform:'rotate('+ s2.d +'deg)'});
  setTimeout(function(){
       $sl.css({transition:'0s'}); 
  },210);
});
  
});