使用一个javascript自定义滚动三个列表
Custom-Scroll three lists using one javascript
我有一个用PHP填充的列表，和一个javascript文件，它在列表上创建滚动效果，所以我可以上下滚动。
但是我需要三个这样的列表框在同一个页面上，当我去把另外两个列表，他们不生成只有第一个是。我需要把这三个都写在一页上。任何帮助这将是非常棒的!
亲切的问候,Alistair
<div id="mContainer">
<div id="upArrow"></div>
<div id="nContainer">
<ul id="listContainer">
<?php
connect();
$sql="SELECT drivers_id, firstname,image FROM drivers";
$result=mysql_query($sql);
while ($row=mysql_fetch_array($result)){
echo "<li><a id='".$row['drivers_id']."' onclick='return showPic(this)' onfocus='this.hideFocus=true;' href='".$row['image']."'>".$row['firstname']."</a></li>";
}
?>
</ul>
</div>
<div id="downArrow">
</div>
</div>
**JAVASRIPT FILE BELOW**
window.onload=init;
var d=document;
var lContainer; // object reference for the UL
var currentTop=0; // the current Y position of the UL
var zInterval = null; // animation thread interval
var direction; // direction we're scrolling the UL. 0==up, 1==down
var startTop=0; // the starting top of the UL
var scrollRate=8; // initial rate of scrolling
var scrollTick=0; // keeps track of long we've scrolled so we can slow it down accordingly
var listHeight=60; // the current height of the UL
var MAX_SCROLL_TICK=4; // the maximum value of scrollTick before it's reset
var MIN_LIST_HEIGHT=145; // contracted height of the list
var REBOUND = 0; // the value of scrollRate when we stop scrolling
function init() {
if(!d.getElementById)return; // bail out if this is an older browser
up=d.getElementById("upArrow");
down=d.getElementById("downArrow");
// apply onclick behaviors to the up arrow, down arrow and expansion control elements
down.onmousedown=function(){
scrollObjects(0);
}
up.onmousedown=function(){
scrollObjects(1);
}
lContainer = d.getElementById("listContainer");
d.getElementById("nContainer").style.height=MIN_LIST_HEIGHT+"px";
}
function scrollObjects(dir) {
if(zInterval)return; // already scrolling.
if((!dir && currentTop<=-300) || (dir && currentTop==0))
return; // dont scroll up if we're at the top or down if at the bottom of the list
direction=dir;
zInterval=setInterval("animate()",20);
}
function animate() {
// increment or decrement currentTop based on direction
if(!direction) {
currentTop-=scrollRate;
} else {
currentTop+=scrollRate;
}
scrollTick++;
if(scrollTick>=MAX_SCROLL_TICK) {
scrollRate--; // slow the scroll rate down for a little style
scrollTick=0;
}
lContainer.style.top=currentTop+"px";
if(scrollRate<=REBOUND) {
// scroll is finished. clear the interval and reset vars for the next scroll
clearInterval(zInterval);
zInterval=null;
startTop=currentTop;
scrollTick=0;
scrollRate=8;
}
}
首先，学习jQuery。你最终会为你所做的感到非常高兴。
接下来，不要使用内联JavaScript!快乐的部分也是如此。
这是jQuery中现有的功能。多列表版本在下面。添加:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
(或加载一个版本的jQuery文件到你自己的网站)
PHP:<div id="mContainer">
<div id="upArrow"></div>
<div id="nContainer">
<ul id="listContainer">
<?php
connect();
$sql = "SELECT drivers_id, firstname, image FROM drivers";
$result = mysql_query($sql);
while ($row=mysql_fetch_array($result) ) {
echo "<li><a id='".$row['drivers_id']."' href='".$row['image']."'>".$row['firstname']."</a></li>";
}
?>
</ul>
</div>
<div id="downArrow"></div>
</div>
额外的CSS:
ul#listContainer li > a:focus {
outline: none;
}
$(document).ready (init);
//--- Global variables!
var lContainer; // object reference for the UL
var currentTop = 0; // the current Y position of the UL
var zInterval = null; // animation thread interval
var direction; // direction we're scrolling the UL. 0==up, 1==down
var startTop = 0; // the starting top of the UL
var scrollRate = 8; // initial rate of scrolling
var scrollTick = 0; // keeps track of long we've scrolled so we can slow it down accordingly
var listHeight = 60; // the current height of the UL
var MAX_SCROLL_TICK = 4; // the maximum value of scrollTick before it's reset
var MIN_LIST_HEIGHT = 145; // contracted height of the list
var REBOUND = 0; // the value of scrollRate when we stop scrolling
function init() {
//-- Activate click and focus handlers on the li elements.
$("ul#listContainer li > a").click ( function () { showPic (this); } )
// This next is IE only! use CSS.
.focus ( function () { this.hideFocus=true; } );
//-- Apply onclick behaviors to the up/down arrow and expansion control elements.
$("#downArrow").mousedown ( function () { scrollObjects (0); } );
$("#upArrow") .mousedown ( function () { scrollObjects (1); } );
lContainer = $("#listContainer");
$("#nContainer").css ('height', MIN_LIST_HEIGHT + "px");
}
function scrollObjects(dir) {
if (zInterval) return; // already scrolling.
// dont scroll up if we're at the top or down if at the bottom of the list
if ((!dir && currentTop <= -300) || (dir && currentTop == 0)) return;
direction = dir;
zInterval = setInterval (animate, 20);
}
function animate() {
// increment or decrement currentTop based on direction
if (!direction) {
currentTop -= scrollRate;
} else {
currentTop += scrollRate;
}
scrollTick++;
if (scrollTick >= MAX_SCROLL_TICK) {
scrollRate--; // slow the scroll rate down for a little style
scrollTick = 0;
}
lContainer.css ('top', currentTop + "px");
if (scrollRate <= REBOUND) {
// scroll is finished. clear the interval and reset vars for the next scroll
clearInterval(zInterval);
zInterval = null;
startTop = currentTop;
scrollTick = 0;
scrollRate = 8;
}
}
在jsFiddle中查看此操作。
Multi-List版本:
现在，借助jQuery的强大功能，我们将:
- 允许多列表操作
- 减少对"幻数"维度的依赖。 修复明显的过度滚动问题。
- 让点击和按住按用户期望的方式工作。
<div class="mContainer">
<div class="upArrow"></div>
<div class="nContainer">
<ul class="listContainer">
... ...
</ul>
</div>
<div class="downArrow"></div>
</div>
确保修改CSS以匹配，并且不要使用内联JS，这将在下面处理。
那么JavaScript变成:
$(document).ready (init);
function init() {
//-- Activate click and focus handlers on the li elements.
$("ul.listContainer li > a").click ( function () { showPic (this); } )
// This next is IE only! use CSS.
.focus ( function () { this.hideFocus=true; } );
//-- Initialize the scroll controls for every list in an mContainer.
$("div.mContainer").each ( function (J) {
var jNode = $(this);
jNode.data ('OurScrollObject', new ListScroll (jNode) );
} );
}
/*--- ListScroll object. This lets us (1) avoid global variables, and (2) keep each
each list's data separate.
*/
function ListScroll ( contNode, //--Required: jQuery wrapper of the container node.
INIT_SCROLL_RATE, //--Optional: Initial rate of scrolling.
MAX_SCROLL_TICK, //--Optional: The maximum value of scrollTick before it's reset.
MIN_LIST_HEIGHT, //--Optional: Contracted height of the list.
REBOUND //--Optional: The value of scrollRate when we stop scrolling.
)
{
//--- Set constants to default values as needed.
var INIT_SCROLL_RATE = INIT_SCROLL_RATE || 8;
var MAX_SCROLL_TICK = MAX_SCROLL_TICK || 4;
var MIN_LIST_HEIGHT = MIN_LIST_HEIGHT || 145;
var REBOUND = REBOUND || 0;
var listHeight = contNode.find ("ul.listContainer").outerHeight (true);
var scrollUpLimit = MIN_LIST_HEIGHT - listHeight;
//--- Init state variables.
var currentTop = 0; // The current Y position of the UL.
var startTop = 0; // The starting top of the UL.
var scrollTick = 0; // Keeps track of how long we've scrolled so we can slow down accordingly.
var scrollRate = INIT_SCROLL_RATE;
var bGoDown = true; // Are we scrolling down?
var zInterval = null; // Tracks the animation, interval timer.
var bStopRequested = false;
//--- Apply onclick behaviors to the up/down arrow elements.
contNode.find (".upArrow, .downArrow").bind ("mousedown mouseup", scrollObjects);
//--- Set the list's visible height.
contNode.find (".nContainer").height (MIN_LIST_HEIGHT);
function scrollObjects (zEvent) //-- zEvent is sent to event listeners automatically.
{
var bClickUpBtn = $(this).hasClass ('upArrow');
var bMouseUp = (zEvent.type == 'mouseup');
/*--- Here are the states we want to act on:
1) Were we already scrolling this list?
2) Has the user signaled a desire to scroll (mousedown)?
3) Has the user signaled to scroll scrolling (mouseup)?
4) Has the user signaled to STOP RIGHT NOW, by clicking the opposite direction
from the scroll direction?
*/
if (bMouseUp && ! zInterval) {
//--- Already stopped before user released the mouse.
return;
}
if (! bMouseUp && zInterval && bGoDown != bClickUpBtn) {
//--- Already scrolling in the currently-commanded direction.
return;
}
if (zInterval) {
//--- Already scrolling
if (bMouseUp) {
//--- Soft stop commanded (can coast down).
bStopRequested = true;
}
else {
//--- User must clicked in the opposite direction of the current scroll.
stopScroll ();
return;
}
}
else {
//--- Not scrolling yet
if (bBoundsCheck (bClickUpBtn) ) {
//--- Don't scroll beyond the top or bottom of the list.
return;
}
bGoDown = ! bClickUpBtn;
zInterval = setInterval (scrollList, 20);
}
}
function bBoundsCheck (bGoingUp) {
/*--- Keeps the list from scrolling out of bounds.
returns true if clipping (would have) occured.
*/
if (bGoingUp && currentTop <= scrollUpLimit) {
currentTop = scrollUpLimit;
return true;
}
if ( ! bGoingUp && currentTop >= 0) {
currentTop = 0;
return true;
}
return false;
}
function stopScroll () {
//--- Resets the state variables and clears the animation timer.
clearInterval (zInterval);
zInterval = null;
startTop = currentTop;
scrollTick = 0;
scrollRate = INIT_SCROLL_RATE;
bStopRequested = false;
}
function scrollList () {
//--- Increment or decrement currentTop based on direction.
if (bGoDown) currentTop += scrollRate;
else currentTop -= scrollRate;
if (bBoundsCheck ( ! bGoDown) ) {
stopScroll ();
contNode.find (".listContainer").css ('top', currentTop + "px");
return;
}
contNode.find (".listContainer").css ('top', currentTop + "px");
scrollTick++;
//if (scrollTick >= MAX_SCROLL_TICK || bStopRequested) { NO! Not ergo.
if (bStopRequested) {
scrollRate--; // slow the scroll rate down for a little style
scrollTick = 0;
}
if (scrollRate <= REBOUND) {
// Scroll is finished. clear the interval and reset vars for the next scroll.
stopScroll ();
}
}
}
这是一个方便的jQuery参考。
更新:
要改变哪个箭头指向哪个方向，改变这一行:
var bClickUpBtn = $(this).hasClass ('upArrow');
:
var bClickUpBtn = $(this).hasClass ('downArrow');
相关文章：
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 如何使用PHP和JS级联三个下拉列表
- 灯光问题(使用三个.js）
- 在三个.js中创建球体(例如地球）的磁力线
- 什么'这是从第三个函数上的async 1st函数获得结果的更好方法
- javascript第三个XMLHttpRequest被拒绝.但前两个是允许的
- 将循环中的两个文本框相乘，并在第三个文本框上显示结果
- 根据前两个下拉ID显示第三个下拉列表
- 在数组JS中查找三个重复项
- Meteor和S3:如何通过一次上传/编辑定义三个不同的图像
- 如何替换javascript字符串中的前三个连字符
- 保存两个模型(属于第三个模型）和一个提交
- 将文本字段限制为三个数字
- 三个js键盘旋转
- 匹配三个正则表达式中的任意一个，以先到的为准(在javascript中）
- 在桌面上向下滚动三个js动画，而不是在手机上
- 一个滚动条用于三个选项或选择区域
- 如何使这三个部分具有视差滚动
- “看来More"按钮后每三个底部滚动使用jquery
- 使用一个javascript自定义滚动三个列表
