水平自动滚动到活动缩略图 [英] horizontally auto scroll to active thumbnail li
本文介绍了水平自动滚动到活动缩略图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有水平的书页图像缩略图ul li，超过100张图像，我给了文本框以输入页码以激活该页面并查看该页面，它正在正常工作，但没有自动滚动到该页面我在ul上很活跃，我是JavaScript的初学者，请帮我解决这个问题，贝洛维斯是我的代码
i have horizontal book page image thumbnail ul li, more than 100 image, i have given text box to enter page number to active that page and view that page, it is working without any problem but it is not auto scrolling to that active li in ul, i'm beginner to JavaScript please help me with this, bellowis my code
HTML
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<ul class="book-list" id="book-list">
<?php if ($total_page > 0) : ?>
<?php foreach ($results as $row) : ?>
<li class="book">
<span class="page-number" id="active-page-number"><?php echo $page_num++ ?></span>
<img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Page">
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
JavaScript
var bookCurrentPages = $('.book #active-page-number');
$('#current-page').keypress(function(e) {
var userInput = $('#current-page').val();
if (this.value.length == 0 && e.which == 48){
// disable enter zero
return false;
}
else if (e.keyCode == 13) {
bookCurrentPages.each(function (key) {
var numKey = key + 1;
if (userInput == numKey) {
// console.log(numKey + " success");
var currentKey = userInput;
// console.log(currentKey);
$('#book-list li:nth-child('+ currentKey +')').children('img').trigger('click');
}
})
return false; // prevent the button click from happening
}
});
演示 检查我的代码， https://jsfiddle.net/Looper/dmug0zxz/1/
Demo check my codes, https://jsfiddle.net/Looper/dmug0zxz/1/
推荐答案
可以尝试一下
<!DOCTYPE html>
<html>
<head>
<style>
li{display: table-cell; padding:20px;}
ul{display: table-row; }
.cont{overflow: auto;}
li.active{border: 1px solid blue;}
</style>
</head>
<body>
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<div class="cont">
<ul class="book-list" id="book-list">
<li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
<li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
</ul>
</div>
<div>another content</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
$('#current-page').change(function() {
var i = $(this).val() -1;
activeBook(i);
});
$('.book-list').on('click', '.book', function(){
activeBook($(this).index());
});
function activeBook(i){
$('.book').removeClass('active');
var active = $('.book').eq(i).addClass('active');
var left = active.position().left;
var currScroll= $(".cont").scrollLeft();
var contWidth = $('.cont').width()/2;
var activeOuterWidth = active.outerWidth()/2;
left= left + currScroll - contWidth + activeOuterWidth;
$('.cont').animate( {
scrollLeft: left
},'slow');
}
});
</script>
</body>
</html>
这篇关于水平自动滚动到活动缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
