js滚动效果-(up,left)
// 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)的更多相关文章
- JS 滚动效果
地址: https://github.com/aamirafridi/jQuery.Marquee <script language="JavaScript" src=&qu ...
- jQuery实现滚动效果详解1
声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上 ...
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- Space.js – HTML 驱动的页面 3D 滚动效果
为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- 页面动态数据的滚动效果——jquery滚动组件(vticker.js)
<script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
随机推荐
- fis3运行项目的前准备
前几天搭建了fis3环境,但是不会运行项目.因为刚来公司前辈把项目打包给我,但是我之前没有做过这种项目. 今天前辈来了,教我几个命令行运行项目.但是没有成功..... 原因我的sass是单独安装的,没 ...
- SSH原理与运用
SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很多普通用户也每天使用. SSH具备多种功能,可以用于 ...
- CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
CSS Hack大全-教你如何区分出IE6-IE10.FireFox.Chrome.Opera 转载自:http://www.jb51.net/article/50116.htm 现在的浏览器IE6- ...
- python中lambda函数
1.lambda函数使用如下: lambda语句中,冒号前是参数,可以有多个,用逗号隔开,冒号右侧的是返回值 >>> g=lambda x,y:x*y>>> g(4 ...
- bootstrap之消息提示
<!DOCTYPE html><html> <head> <title>Bootstrap</title> < ...
- 用Gen8服务器来学习虚拟化ESXI
虚拟化和云计算是这几年的热门技术,VMware公司是虚拟化的领头羊,小坦克我有幸在VMware从事这方面的测试工作. 本系列将会讲述我学习虚拟化的一些经历. 将会覆盖一些虚拟化产品: 比如:VMwar ...
- qsort函数
qsort函数用法举例 #include <stdio.h> #include <stdlib.h> #include <string.h> //数字比较函数 in ...
- ubuntu下minicom和USB转串口(转)
ubuntu下minicom和USB转串口(转) minicom是linux下串口通信的软件,它的使用完全依靠键盘的操作,虽然没有“超级终端”那么易用,但是使用习惯之后读者将会体会到它的高效与便利 ...
- C语言基础--二维数组
二维数组概念: 数组中的每一个元素又是一个数组, 那么这个数组就称之为二维数组,二维数组是特殊的一维数组. 二维数组格式: 元素类型 数组名称[一维数组的个数][每个一维数组的元素个数]; 元素类型 ...
- SharePoint 2013 开发——其他社交功能
博客地址:http://blog.csdn.net/FoxDave 上一篇讲了如何获取用户配置文件的相关属性,它属于SharePoint 2013社交功能的一个小的构成部分.社交功能是SharePoi ...