Skip to content

Instantly share code, notes, and snippets.

@lijinma

lijinma/Drag

Created April 1, 2014 09:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lijinma/9911144 to your computer and use it in GitHub Desktop.
Save lijinma/9911144 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Drag
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style>
.b_step33 .block_right .list li { float:left; display:block; line-height:140%; margin-bottom:2px; }
.b_step33 .block_right .list li.dot { height:36px; padding:5px 8px; background:#F5F6FA; }
.b_step33 .block_right .list li.dot .dotline { position:relative; background:url(http://i.imgur.com/OTUF7AE.png) no-repeat center center; width:170px; height:20px; margin:10px auto; }
.b_step33 .block_right .list li.dot .dotline i { top:2px; width:15px; height:15px; display:block; position:absolute; cursor:pointer; }
.b_step33 .block_right .list li.dot .dotline i.dot1 { left:-2px; }
.b_step33 .block_right .list li.dot .dotline i.dot2 { left:37px; }
.b_step33 .block_right .list li.dot .dotline i.dot3 { left:74px; }
.b_step33 .block_right .list li.dot .dotline i.dot4 { left:112px; }
.b_step33 .block_right .list li.dot .dotline i.dot5 { left:150px; }
.b_step33 .block_right .list li.dot .dotline i.selected { background:url(http://i.imgur.com/ybhGSUc.png) no-repeat; }
</style>
</head>
<body>
<div class="b_step33">
<div class="block_right">
<ul class="list">
<li class="dot">
<div class="dotline" id="hc_pc">
<i class="dot1" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot2" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot3 selected" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot4" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot5" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment