AJAX控件之Slider（進度條效果）
<strong><font color="#990000">AJAX控件之Slider</font></strong></title>
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
<cc1:SliderExtender ID="SliderExtender1" runat="server" BoundControlID="TextBox1"
TargetControlID="TextBox2">
</cc1:SliderExtender>
</div>
</form>
</div>
<div class="ads-article-bottom-match">
<ins class="adsbygoogle"
style="display:block;"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-2073744953016040"
data-ad-slot="3534050590"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<ul class="tag-list">
</ul>
<div id='comment-form-wrapper'>
<div class='section-head'>發表評論</div>
<form id="comment-form" class='comment-form' action="/account/register" method="post">
<input type="hidden" name="_xsrf" value="2|e779691e|219d464e677447e04b4ac04887a5ba77|1714711141"/>
<input name="post_id" value="5b89105f2b71775d1cdfa291" class='hidden'/>
<textarea autocomplete="off" rows='2' cols='50' placeholder="登錄以後才評論..." disabled></textarea>
<a class='login' href="#">登录</a>
</form>
</div>
<div id='article-comments'>
<div class='section-head'>所有評論</div>
<div id="comment-list">
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
</div>
</div>
<div class="related-post-list">
<div class="section-head">相關文章</div>
<div class="related-posts">
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5e509006bd9eee21167de419" target="_blank" title="AJAX入門系列">
AJAX入門系列
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5b8910502b71775d1cdfa214">myqq95</a>
<img src="/static/svgs/clock.svg" />
<span>2020-02-22 10:20:54</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5e509006bd9eee2117bf2e83" target="_blank" title="ajax系列教程(1)">
ajax系列教程(1)
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5b8910502b71775d1cdfa214">myqq95</a>
<img src="/static/svgs/clock.svg" />
<span>2020-02-22 10:20:54</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5b89105e2b71775d1cdfa289" target="_blank" title="ASP.NET AJAX控件之HoverMenu(下拉菜單)">
ASP.NET AJAX控件之HoverMenu(下拉菜單)
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5b8910502b71775d1cdfa214">myqq95</a>
<img src="/static/svgs/clock.svg" />
<span>2018-08-31 17:54:38</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5b8910572b71775d1cdfa245" target="_blank" title="ASP.NET AJAX控件之PopupControl(日曆控件)">
ASP.NET AJAX控件之PopupControl(日曆控件)
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5b8910502b71775d1cdfa214">myqq95</a>
<img src="/static/svgs/clock.svg" />
<span>2018-08-31 17:54:31</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="secondary-content feed">
<div class='sidebar author-info'>
<a href="/u/5b8910502b71775d1cdfa214" target="_blank">
<span id='user-icon'>
M
</span>
myqq95
</a>
</div>
<div class="right_sidebar">
<div>
<div class="section-head">
24小時熱門文章
</div>
<div>
<section class="section-item">
<ul>
</ul>
</section>
</div>
</div>
</div>
<div class="right_sidebar">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2073744953016040"
data-ad-slot="3358264730"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="right_sidebar">
<div>
<div class="section-head">
最新文章
</div>
<div>
<section class="section-item">
<ul>
<li>
<h5>
<a href="/a/5e509006bd9eee21167de419" target="_blank" class="news-link">
AJAX入門系列
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5e509006bd9eee2117bf2e83" target="_blank" class="news-link">
ajax系列教程(1)
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5e509006bd9eee21167de418" target="_blank" class="news-link">
js取select的text值
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5e509006bd9eee2117bf2e62" target="_blank" class="news-link">
ajax系列教程(2)
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5b89105f2b71775d1cdfa2a1" target="_blank" class="news-link">
當文字過多時，顯示省略號
</a>
</h5>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="right_sidebar">
<div>
<div class="section-head">
最新評論文章
</div>
<div>
<section class="section-item">
<ul>
<li>
<h5>
<a href="/a/62760603f185d13ea2b7230d" target="_blank" class="news-link">
https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5b8a97c02b71775d1ce7e822" target="_blank" class="news-link">
linux以太網驅動總結
</a>
</h5>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="" class="img-responsive">
</div>
</div>
</div>
</div>
<footer>
</footer>
</div>
<script>
var post_id = "5b89105f2b71775d1cdfa291";
var token = getCookie('_xsrf');
</script>
<script>
$.ajax({
url: '/views',
headers: {'X-XSRFToken' : token },
data: {post_id: post_id },
type: "POST",
});
</script>
<script src="//pic1.xuehuaimg.com/static/js/custom_fix.js?v=daee3ed248f4905b532199ca731c5c34218641de039eb76eaeb95d7592a4a6bd66144d6309b00e89fe799b7229d6b80ff11eeeccf4a9241ede71823dbefe5c24"></script>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
<script src="//pic1.xuehuaimg.com/static/js/article/load_comments.js?v=dd7ad2001ff0b568b06c4c36d7211dbac32f6907da85feb2f38e9543b899f6919abd7925cfbb17fa55fcbec67fa83f100082dde82f3e824e05d6a430a644637c"></script>
<script>
$(".article-content img").click(
function() {
let width;
let img_src = $(this).attr('src');
let img_width = this.naturalWidth;
// let height = this.naturalHeight;
let window_width = $(window).width() * 0.8;
console.log(img_width,window_width)
if (img_width <= window_width) {
$("#myModal").addClass('modal-small')
width = img_width;
} else {
$("#myModal").addClass('modal-big')
width = window_width;
}
$("#myModal img").attr('src',img_src);
$("#myModal .modal-dialog img").css('width',width);
$("#myModal .modal-dialog img").css('height','auto');
$('#myModal').modal('show');
}
)
$('#myModal').click(
function() {
$('#myModal').modal('hide')
}
)
const observer = lozad('img', {
load: function(el) {
const src = el.getAttribute('data-original')
if (src) {
el.src = src;
}
}
});
observer.observe();
</script>
<style>
.modal-big .modal-dialog {
position: relative;
display: table;
overflow-y: auto;
overflow-x: auto;
width: auto;
}
.modal-big .modal.show .modal-dialog {
top: 50%;
transform: translateY(-50%);
}
.modal-big .modal-body {
text-align: center;
}
.modal-small.modal {
text-align: center;
padding: 0!important;
}
.modal-small.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-small .modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
max-width: 100%;
}
.modal-content {
cursor: zoom-out;
}
</style>
</body>
</html> 
