- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script src1="js/jquery-1.11.1.js"></script>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- .jinduBg{
- width: 200px;
- height: 20px;
- margin: 20px auto;
- border: 1px solid grey;
- border-radius: 5px;
- cursor: pointer;
- }
- .jindu{
- width: 20%;
- height: 20px;
- background: blue;
- }
- .text{
- text-align: center
- }
- </style>
- <script>
- $(function(){
- $('div').click(function(e){
- var x=e.pageX;
- var y=$(this).offset().left;
- var z=$(this).width();
- var m=parseInt((((x-y)/z).toFixed(2))*100)+'%';
- // alert(m)
- $('.jindu').width(m);
- $('.text').html('位置:'+m)
- })
- })
- </script>
- </head>
- <body>
- <div class="jinduBg">
- <div class="jindu"></div>
- </div>
- <div class="text">位置:20%</div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0912201514199.html
来源: http://www.codesnippet.cn/detail/0912201514199.html