<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#container{width:480px;height:115px;padding:0px;overflow:hidden;position:relative;margin:100px 0 0 240px;}
#slider{height:115px;position:absolute;padding:0px;margin:0px;left:0px;}
#slider li{float:left;width:60px;height:115px;}
#left_arrow{left:205px;top:50px;width:45px;height:58px;background-color:red;position:absolute;}
#right_arrow{left:728px;top:50px;width:45px;height:58px;background-color:red;position:absolute;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script language = "javascript">
var pic_num = 20;//一共有几张图片
var current = 0;//开始显示第几张图片
var step = 4;//每次移动几张图片
var page_show_number = 8;//页面上一共有几张图片
var unlock = true;//是否正在动画中
var distance = 60;//每张图片的宽度
var colors = new Array("012","123","234","345","456","567","678","789","89A","9AB","ABC","BCD","CDE","DEF");
$(document).ready(function(){
$("#slider").css({"width":pic_num * distance});
var li = "";
for(var i = 0; i < pic_num; i++){
li += "<li style=background-color:"+colors[i%14]+"></li>";
}
$("#slider").html(li);
$("#right_arrow").click(function(){
if(current >= pic_num - page_show_number)return;
if(unlock){
unlock = false;
var start = parseFloat($("#slider").css("left"), 10);
var movement = start - step * distance;
$("#slider").animate({"left":movement},function(){current += step;unlock = true;});
}
});
$("#left_arrow").click(function(){
if(current <= 0)return;
if(unlock){
unlock = false;
var start = parseFloat($("#slider").css("left"), 10);
var movement = start + step * distance;
$("#slider").animate({"left":movement},function(){current -= step;unlock = true;});
}
});
});
</script>
</head>
<body>
<div id = "left_arrow"></div><div id = "right_arrow"></div>
<div id = "container">
<ul id = "slider">
</ul>
<div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js带按钮上下滚动效果</title>
<style type="text/css">
ul{
margin:0;
padding:0;
list-style:none;
height:100000px;
}
li{
margin:0;
padding:0;
width:100px;
height:100px;
display:block;
float:top;
margin-bottom:5px;
background:#009900;
}
#img_bag{
width:110px;
height:600px;
background:#F2F2F2;
margin:0 auto;
text-align:center;
}
#img_bag #img{
width:100px;
height:525px;
background:#969696;
overflow:hidden;
margin:auto;
}
</style>
</head>
<body>
<div id="img_bag">
<a href="javascript:void(0)" onmousedown="moveTop()"><img src="upp.jpg" border="0" /></a>
<div id="img">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<a href="javascript:void(0)" onmousedown="moveBottom()"><img src="down.jpg" border="0" /></a>
</div>
<script type="text/javascript">
function $(obj){//获取指定对象
return document.getElementById(obj);
}
var maxHeight=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;//滚动图片的最大高度
var targety = 211;//一次滚动距离
var dx;
var a=null;
function moveTop(){
var le=parseInt($("img").scrollTop);
if(le>211){
targety=parseInt($("img").scrollTop)-211;
}else{
targety=parseInt($("img").scrollTop)-le-1;
}
scTop();
}
function scTop(){
dx=parseInt($("img").scrollTop)-targety;
$("img").scrollTop-=dx*.3;
clearScroll=setTimeout(scTop,50);
if(dx*.3<1){
clearTimeout(clearScroll);
}
}
function moveBottom(){
var le=parseInt($("img").scrollTop)+211;
var maxL=maxHeight-600;
if(le<maxL){
targety=parseInt($("img").scrollTop)+211;
}else{
targety=maxL
}
scBottom();
}
function scBottom(){
dx=targety-parseInt($("img").scrollTop);
$("img").scrollTop+=dx*.3;
a=setTimeout(scBottom,50);
if(dx*.3<1){
clearTimeout(a)
}
}
</script>
</body>
</html>
<SCRIPT language=JavaScript type=text/javascript>
function MarqueeScroll_left(){
content.scrollLeft+=40;//层往左移
}
function MarqueeScroll_right(){
content.scrollLeft-=40;//层往左移
}
//如果需要做成向上\向下的话,将上面的scrollLeft改为scrollTop即可
//向上：scrollTop++;
//向下：scrollTop--;
</SCRIPT>
<DIV id=content style="OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 30px">
<table width="400" height="30" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#9933CC">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
</tr>
</table>
</DIV>
<input type="button" name="Submit" value="左移" onclick="MarqueeScroll_left()">
<input type="button" name="Submit" value="右移" onclick="MarqueeScroll_right()">
分享到：
相关推荐
**jQuery滑动数值选择器详解** 在Web开发中，用户交互是至关重要的，尤其是在涉及到数据输入时。jQuery库提供了一种高效且用户友好的方式来实现这种交互，这就是滑动数值选择器。这个Demo展示了如何利用jQuery实现...
在本文中，我们将深入探讨如何使用jQuery库来实现按钮的滑动切换效果。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，使得开发者能够更高效地创建交互式的网页应用。 ...
本教程将深入探讨如何利用 jQuery 实现滑动效果，这在创建交互式网页时非常常见，比如下拉菜单、轮播图、滑动面板等。 一、jQuery 基础 在讲解滑动效果之前，我们需要了解 jQuery 的基本用法。jQuery 通过 `$` ...
实现滑动的原理是:控制同级元素的整体位置 再通过jquery的动作animate 缓慢的实现这一过程 则就会显现滑动效果 下面是菜鸟的代码演示 代码的最后方有免费的源文件可以下载 供和我一样的初学者学习和交流 同时也希望...
这个项目可能包括HTML文件（用于布局和结构），CSS文件（用于样式和动画），以及JavaScript文件（包含jQuery代码实现滑动事件监听和删除逻辑）。通过研究这些文件，开发者可以学习如何在自己的项目中实现类似的功能...
在jQuery中实现滑动验证码，通常需要结合HTML、JavaScript（尤其是jQuery库）和CSS来完成。`slideunlock.js`是一个专门为此目的设计的插件，它可以方便地在网页中添加拖拽滑动验证功能。然而，原版的`slideunlock.js...
如果它是.js文件，那么它很可能包含了使用jQuery实现的动画效果和事件监听器，用于捕捉用户的滑动操作并执行相应的图片切换逻辑。 在实现这个功能时，jQuery通常会使用`$(document).ready()`函数来确保在DOM加载...
**jQuery 滑动相册实现详解** 在网页设计中，动态展示图片的相册功能是不可或缺的一部分，它能够以吸引人的方式呈现一系列照片。jQuery 是一个轻量级的 JavaScript 库，它提供了丰富的功能来简化网页交互和动画效果...
jQuery Mobile 默认使用Ajax加载页面，以实现平滑的页面切换。若需要禁用此功能，可在链接中添加`data-ajax="false"`： ```html 不使用Ajax加载 ``` ### 总结 jQuery Mobile 的滑动式标题导航为移动Web应用提供了...
本教程将详细介绍如何利用JQuery来实现图片滑动和切换效果，以适应移动端和WEB端的需求。 首先，我们需要引入JQuery库。确保在HTML文件的`<head>`标签内加入JQuery的CDN链接或者将JQuery库文件下载到本地并引用： ...
jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果，因此非常适合用来实现这种功能。下面我们将深入探讨如何使用 jQuery 实现左右滑动焦点图效果。 首先，我们需要在页面上创建一个...
在本案例中，我们使用了JavaScript库jQuery来实现这一效果。jQuery因其简洁易用的API和丰富的插件，成为了网页开发中处理DOM操作、事件处理和动画效果的首选工具。 首先，我们需要理解jQuery的基本概念。jQuery是一...
jquery鼠标滑动按钮图片切换是一款网站常用的简单图片切换特效，带索引按钮，鼠标滑过自动切换。
本代码着重于实现"左右滑动"的效果，这是许多网页和移动应用中常见的用户交互元素，尤其适用于展示列表或者图片轮播。下面将详细介绍这个jQuery左右滑动代码的工作原理及其相关知识点。 首先，jQuery的滑动效果通常...
在`jquery.slideunlock.js`中，这个功能通过监听鼠标事件并计算滑块的移动距离来实现。当用户成功将滑块拖动到正确位置时，插件会触发一个回调函数，通知系统验证已通过。 CSS文件`slide-unlock.css`则负责验证码的...
本资源"jQuery滑动侧边栏实现多级菜单插件jSide.zip"提供了使用jQuery创建动态、交互式侧边栏菜单的解决方案。以下是关于这个插件及其使用的一些关键知识点： 1. **jQuery库**: jQuery 是一个轻量级的JavaScript库...
【标题】：“jQuery实现滑动框文字导航栏网页特效代码.zip”这个压缩包包含的是一个使用jQuery库构建的网页导航栏特效代码。jQuery是JavaScript的一个轻量级库，它简化了DOM操作、事件处理、动画设计和Ajax交互，极...
总结来说，jQuery滑动字母特效是通过jQuery库来实现的一种动态文本展示方式，它利用JavaScript的DOM操作和动画功能，使网页中的文字具有生动的视觉效果。通过学习和实践此类特效，开发者可以提升网站的用户体验，...
在"jQuery实现滑动显示图片的标题"这个主题中，主要涉及以下知识点： 1. **jQuery库的引入**：首先，我们需要在HTML文件中引入jQuery库，通常通过CDN（内容分发网络）链接或者本地文件引入。例如： ```html ...