- 浏览: 89451 次
- 性别:
- 来自: 上海
-
文章分类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动合集</title>
<script type="text/javascript">
// 自动滚动
function boxmove(d1,d2,d3,e,obj){
var speed=30;
var demo=document.getElementById(d1);
var demo1=document.getElementById(d2);
var demo2=document.getElementById(d3);
demo2.innerHTML=demo1.innerHTML;
function boxTop(){
if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight}
else{demo.scrollTop++}
}
function boxRight(){
if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth}
else{demo.scrollLeft--}
}
function boxBottom(){
if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight}
else{demo.scrollTop--}
}
function boxLeft(){
if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth}
else{demo.scrollLeft++}
}
if(e==1){
var MoveTop=setInterval(boxTop,speed);
demo.onmouseover=function(){clearInterval(MoveTop);}
demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)}
}
if(e==2){
var MoveRight=setInterval(boxRight,speed);
demo.onmouseover=function(){clearInterval(MoveRight)}
demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)}
}
if(e==3){
var MoveBottom=setInterval(boxBottom,speed);
demo.onmouseover=function(){clearInterval(MoveBottom);}
demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)}
}
if(e==4){
var MoveLeft=setInterval(boxLeft,speed)
demo.onmouseover=function(){clearInterval(MoveLeft)}
demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)}
}
if(e=="top"){
MoveTop=setInterval(boxTop,speed)
obj.onmouseout=function(){clearInterval(MoveTop);}
}
if(e=="right"){
MoveRight=setInterval(boxRight,speed)
obj.onmouseout=function(){clearInterval(MoveRight);}
}
if(e=="bottom"){
MoveBottom=setInterval(boxBottom,speed)
obj.onmouseout=function(){clearInterval(MoveBottom);}
}
if(e=="left"){
MoveLeft=setInterval(boxLeft,speed)
obj.onmouseout=function(){clearInterval(MoveLeft);}
}
}
</script>
<style type="text/css">
div#a,div#b,div#c,div#d { float:left;}
h2 { clear:both; }
div#b,div#d,div#bb { white-space:nowrap; }
</style>
</head>
<body>
<h1>滚动合集</h1>
<hr />
<h2>向上</h2>
<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="a2"></div>
</div>
<script type="text/javascript">
boxmove("a","a1","a2",1);
</script>
<h2>向右</h2>
<div id="b" style="overflow:hidden;height:100px;width:90px;">
<div id="b1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="b2"></div>
</div>
<script type="text/javascript">
boxmove("b","b1","b2",2);
</script>
<h2>向下</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">
<div id="c1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="c2"></div>
</div>
<script type="text/javascript">
boxmove("c","c1","c2",3);
</script>
<h2>向左</h2>
<div id="d" style="overflow:hidden;height:100px;width:90px;">
<div id="d1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="d2"></div>
</div>
<script type="text/javascript">
boxmove("d","d1","d2",4);
</script>
<h2>手动滚动 - <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">上</strong> <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">下</strong></h2>
<div id="aa" style="overflow:hidden;height:100px;width:90px;">
<div id="aa1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="aa2"></div>
</div>
<h2>手动滚动 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">左</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">右</strong></h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
<img src="http://www.jb51.net/images/logo.gif" alt="" />
</div>
<div id="bb2"></div>
</div>
</body>
</html>
发表评论
-
JSP标准标签库
2008-02-01 16:28 854简介 JSTL是一个不断完 ... -
jsp页面动态的显示系统当前的时间
2008-04-28 18:45 997<html> <HEAD> < ... -
jsp页面动态的显示系统当前的时间
2008-04-28 19:06 1531<html> <HEAD> & ... -
文字水平滚动
2008-04-30 15:13 779前一阵子写了一篇JAXB的运用，其中讲了如何用JAXB生成X ... -
图片水平滚动
2008-04-30 15:23 869<div id="demo" sty ... -
flash加链接
2008-06-06 12:00 750<script language="JavaS ... -
兼容IE和FireFox的iframe 自动高度脚本
2008-09-09 14:57 819<iframe name="mainframe ... -
div控制首行缩进2个字
2008-09-22 12:58 860style type="text/Css" ... -
jsp隐藏按钮
2008-10-27 15:34 3379<!DOCTYPE html PUBLIC " ... -
js获取页面各种高度
2008-10-29 16:11 797if(parent.document.getElementBy ... -
Javascript鼠标事件大全
2008-11-13 14:27 667一般事件事件 浏览 ... -
JSTL语法及参数
2008-12-01 21:37 834jstl试用 JSTL语法及参数 JSTL包含以下的 ... -
window.open(theURL,winName,features); 详解
2008-12-03 12:25 826window.open(theURL,winName,feat ... -
window.open居中
2008-12-07 16:32 777<script language="javas ... -
JSP中与路径相关的常用的几个方法
2009-02-10 16:35 758http:/localhost/123/jsp/test.js ... -
js 操作frameset frame 对象收藏
2009-05-08 10:10 638框架编程概述一个HTML页面可以有一个或多个子框架，这些子框 ... -
兼容IE和FireFox的的漂浮广告
2009-09-01 10:55 693<script language="javas ...
相关推荐
《jQuery图片文字滚动插件详解及应用实践》 在网页设计中，动态效果常常能吸引用户的注意力，提高网站的互动性和用户体验。其中，图片和文字的滚动展示是一种常见且有效的手段，尤其适用于新闻资讯、广告宣传等场景...
在IT行业中，"不间断滚动图片"和"滚动文字"是一种常见的网页动态效果，常用于新闻网站、广告展示或产品介绍等场景。这种效果能够吸引用户的注意力，提高信息的传播效率。接下来，我们将深入探讨实现这些效果的技术...
【文字图片无缝滚动】是一种常见的网页动态效果，用于在有限的空间内展示大量文字或图片，通过不断滚动的方式，使得信息能够连续、平滑地呈现，提高用户体验。在本主题中，我们将深入探讨如何使用JavaScript来实现...
在本主题中，我们主要关注如何使用JS实现图片和文字的无缝滚动效果。 首先，无缝滚动的概念是让内容在到达视口顶部或底部时自动平滑地切换到下一个内容，给用户一种连续无断点的浏览体验。这种效果在网站中常见于...
5. **懒人图库.txt**：可能包含了推荐的图片资源库链接，方便用户获取适合的文字滚动背景图片。 6. **懒人图库.url**：快捷方式，直接指向一个图片资源网站，便于用户查找和下载图片。 7. **js**：这个目录可能包含...
本文将深入探讨如何使用JavaScript来实现文字和图片的无缝滚动效果，以及如何通过复制和应用提供的js代码来创建这些效果。 无缝滚动技术的主要目标是让页面内容（无论是文字还是图片）在不中断视觉连续性的情况下...
标题提到的"图片滚动，文字滚动，图片横竖滚动，超好的横竖同时无缝隙滚动代码，js，滚动特效"是网页设计中的常见技术，主要用于创建引人注目的交互式内容。这种技术主要依赖于JavaScript，一种广泛用于客户端网页...
本资源“js滚动集合”专注于提供图片滚动和文字滚动的效果实现，适用于创建引人注目的网页动态展示。 一、图片滚动 图片滚动是网页设计中常见的动态效果，它可以提升用户体验，吸引用户的注意力。JavaScript可以...
图片文字不间断滚动，图片文字不间断滚动，图片文字不间断滚动，图片文字不间断滚动
1. **单行滚动**：这是最基础的文字滚动方式，适用于展示一行文字或图片。在`单行滚动.html`中，jQuery可能使用了`.slideUp()`和`.slideDown()`方法来模拟向上或向下的滚动效果。这些方法会改变元素的高度，从而实现...
在iOS开发中，Swift语言提供了丰富的UI控件和方法来实现各种动态效果，其中包括滚动文字和图片的功能。这个“ios-Swift 滚动文字和图片，一行两行或多行.zip”项目就是一个很好的示例，它展示了如何在iOS应用中创建...
它允许内容（如文本或图片）沿着指定方向自动滚动，从而在网页上创建动态效果。虽然`<marquee>`标签在HTML5中已被废弃，但在某些场景下仍然可以作为一种简单快速的解决方案。 ### 二、基本用法 #### 1. 基本结构 `...
在这个特定的场景中，“ViewSwitcher文字图片上下滚动”的实现涉及到如何动态地展示和切换包含文字和图片的视图，并且使它们能够按照上下顺序滚动。 首先，我们需要理解ViewSwitcher的基本用法。ViewSwitcher内部...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
【C# WinForm文字图片滚动】技术是一种在Windows桌面应用程序中创建动态视觉效果的方法，它主要涉及到了C#编程语言、Windows Forms（WinForm）框架以及图形编程的概念。以下是对这个主题的详细解释： 首先，**C#** ...
不间断滚动 支持鼠标经过停止 文字图片不间断向下 向上滚动
【标题】"文字图片列表向上滚动javascript特效"是一种常见的网页动态效果，用于展示信息时增加视觉吸引力。在网页设计中，这种特效可以用于新闻更新、产品展示或任何需要连续滚动内容的区域。JavaScript，作为客户端...
### 图片与文字滚动脚本代码分析 #### 核心功能解析 此段代码主要利用了HTML和JavaScript来实现一个动态滚动的效果。具体来说，它能够使一系列的图片在网页上水平或垂直滚动展示，并且可以通过鼠标悬停来暂停滚动...
在IT行业中，"跑马灯文字滚动"是一种常见的视觉效果，尤其在电子显示屏、网站、APP界面设计中经常被用到。它通过让文字或信息像霓虹灯一样连续滚动，来展示大量的信息或者吸引用户的注意力。这个效果通常用于有限的...
### 利用Marquee实现无缝循环滚动文字 在网页设计中，为了使页面更加生动、吸引人，常常会使用到动态效果。其中一种常见的动态效果就是利用`<marquee>`标签来实现文字或图片的自动滚动。不过，在提供的代码片段中，...