html 大div,html – 比窗口大的可扩展div

概念

我试图得到一个比窗口大的列表,它将根据鼠标位置移动.目标是允许用户查看所有列表条目,无论其数量多少.

下面是一个简单的图像来说明这个概念：

>黑框是窗口

>黑色箭头是鼠标位置

>红线就是清单

问题

目前,我只有在设置列表宽度时才能使这个工作.我想不设置这个宽度.

这是代码：

$(document).ready(function() {

var widthPage = $('.strip').width();

var widthStrip = $('.strip ul').width();

$('.strip').on('mousemove', function(event) {

var offset = $(this).offset();

var relX = event.pageX - offset.left;

var left = relX * (widthStrip - widthPage) / widthPage;

$(this).find('ul').css('left', '-'+left+'px');

});

});

/* Positioning */

.strip {

position:relative;

overflow: hidden;

}

.strip ul {

position: absolute;

top: 0; left: 0;

width: 1750px;

}

.strip li {

display: block;

float: left;

}

/* Style */

body {

padding: 0;

margin: 0;

}

.strip {

height: 30px;

margin-top: 50px;

}

.strip ul {

height: 30px;

padding: 0;

margin: 0;

}

.strip li {

list-style: none;

border: 1px solid #EBEBEB;

margin-right: -1px;

padding: 0 5px;

line-height: 28px;

}

• Lorem
• Ipsum
• Dolor
• Sit
• Amet
• Consectetur
• Adipisicing
• Elit
• Sed
• Do
• Eiusmod
• Tempor
• Incididunt
• Ut
• Labore
• Et
• Dolore
• Magna
• Aliqua
• Ut
• Enim
• Ad
• Minim
• Veniam
• Quis
• Nostrud
• Exercitation
• Ullamco
• Laboris
• Nisi
• Ut
• Aliquip
• Ex
• Ea
• Commodo
• Consequat