html多个实⼼圆点横向排列，多个div横向排列画⾯要求显⽰⼀定数量的div元素,⽐如20个
然后有⼀个下拉列表来指定每页显⽰的个数,
Case1:
如果每屏显⽰2个
想要的结果就是 当前屏幕显⽰前两个div元素和⼀个横向滚动条
滚动条往右拖，显⽰第三个和第四个
以此类推.
Case12:
如果每屏显⽰四个 则当前屏 是2*2显⽰四个和⼀个横向滚动条
滚动条往右拖，显⽰5~8个div元素.
以此类推.
特别注意:
不能出现竖的滚动条...
⽬前的模板代码如下, 下⾯的代码问题是，如果我⼀⾏追加元素多了的话，会⾃动换⾏显⽰,⽽不能显⽰横向滚动条.
123
function createDiv() {
var s1 = ElementById('s1');
var item = s1.value;
var hasChild = container.children.length ? true : false;
if (hasChild) {
while (container.hasChildNodes()) //当div下还存在⼦节点时 循环继续
{
}
}
//制定策略
var strategy = [2, 10, 20];
var strategyRow = [1, 2, 4];
var strategyIndex = 0;
//获取策略⽅案
for (var index = 0; index < strategy.length; index++) {
var current = strategy[index];
if (item <= current) {
strategyIndex = index;
break;
}
}
//使⽤策略
//当前策略
var row = strategyRow[strategyIndex];
var column = item / row;
let bodywidth = document.body.clientWidth;
let bodyheight = document.body.clientHeight;
var percentW = 90 / column + '%';
var percentH = 90 / row + '%';
for (var i = 0; i < row; i++) {
var rowDiv = ateElement("div");
for (var j = 0; j < column; j++) {
var columnDiv = ateElement("div");
columnDiv.style.cssText = " margin:10px; border-style: solid; border-width: 2px; border-color: #aa0000; float:left;height:" + percentH + ";background-color: #00aa00;" + "width:" + percentW + ";";html滚动效果代码
rowDiv.appendChild(columnDiv);
}
container.appendChild(rowDiv);
}
}
2
4
6
8
10
20
确定

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。