`
txf2004
  • 浏览: 7067251 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js 文本在一行内幻灯显示效果

阅读更多

程序代码
<div id="marqueeBox"><div>人的头脑太复杂,时间过得久,有时候连自己也被自己骗了,记下来才是最真实的......|最上等的控制是知道何时放手!</div></div>

<script type="text/javascript" src="TextSlide.js"></script>
<script type="text/javascript">
var Mar = new TextSlide("marqueeBox",4000,17);
Mar.init();
</script>


函数解释:

引用内容 引用内容
TextSlide(Objid,Delay,hg,flag)

Objid:要幻灯显示的对象ID;

Delay:切换延迟时间;

hg:显示高度;

flag:可选,显示类型:滚动和淡出两种,默认是滚动;


TextSlide.js代码如下:
程序代码 程序代码
//建立者:QQ:4641856 MSN:yourlips@hotmail.com
//功能:文字幻灯切换,flag可选,默认是滚动。

function TextSlide(Objid,Delay,hg,flag) {
var marqueeObj=document.getElementById(Objid);
var marqueeId=0;
var Opacity=0;//透明度
var Delay; //轮换延迟时间
var hg;//滚动延时
var marqueeText=marqueeObj.childNodes[0].innerHTML;
var marqueeContent=new Array();
var marqueeContent=marqueeText.split("|");
var marqueeInterval=new Array();
var obj=this;
this.init = function () {
var str=marqueeContent[0];
marqueeObj.childNodes[0].innerHTML=str;
marqueeObj.style.display="block";
marqueeObj.style.height=hg+"px";
marqueeId++;
marqueeInterval[0]=setInterval(obj.startMarquee,Delay);
}
marqueeObj.onmouseover=function(){
clearInterval(marqueeInterval[0]);
}
marqueeObj.onmouseout=function(){
marqueeInterval[0]=setInterval(obj.startMarquee,Delay)
}
this.startMarquee=function(){
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeObj.childNodes.length==1)
{
var nextLine=document.createElement('DIV');
nextLine.style.height=hg+"px";
nextLine.innerHTML=str;
marqueeObj.appendChild(nextLine);
}
else
{
marqueeObj.childNodes[0].innerHTML=str;
marqueeObj.childNodes[0].style.height=hg+"px";
marqueeObj.appendChild(marqueeObj.childNodes[0]);
marqueeObj.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
if(flag=="Alpha"){
marqueeInterval[1]=setInterval(obj.doAlpha,20);
}
else{
marqueeInterval[1]=setInterval(obj.scrollMarquee,20);
}

}
this.scrollMarquee=function(){
marqueeObj.scrollTop++;
if(marqueeObj.scrollTop%hg==(hg-1)){
clearInterval(marqueeInterval[1]);
}
}
this.doAlpha = function(){
Opacity+=3;
marqueeObj.style.filter = "alpha(opacity="+Opacity+");";
marqueeObj.style.opacity=Opacity/100;
if ((Opacity+=3) > 90){
clearInterval(marqueeInterval[1]);
Opacity=0;
}
}

//class结束
}

分享到:
评论

相关推荐

    JS实现的幻灯上滚效果.rar

    标题中的"JS实现的幻灯上滚效果"指的是使用JavaScript编程语言实现的一种动态展示文本的动画效果,类似于电影院中的幻灯片放映。这种效果通常用于网站的横幅、通知或者公告区域,使得信息能逐行滚动展示,提高用户...

    半圆按钮jQuery幻灯片

    在网页设计中,幻灯片通常用于展示一系列图像、文本或其他内容,通过动态切换来吸引用户的注意力。这种半圆按钮的幻灯片设计尤其适合那些希望提升网站视觉吸引力并增强用户体验的开发者。 jQuery是JavaScript的一个...

    18款anime.js酷炫的幻灯片文字动画特效

    Anime.js是一款轻量级、高性能的JavaScript动画库,它使得在网页上创建复杂的动画效果变得简单易行。这款库特别适合用于实现酷炫的幻灯片文字动画特效,正如标题所描述的那样,我们可以利用它来创建18种不同的动画...

    全面解析多种Bootstrap图片轮播效果

    `carousel-caption`类用于在轮播项内部创建一个容器,可以包含标题、文本或其他内容。标题将在轮播项可见时显示,并在切换到其他项时隐藏。 ```html 标题 1 ``` 3. **自定义轮播效果** Bootstrap允许...

    纯CSS3全屏响应式幻灯片特效.zip

    【标题】"纯CSS3全屏响应式幻灯片特效.zip"所涵盖的知识点主要集中在CSS3技术上,特别是如何利用CSS3特性实现全屏响应式的动态效果。在现代网页设计中,全屏幻灯片已成为一种流行的设计元素,它可以为用户提供更沉浸...

    jquery幻灯片定制插件.zip

    jQuery,作为一个轻量级、高性能的JavaScript库,提供了丰富的API和方法,使得创建幻灯片插件变得简单易行。本篇文章将深入探讨jQuery幻灯片定制插件的原理、实现方式以及具体应用。 一、jQuery基础 在理解jQuery...

    JS实现的幻灯上滚效果特效代码

    幻灯上滚效果通常用于展示多行文本,每行文字在屏幕上停留一段时间后自动向上滚动,以揭示下一行内容。这种效果在新闻网站、公告栏或滚动广告中常见,它能有效地吸引用户的注意力,并在有限的空间内传递更多信息。 ...

    程序天下:JavaScript实例自学手册

    3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示...

    HTML_JS的幻灯片

    JavaScript是一种广泛使用的客户端脚本语言,它可以与HTML紧密集成,用于添加动态功能,如响应式设计、数据验证、动画效果以及与服务器的异步通信(Ajax)。在HTML文档中,`&lt;script&gt;`标签可以直接包含JavaScript代码...

    蓝色网格背景漂亮产品模板_蓝色 网格 质感 阴影 幻灯 ui 软件 产品 企业 漂亮 整站_html网站模板_网页源码.rar

    8. **幻灯片组件**:幻灯片通常由JavaScript驱动,允许网站在一组图像或内容之间进行平滑过渡,是展示产品或服务的常见方式。 9. **阴影效果**:阴影效果在视觉设计中常用于增加深度和立体感,这里的阴影可能被应用...

    jQuery实现30+种幻灯片轮播图旋转木马插件jssor slider源码.zip

    jQuery作为一款强大的JavaScript库,为开发者提供了丰富的API和插件,使得实现这些效果变得简单易行。本文将深入探讨基于jQuery的jssor slider插件,这是一个功能强大、支持多种样式的幻灯片轮播图和旋转木马插件。 ...

    JavaScript网页特效范例宝典源码

    实例290 在状态栏显示特定的超级链接信息 456 第11章 报表与打印 459 11.1 Web打印 460 实例291 调用IE自身的打印功能实现打印 460 实例292 打印指定框架中的内容 461 实例293 利用WebBrowser打印 462 实例294 设置...

    网页课程设计&毕业设计_漂亮的黑色导航jq幻灯商务服务html5模板5552.zip

    jQuery是一款轻量级的JavaScript库,它的出现极大地简化了JavaScript的使用,使得动态效果的实现变得简单易行。在这个模板中,jQuery可能被用来实现幻灯片的自动切换、鼠标悬停效果、导航菜单的响应式设计等交互功能...

    JavaScript教学方法浅析 (2).pdf

    在讲解将一行字符串实现打字效果输出时,启发学生这是一个动态显示,要想实现动态首先想到可以使用计时器,使用计时器可以实现打字延迟,要想实现字符逐步增加的打字机式效果,可以使用获取字符串的方式从完整的字符...

    网格底纹个人web简历博客html5模板-灰色 博客 个人 简单 简历 html5 css3 幻灯.rar

    在HTML5和CSS3中,可以使用JavaScript或者纯CSS来实现这一功能,实现动态的、平滑的过渡效果。 5. **个人简历设计**: 这个模板专门设计用于个人简历展示,可能会包含关于教育背景、工作经验、技能列表、项目经验和...

    javascript面试题

    - **块级元素**:独占一行显示,可以设置宽度和高度。 - 行内元素可以设置左右 `margin` 和 `padding`,但上下 `margin` 和 `padding` 仅影响元素内部空间,不影响其他元素。 **25、什么是外边距重叠?重叠的结果是...

    超实用的jQuery代码段

    11.13 向表格追加一行数据 11.14 获取客户端IP 11.15 向Firebug的控制面板发送消息 11.16 根据不同的屏幕大小显示不同的网页 11.17 jQuery遍历对象的属性 11.18 最优化的循环语句写法 11.19 如何构建最优化的字符串 ...

    JavaScript实战

    第一部分 JavaScript入门 1 第1章 编写第一个JavaScript程序 1 1.1 编程简介 1 什么是计算机程序 2 1.2 如何把JavaScript添加到页面 3 外部JavaScript文件 5 1.3 第一个JavaScript程序 7 1.4 把文本写到Web页面上 9 ...

    swiper手机端触屏滑动图片切换.zip

    这款基于JavaScript的库为开发者提供了丰富的功能,使得在手机端实现触屏滑动图片切换变得简单易行。 在"swiper手机端触屏滑动图片切换.zip"这个压缩包中,包含以下关键文件: 1. **说明.htm**:这是一个HTML文档...

Global site tag (gtag.js) - Google Analytics