ScrollBaseJs.js

var $$ = function (id) {
return typeof id == 'string' ? document.getElementById(id) : id;
}; Object.extend = function (destination, sourse) {
for (var item in sourse) {
destination[item] = sourse[item];
}
return destination;
}; var Class = {
create: function () {
return function () {
this.initialize.apply(this, arguments);
}
}
} var CurrentStyle = function (element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
} //容器对象,滑块对象,参数
var ScrollCon = Class.create(); ScrollCon.prototype = {
//构造函数
initialize: function (area, bar, itag, options, ibarTgNum) {
this._area = $$(area);
this._bar = $$(bar);
this._time = null;
this._barTgNum = $$(ibarTgNum);
this.SetOption(options);
this._step = this._options.step; //改变量
this._pause = this._options.pause;
this._speed = this._options.speed;
this._mgSide = this._options.side == "up" ? "marginTop" : "marginLeft";
this._index = 0; //滚动索引
this._tagIndex = 1; //滚动子项索引
this._bar.appendChild(this._bar.cloneNode(true));
this._barTagNum = this._bar.getElementsByTagName(itag).length;
this.barH = this._bar.style.height || this._bar.offsetHeight;
this.areaH = this._area.style.height || this._area.offsetHeight;
this.areaW = this._area.style.width || this._bar.offsetWidth;
this.barW = this._bar.style.width || this._bar.offsetWidth;
this._bar.style[this._mgSide] = "0px";
this.BindNumHtml();
//添加样式 // this.Auto();
},
//参数初始化
SetOption: function (options) {
//默认参数
this._options = {
step: 1, //改变量,
side: "up",
pause: 50, //隔多高停一次
speed: 20, //滚动速度
pauseStep: 1500//滚动停留时间
};
Object.extend(this._options, options || {}); },
EditMargin: function () { //改变滚动条属性
oThis = this;
var Step = this._step;
this._speed = this._options.speed;
if (this._index >= this._pause) { //判断是否到了停顿的时候
this._index = Step = 0; //索引,滚动改变量设为0
this._speed = this._options.pauseStep; //滚动速度设为滚动停留时间
this._tagIndex++;
} else {
this._index += Step;
}
var margin = Math.abs(parseInt(oThis._bar.style[this._mgSide]));
this._bar.style[this._mgSide] = -(margin + Step) + "px";
if (margin + Step >= (this._barTagNum - 1) * this._pause) {
// 将滚动距离跳到滚动条复制前的最后一个标签
this._bar.style[this._mgSide] = -(this._barTagNum / 2 - 1) * this._pause + "px";
this._tagIndex = this._barTagNum / 2; //直接赋值:即将要跳转的值为滚动条复制“值” 的第一个标签
} oThis.Write(this.barW);
},
//获得偏移距离
GetMargin: function () {
return this._bar.style[this._mgSide];
},
Auto: function () {//自动滚动
oThis = this; oThis.EditMargin();
oThis.Re(); },
MoveTo: function (index) {
oThis = this;
this._index = 0;
this._tagIndex = index;
this._speed = 1000;
oThis._bar.style[this._mgSide] = -index * this._pause + "px";
oThis.Re();
oThis.Write();
},
Move: function () {
oThis = this;
oThis.EditMargin();
this._time = setTimeout(function () {
oThis.Start();
}, this._speed);
},
Start: function () {
oThis = this;
oThis.EditMargin();
},
Next: function () {
oThis = this;
this._index = 0;
this._speed = 1000;
this._tagIndex == 0 ? 1 : this._tagIndex;
this._tagIndex++;
var margin = this._tagIndex * this._pause;
if (this._tagIndex >= this._barTagNum) {
this._tagIndex = 0;
margin = 0;
}
oThis._bar.style[this._mgSide] = -margin + "px";
oThis.Re();
oThis.Write(this._tagIndex);
},
Re: function () {
oThis = this;
clearTimeout(this._time);
this._time = setTimeout(function () {
oThis.Auto();
}, this._speed);
oThis.Write(this._tagIndex);
},
Pre: function () {
oThis = this;
var margin = Math.abs(parseInt(oThis._bar.style[this._mgSide])) - this._pause;
if (margin == -this._pause) {
margin = 0;
}
oThis._bar.style[this._mgSide] = -margin + "px";
oThis.Re();
},
BindNumHtml: function () {
oThis = this;
for (var i = 1; i <= oThis._barTagNum / 2; SetHTML(i++)) { }
function SetHTML(z) {
var barNum = oThis._barTgNum.appendChild(document.createElement("li"));
barNum.onclick = function () {
oThis._bar.style.marginTop = oThis.MoveTo(z);
}
barNum.innerHTML = z--;
barNum.style.cursor = "pointer";
barNum.style.listStyle = "none";
barNum.style.float = "left";
barNum.style.paddingLeft = "5px";
}
},
Write: function (value) {
oThis = this;
var strHtml = '<div style="border:red solid 1px;width:200px;float:left;">';
strHtml += '<br>滚动区域高度:' + oThis.areaH;
strHtml += '<br>滚动对象高度:' + oThis.barH;
strHtml += '<br>滚动条距离:' + oThis.GetMargin();
strHtml += '<br>oThis._index:' + oThis._index;
strHtml += '<br>this._step:' + this._step;
strHtml += '<br>_tagIndex:' + oThis._tagIndex;
strHtml += '<br>_barTagNum:' + oThis._barTagNum;
strHtml += '<br>value:' + value;
strHtml += "</div>";
$$("divWrite").innerHTML = strHtml; }
}

Scroll_8_31.htm:

<!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>
<title></title>
<style type="text/css">
.con
{
width: 400px;
height: 50px;
border: solid 1px #000000;
line-height: 50px;
padding: 0px 10px;
overflow: hidden;
}
.con *
{
margin: 0px;
padding: 0px;
}
.conList
{
padding: 0px;
width: 5000px;
} .conList li
{
float: left;
width: 390px;
list-style: none;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="divCon" class="con">
<ul id="divConList" class="conList" style="">
<li>热点新闻1</li>
<li>热点新闻2</li>
<li>热点新闻3</li>
<li>热点新闻4</li>
<li>热点新闻5</li>
<li>热点新闻6</li>
</ul>
</div>
<span></span>
<ul id="barNum" style="float: left; border: red solid 1px; text-align: left">
</ul>
<input type="button" value="上一个" onclick="a.Pre()" />
<input type="button" value="下一个" onclick="a.Next()" />
<input type="button" value="自动" onclick="a.Auto()" />
<input type="button" value="重启" onclick="a.Re()" />
<div id="divWrite">
</div>
</body>
</html>
<script src="ScrollBaseJs.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
window.a = new ScrollCon("divCon", "divConList", "li"
, { speed: 10, pause: 400, pauseStep: 500, side: "left" }, "barNum");
}
</script>

纯Js ——文字上下左右滚动的更多相关文章

  1. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  2. html js文字左右滚动插件

    自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端. 一个文字过长而可以左右滚动的插件 <!DOCTYPE html> < ...

  3. js文字上下滚动代码

    <div id="dome"> <div id="dome1"> <ul class="express"> ...

  4. js文字无缝滚动

    <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1&g ...

  5. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  6. JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  7. 利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

  8. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  9. js文字滚动效果实现

    纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...

随机推荐

  1. [学习笔记] 平衡树——Treap

    前置技能:平衡树前传:BST 终于学到我们喜闻乐见的平衡树啦! 所以我们这次讲的是平衡树中比较好写的\(Treap\). (以后会写splay的先埋个坑在这) 好了,进入正题. step 1 我们知道 ...

  2. Mysql入门-对表数据的增删改查

    这一部分是最简单的,也是最麻烦的.简单是因为其实只包括增删该插四个部分.大体上看,增加数据.删除数据.修改数据.查询数据都不麻烦啊,我们日常都是常用的.这个谁不会呢?以前在培训机构学mysql的时候, ...

  3. [spring cloud] [error] java.lang.IllegalStateException: Only one connection receive subscriber allowed.

    前言 最近在开发api-gateway的时候遇到了一个问题,网上能够找到的解决方案也很少,之后由公司的大佬解决了这个问题.写下这篇文章记录一下解决方案.希望可以帮助到更多的人. 环境 java版本:8 ...

  4. LeetCode 42. 接雨水(Trapping Rain Water)

    题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况 ...

  5. 修改PostgreSQL数据库的默认用户postgres的密码 并新建用户

    1.忘记了postgresql 安装时默认用户postgres 的密码,怎么办呢? linux shell命令下面输入: sudo -u postgres psql  (这样就可以直接登录进postg ...

  6. 在已开启Chrome窗口上调试

    代码 @Test void testNow() { /* First: Add the chrome.exe to the PATH. * Then: open the cmd and input t ...

  7. k8s部署01-----what is k8s?

    简介 1.Kubernetes代码托管在GitHub上:https://github.com/kubernetes/kubernetes/. 2.Kubernetes是一个开源的,容器集群管理系统,K ...

  8. append和push和pop区别

    append()    操作的是DOM节点,在被选元素的结尾(内部结尾)插入指定内容: push()        向数组末尾插入一个或者多个元素,并且返回新的长度: pop()         删除 ...

  9. 一、Vue基础之常用方法

    一.JSON.parse() 与 JSON.stringify() 1.JSON.parse() :是从一个字符串中解析出 json 对象 //定义一个字符串 var data='{"nam ...

  10. 2017年内容营销如何提高ROI转化率

    根据2017 CMI报告显示,有近41%的营销人员今年会实施一系列内容营销战略.作为与用户间长期关系的桥梁, 从品牌化输出到信任感的培育,内容营销的影响力迅猛发展. 本次Focussend从互动集成内 ...