// JavaScript Document
//图片横向滚动// 2012-1-12 zhx 改版 改为调用方法 调用参数为元素名称
//name          控件名称
//direction     滚动方向 暂时支持:up left
//speed         滚动延迟时间 数字越大速度越慢 默认为30
function horizontal_pic_scroll(name, direction, speed) {
    if (document.getElementById(name) && document.getElementById(name + "1") && document.getElementById(name + "2")) {
        if (speed == null || speed <= 0) {
            speed = 30;
        }
        var tab = document.getElementById(name);
        var tab1 = document.getElementById(name + "1");
        var tab2 = document.getElementById(name + "2");
		if(document.getElementById(name + "C")!=null){
			var kakaC=document.getElementById(name + "C");
		};
        tab2.innerHTML = tab1.innerHTML; //克隆tab1为tab2
        function Marquee() {
            if (direction == "up") {
                //向上滚动
                if (tab.scrollTop-tab2.offsetHeight  >= 0)//当滚动至tab1与tab2交界时
                    tab.scrollTop -= tab1.offsetHeight //tab跳到最顶端
                else {
                    tab.scrollTop++
                }
            } else if (direction == "left") {
                //向左滚动
                if (tab2.offsetWidth - tab.scrollLeft <= 0)//当滚动至demo1与demo2交界时
                    tab.scrollLeft -= tab1.offsetWidth //demo跳到最顶端
                else {
                    tab.scrollLeft++
                }
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function () { clearInterval(MyMar) }; //鼠标移上时清除定时器达到滚动停止的目的
        tab.onmouseout = function () {
			if(kakaC!= null && kakaC.className=="a"){
			MyMar = setInterval(Marquee, speed)
			}
			else if(kakaC==null){
				MyMar = setInterval(Marquee, speed)
			}
		}; //鼠标移开时重设定时器
		//添加控制按钮wsq
		if(kakaC!= null){
		kakaC.onclick = function(){
			if(kakaC.className=="a"){
				clearInterval(MyMar);
				kakaC.className="b";
				kakaC.innerHTML="开始滚动";
		    }
			else
			{
				MyMar = setInterval(Marquee, speed);
				kakaC.className="a";
				kakaC.innerHTML="暂停滚动";
			}

		}
    }
	}
}

js滚动效果-(up,left)的更多相关文章

  1. JS 滚动效果

    地址: https://github.com/aamirafridi/jQuery.Marquee <script language="JavaScript" src=&qu ...

  2. jQuery实现滚动效果详解1

    声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...

  3. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  4. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  5. Space.js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  6. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  8. 页面动态数据的滚动效果——jquery滚动组件(vticker.js)

    <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script ...

  9. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

随机推荐

  1. mysql 关键字于数据库字段于关键字冲突的问题

    如果数据库存储字段 为MySQL关键字,那么在查询或者其他操作时会出错.那么我们应该怎么办, 可能有些人会说,换个字段不就好了啊.当然这样也是可以的,完全没问题. 然而,如果是在无法对数据库进行修改和 ...

  2. centos下整合PagerDuty、nagios初探(on-call尝鲜和体验)

    [前言] 今天在某个群里看见有人介绍了PagerDuty,介绍到了slack.整合后可以更加方便和团队合作.于是我觉得来尝尝鲜. [PagerDuty是什么?] PagerDuty是一款能够在服务器出 ...

  3. oracle给字段添加描述

    oracle中,我们有时候需要给表的字段添加描述.用以下语句即可. alter table a add b varchar2(2); comment on column a.b  is '这是表a的字 ...

  4. C语言基础--函数

    函数概念: 1. C语言程序是由函数组成 2. 什么是函数? 函数就是一段具备特定功能的程序段 定义函数的目的: 定义函数的目的: 将一个功能封装以来方便复用 不使用函数的弊端: 1.重复代码太多, ...

  5. Hadoop 2.2.0学习笔记20131210

    伪分布式单节点安装执行pi失败: [root@server- ~]# ./bin/hadoop jar share/hadoop/mapreduce/hadoop-mapreduce-examples ...

  6. UITableView使用的一些技巧

    1.如果想自己在视图中加一条线,和UITableView的cell的分割线颜色粗细一样,那么可以: UIView *lineView = [[UIView alloc] initWithFrame:C ...

  7. iOS 7 UITableview 在Plain模式下 设置背景颜色无效

    在iOS6的时候,设置Plain模式下table的颜色 通过[self.table setBackgroundColor:[UIColor red]]; 就可以看到一个满身通红的tableView 但 ...

  8. Android Studio项目目录结构

    在Android Studio中,提供了以下几种项目结构类型 我们一般常用的有以下两种结构: Project 结构类型 app/build/ app模块build编译输出的目录 app/build.g ...

  9. Linux提供两个格式化错误信息的函数

    #include “stdio.h” Void perror(__const char *__s); 其中__s是出现错误的地方,函数向标准错误输出设备输出如下:s:错误的详细信息. Eg.perro ...

  10. HDU 4717 The Moving Points (三分法)

    题意:给n个点的坐标的移动方向及速度,问在之后的时间的所有点的最大距离的最小值是多少. 思路:三分.两点距离是下凹函数,它们的max也是下凹函数.可以三分. #include<iostream& ...