Dieses Mal zeige ich Ihnen, wie Sie mit jQuery den Fortschrittsbalken manuell ziehen und steuern. Was sind die Vorsichtsmaßnahmen für die Verwendung von jQuery zum manuellen Ziehen und Steuern des Fortschrittsbalkens?
Dies ist ein kleines Programm zur manuellen Steuerung des Fortschrittsbalkens. Teilen Sie es mit allen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手动拖动进度条</title>
<style type="text/css">
#box{position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin: 50px auto 0;}
#bg{height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
#bgcolor{background: #5889B2; width: 0; height: 10px; border-radius: 5px;}
#bt{width: 34px; height: 34px;background-color: red; border-radius: 17px; overflow: hidden; position: absolute; left: 0px; margin-left: -17px; top: 8px; cursor: pointer;}
#text{width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p id="box">
<p id="bg">
<p id="bgcolor"></p>
</p>
<p id="bt"></p>
</p>
<p id="text"></p>
<script type="text/javascript">
(function($){
var $box = $('#box');
var $bg = $('#bg');
var $bgcolor = $('#bgcolor');
var $btn = $('#bt');
var $text = $('#text');
var statu = false;
var ox = 0;
var lx = 0;
var left = 0;
var bgleft = 0;
$btn.mousedown(function(e){
lx = $btn.offset().left;
ox = e.pageX - left;
statu = true;
});
$(document).mouseup(function(){
statu = false;
});
$box.mousemove(function(e){
if(statu){
left = e.pageX - ox;
if(left < 0){
left = 0;
}
if(left > 200){
left = 200;
}
$btn.css('left',left);
$bgcolor.width(left);
$text.html('位置:' + parseInt(left/2) + '%');
}
});
$bg.click(function(e){
if(!statu){
bgleft = $bg.offset().left;
left = e.pageX - bgleft;
if(left < 0){
left = 0;
}
if(left > 200){
left = 200;
}
$btn.css('left',left);
$bgcolor.stop().animate({width:left},200);
$text.html('位置:' + parseInt(left/2) + '%');
}
});
})(jQuery);
</script>
</p>
</body>
</html>Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Js verwenden, um die Promise-Bibliothek zu implementieren
So beschneiden Sie Bilder in React
Das obige ist der detaillierte Inhalt vonSo verwenden Sie jQuery zum manuellen Ziehen und Steuern der Fortschrittsbalkenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
