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 即说是杭州人民法院的 ...
随机推荐
- node.js基础 1之 URL网址解析的好帮手
URL和URI的区别: URL是统一资源定位符 URI是统一资源标识符 URL是URI的子集(URL一定是URI,但URI不一定是URL) node中的URL中的url.parse protocol: ...
- 运行Python脚本的方法
1.安装完Python后,添加环境变量---在系统变量中找到Path ,点击编辑把你的python安装目录放到里面,注意环境变量之间用";"隔开.打开CMD,在CMD命令行中,输入 ...
- zoj 1203 Swordfish prim算法
#include "stdio.h". #include <iostream> #include<math.h> using namespace std; ...
- html5 video标签兼容性与自定义控件
Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...
- ios基础篇(二十)—— UIBezierPath绘制
UIBezierPath类可以创建基于矢量的路径,可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状. 一.UIBezierPath使用: 1.创建path: 2.添加路径到path ...
- PDF解析
解析如下图PDF文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
- NET中的规范标准注释(一) -- XML注释标签讲解
一.摘要 .Net允许开发人员在源代码中插入XML注释,这在多人协作开发的时候显得特别有用. C#解析器可以把代码文件中的这些XML标记提取出来,并作进一步的处理为外部文档. 这篇文章将展示如何使用这 ...
- C#/ASP.NET MVC微信公众号接口开发之从零开发(二) 接收微信消息并且解析XML(附源码)
文章导读: C#微信公众号接口开发之从零开发(一) 接入微信公众平台 微信接入之后,微信通过我们接入的地址进行通信,其中的原理是微信用户发送消息给微信公众账号,微信服务器将消息以xml的形式发送到我们 ...
- 关于DButils的简单介绍
android中的orm框架,一行代码就可以进行增删改查:支持事务,默认关闭:可通过注解自定义表名,列名,外键,唯一性约束,NOT NULL约束,CHECK约束等(需要混淆的时候请注解表名和列名)等等 ...
- 使用 HttpClient 和 HtmlParser 实现简易爬虫
这篇文章介绍了 HtmlParser 开源包和 HttpClient 开源包的使用,在此基础上实现了一个简易的网络爬虫 (Crawler),来说明如何使用 HtmlParser 根据需要处理 Inte ...