- 浏览: 47972 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
elf8848:
引用
readonly
不可编辑,可以获得焦点,背景颜色默认 ...
Input的readonly 属性与disabled属性
使用jquery及javascript实现文本滚动效果
<html> <head> <style type="text/css"> .body{ font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; line-height: 1.7em; background-color: #FFFFFF; background-image: url(../../image/bg.gif); background-repeat: repeat-x; background-position: top; margin-top: 0px; margin-left: 0px; } .scrollDiv {border: 1px #fff solid;width: 200px; height:192px;overflow: hidden;} .scrollDiv ul{height: 25px;line-height: 25px;margin: 0;padding: 0;} .scrollDiv li{line-height: 25px; padding-left: 5px; overflow: hidden;} .table {background-color: #dae8f0;border: 1px solid #99ccff;} .table_content {background-color: #FFFFFF;border: 1px solid #b8c4d8;} </style> </head> <body class="body"> <table width="100%" border="0" cellpadding="3" cellspacing="2" class="table"> <tr> <td> <strong>信息列表</strong> </td> </tr> <tr> <td class="table_content"> <div id="scrollDiv" class="scrollDiv"> </div> </td> </tr> </table> <script language=JavaScript> function refreshData_gs() { var ScrollText = ""; ScrollText += "<ul>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>1.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!</label></li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>2.bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb!</label></li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>3.cccccccccccccccccccccccccccccccccccccccccccccccccc!</label></li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>4.ddddddddddddddddddddddddddd!</label></li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>5.eeeeeeeee!</label></li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>6.ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff!</label></li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>7.ggggggggggggggggggggggggggggggggg</li>"; ScrollText+="<li style=\"word-break: break-all; word-wrap:break-word;\" ><label>8.hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh!</label></li>"; ScrollText += "</ul>"; document.getElementById("scrollDiv").innerHTML=ScrollText; } function getData_GS() { refreshData_gs(); } getData_GS(); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type='text/javascript'> function AutoScroll(obj) { var lineH=$(obj).find("li:first").height(); var upHeight=0-(lineH); var ulHeight = $(obj).find("ul:first").height(); var lines = $(obj).find("ul li").size(); //alert("li:first height :" + lineH); //alert("ul:first height :" + ulHeight); var scrollLines = lineH; var scrollH = $(obj).height(); var scrollLis = 1; var currLiHeight; //alert("scrollH :" + scrollH); //alert("scrollLines :" + scrollLines); for(var i=1;i<lines;i++){ var currLi = $(obj).find("ul li:eq("+i+")"); currLiHeight = currLi.height(); if((currLiHeight + scrollLines) <= scrollH){ //alert("i :" + i + "\ncurrLiHeight :" + currLiHeight); scrollLines += currLiHeight; upHeight -= currLiHeight; scrollLis += 1; }else{ break; } } //alert("scrollLines :" + scrollLines + "\nupHeight :" + upHeight + "\nscrollLis :" + scrollLis); $(obj).find("ul:first").animate( {marginTop:upHeight}, 500, function () { for(i = 1; i <= scrollLis; i++){ $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); } } ); } var s = true; var t = 0; function startli() { if (s) t = setInterval('AutoScroll(".scrollDiv")', 3000); } $(document).ready(function () { startli(); $(".scrollDiv").hover(function () { clearInterval(t); var s = false; }, function () { s= true; startli(); }); }) </script> </body> </html>
发表评论
-
JFreeChart 学习(2)-struts2+maven3
2015-06-20 11:53 1138该资源均来自网络,稍作了整理,以便查询 开发环境: ecli ... -
strusts2.0+servlet
2015-06-19 21:26 0在struts2.0中加入servlet -
JFreeChart 学习(1)-获取图片
2015-06-19 21:35 774jfreechart版本:1.0.13 maven依赖配置: ... -
js 计算特殊字符CRLF
2012-03-28 15:48 0js计算CRLF长度为1还是为2? -
linux 下 jboss7的安装
2011-12-31 09:22 0linux 下 jboss7的安装 环境: linux 2.6 ... -
maven 体验
2011-12-22 13:59 0使用maven管理web项目尝试 开发环境: win7, c ... -
eclise导入已存在工程报 Faceted Project Problem 错误
2011-11-01 17:42 4196现象: 向eclipse里面导入已存在工程时,报如下错误: ... -
eclipse3.6 在 tomcat6上部署web应用
2011-08-18 14:43 0本文做为一个简单练习总结,探索一个简单web工程从创建到部署的 ... -
eclipse 之 scrapbook
2011-08-06 08:37 1330eclipse 之 scrapbook 在日常的 ... -
eclipse添加findbugs plugin
2011-08-06 08:09 1069eclipse添加findbug plugin Eclips ... -
eclipse添加打开文件夹资源快捷方式
2011-08-05 08:59 1715eclipse添加打开文件夹资源快捷方式 在eclipse ... -
支持IE及FIRFOX 添加连接到收藏夹的简易操作
2011-07-21 09:55 1190支持IE及FIRFOX 添加连接到收藏夹的简易操作 ... -
eclipse3.2.2 整合 weblogic81
2011-07-13 11:28 0eclipse3.2.2 整合 weblogic8.1 -
修改eclipse启动jdk版本
2011-07-13 10:49 0修改eclipse启动jdk版本 1.eclipse3.3 ... -
velocity中使用jquery出现的问题
2011-07-07 12:45 2338velocity中使用jquery: 代码: <!D ... -
Ajax学习笔记(一)
2010-08-05 01:21 858功能 1、使用ajax实现分页功能 一、概念 二、使用到的技 ... -
jquery学习笔记(一)
2010-07-12 15:46 0实现功能: 通过ajax、json从后台查询数 ... -
log4j学习笔记(二)
2010-07-12 12:47 889二、通过配置文件输出日志 1.配置log4j.xml & ... -
log4j学习笔记(一)
2010-07-08 15:07 816一、代码中实现,实现把日志输出到控制台和文件 packag ... -
Input的readonly 属性与disabled属性
2010-07-06 10:48 8706readonly 不可编辑,可以获得焦点,背景颜色默认灰色,值 ...
相关推荐
这个例子展示了如何使用jQuery实现文字无缝滚动效果的基本步骤和关键代码。实际应用中,你可以根据需要调整滚动速度、文字内容和样式。理解并掌握这些知识点,将有助于你在网页开发中创建更多吸引人的动态效果。
在这个名为"使用jQuery实现文本滚动.rar"的压缩包中,包含了一个名为"myslideup.js"的jQuery插件,专门用于实现文字滚动效果。 首先,我们要理解jQuery的基本概念。jQuery是由John Resig在2006年创建的,它的核心...
它们可能包含了用于展示文本滚动效果的HTML结构、CSS样式和jQuery代码。 - **jquery.js**:这是jQuery的核心库文件,它包含了实现所有jQuery功能的JavaScript代码。在HTML文件中引入这个文件,我们就能使用jQuery...
为了实现无滚动条的垂直滚动效果,我们可以使用CSS来隐藏默认的滚动条: ```css #scrolling-text { overflow-y: scroll; scrollbar-width: none; /* 针对Firefox */ -ms-overflow-style: none; /* 针对IE和Edge *...
7. **js**:这个目录可能包含了所有必要的JavaScript文件,包括jQuery库本身以及实现文字滚动效果的自定义脚本。 在实现jQuery文字向上滚动时,主要涉及的技术点可能包括: 1. **DOM操作**:jQuery提供了一系列方便...
标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效,常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力,增加信息的可见性...
Marquee.js 是一个基于 JQuery 的插件,它能够帮助开发者轻松地在网页上实现文本或其他元素的无缝滚动效果。这种效果常见于新闻网站或者广告轮播场景,通过平滑且连续的滚动,提升用户体验并吸引用户的注意力。 ###...
jQuery作为一个强大的JavaScript库,因其简洁的API和丰富的功能,被广泛用于实现各种交互效果,包括标题中提到的“jQuery实现滚动效果”。这种效果主要分为两类:轮播效果和上下文字滚动效果。 首先,我们来详细...
在这个项目中,我们将探讨如何利用这三者来实现一个歌词滚动效果,就像许多音乐播放器中常见的那样。当歌曲播放时,歌词会按照时间轴滚动,并在当前播放的歌词上进行高亮和放大处理,确保其始终居中显示。 首先,...
这个例子展示了如何使用jQuery实现单行文字的上下循环滚动效果。根据实际需求,可以进一步优化和调整滚动速度、过渡效果等参数,以达到最佳的视觉体验。同时,通过结合ECMAScript(JavaScript的基础)和CSS3的特性,...
"jQuery左右滚动效果(带停顿)"是一种常见的网页交互设计,它允许用户通过鼠标悬停或点击来浏览一串水平排列的内容,如图片、文本或者产品展示。这个效果利用了jQuery库的强大功能,使得滚动过程平滑且具有可控制的...
### 使用jQuery实现自动滚动效果 在现代Web开发中,动态元素和交互式用户界面变得越来越重要。其中之一就是自动滚动效果,这种效果常用于新闻站点、博客或者电子商务网站中展示最新的文章或产品信息。本文将详细...
9. ScrollMagic:配合TweenMax库,实现根据滚动位置改变文本属性的高级动画效果。 10. TextRotator:循环显示一组文本,如标语或口号,可设置旋转方式(旋转、淡入淡出等)。 11. Hover.css:包含大量预设的CSS...
`jQuery Scrollable` 是一个功能强大且高度自定义的插件,专门设计用于在网页上实现流畅的滚动效果。它适用于各种内容类型,包括HTML文本、图像、视频和文件等,使得这些元素能够在用户界面中以水平或垂直方向平滑...
此外,由于jQuery已经对大部分浏览器进行了兼容性处理,因此使用jQuery实现的图片滚动效果可以很好地在各种主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上运行。 【标题打字机效果】是另一种增强用户体验的...
在这个名为"jQuery实现的文字无缝上下滚动效果源码.zip"的压缩包中,包含了一个利用jQuery实现的文字滚动效果的源代码示例。 文字无缝上下滚动是一种常见的网页动态效果,常用于新闻更新、公告展示或者页面简介等...
**jQuery网页背景视觉差滚动效果**是一种常见的网页设计技术,旨在增强用户体验,通过创造一种立体感和动态感,使网站更具吸引力。这种效果是通过在用户滚动页面时,让背景图像以不同的速度移动,与前景元素(如文本...
至于压缩包中的"数字滚动效果"文件,可能包含了实现这些实例的HTML、CSS和JavaScript代码。分析这些代码,我们可以学习到具体的实现方式,包括如何绑定事件、如何设置动画参数以及如何控制滚动的节奏。这对于我们...
尽管目标是使用“纯JavaScript”实现滚动效果,但在许多实际应用中,还是会借助jQuery等库来提高开发效率。虽然可以不使用jQuery而只用纯JavaScript实现,但那样可能会使代码更加冗长和复杂。 知识点六:性能优化 ...
本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先,我们需要理解公告栏滚动效果的基本原理。在给定文件示例中,公告栏的滚动效果是通过动态修改HTML元素CSS属性(如`marginTop`)来...