JS上下无缝滚动效果:
可自定义每次滚动的px量,滚动的方向(上或者下),滚动速度。
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>scrollTop测试示例</title>
<style>
<!--
#out {
width:200px;
height:80px;
border:solid 1px blue;
overflow:hidden;
}
#in ul {
width: 100%;
}
#in ul li {
width: 60%;
float: left;
overflow: hidden;
list-style: none;
}
-->
</style>
</head>
<body>
<div id="out">
<div id="in">
<ul>
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
在body中插入如下JS代码:
<script type="text/javascript">
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
// 实例化一个对象并调用对象的initialize方法
var Class = {
create : function() {
return function() {
this.initialize.apply(this, arguments);
};
}
};
// 为Object添加一个extend方法
Object.extend = function(destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
};
// 为对象注册事件
var addEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroll = Class.create();
Scroll.prototype = {
initialize : function(outObj, inObj, options) {
var oScroll = this;
var iOut = $(outObj);
var iIn = $(inObj);
this.outHeight = iOut.offsetHeight;
this.inHeight = iIn.offsetHeight;
if (this.outHeight >= this.inHeight) return;
iOut.style.overflow = "hidden";
iIn.appendChild(iIn.cloneNode(true));
this.setOptions(options);
this.outObj = iOut;
this.timer = null;
this.side = 1; // 1:向上;2:向下
switch(this.options.side) {
case "down" :
this.side = -1;
break;
case "up":
default:
this.side = 1;
}
addEventHandler(iIn, "mouseover", function() {oScroll.stop();});
addEventHandler(iIn, "mouseout", function() {oScroll.start();});
this.start();
},
setOptions : function(options) {
this.options = {
step : 1, // 每次滚动的px量
side : "up", // 滚动的方向
time : 10 // 滚动的间隔时间(滚动速度)
};
Object.extend(this.options, options || {});
},
scroll : function() {
var inHeight = this.inHeight, outHeight = this.outHeight, iStep = this.options.step * this.side, time = this.options.time;
var iScrollTop = this.outObj.scrollTop;
if (iScrollTop >= (inHeight * 2 - outHeight)) {
iScrollTop -= inHeight;
} else if (iScrollTop <= 0) {
iScrollTop += inHeight;
}
this.outObj.scrollTop = iScrollTop + iStep;
var oScroll = this;
this.timer = setTimeout(function() {oScroll.scroll();}, time);
},
start : function() {
this.scroll();
},
stop : function() {
clearTimeout(this.timer);
}
};
window.onload = function() {
new Scroll("out", "in", {step : 1, side : "up", time : 20});
};
</script>
分享到:
相关推荐
JS上下无缝滚动效果JS上下无缝滚动效果JS上下无缝滚动效果
使用js实现对table表格的向上(可自定义方向)无缝滚动效果。
这是一个JavaScript 无缝上下滚动加定高停顿效果 对于在写代码的时候,会有一定的用处的,希望有帮到大家
js原生图片上下无缝滚动 页面经常用到的效果
javascript上下无缝图片滚动,糯米网产品展示javascript效果
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动——上下的效果。其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且...
很炫的图片无缝上下滚动效果
文字无缝滚动jQuery上下滚动js效果代码
js jquery图片不间断无缝滚动代码 向上 向下 向左 向右滚动 js 文件适合大部分程序员使用,基本的滚动功能
最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动。下面小编把实现代码分享到软件开发网平台,需要的朋友可以参考下,有bug欢迎提出,共同学习进步。 具体代码如下所示: <!DOCTYPE ...
NULL 博文链接:https://jcao54.iteye.com/blog/2238823
相册上下无缝滚动展示特效是一款基于css3 keyframes属性制作的全屏相册图片单排列表布局上下无缝滚动,悬停图片滑动收缩展开全图预览效果代码。
本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在用不上这些代码,不过先收藏起来以备后用哦。
兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码
最简单的图片无缝滚动集成上下左右,效果很炫哦,基本各大网站首页都会用的到
无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...
js实现上下无缝滚动的原理是这样的: 1、首先给容器设定高度或宽度,然后overflow:hidden; 2、容器高度设定后,内容超出则被隐藏。 3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置...
下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动。 1.效果展示: <!DOCTYPE html> <html> <head> <title>无缝滚动</title>...
支持以下滚动,至于向左,还是向右,滚动,停留时间长短均可自行设置,样式等都可以自己修改,JS,css代码写的很灵活,需要哪种效果只用复制代码便可. 一次横向滚动一个 ...无缝上下文字滚动 支持左右无缝滚动