- 浏览: 46526 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
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 1047该资源均来自网络,稍作了整理,以便查询 开发环境: ecli ... -
strusts2.0+servlet
2015-06-19 21:26 0在struts2.0中加入servlet -
JFreeChart 学习(1)-获取图片
2015-06-19 21:35 709jfreechart版本: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 4143现象: 向eclipse里面导入已存在工程时,报如下错误: ... -
eclipse3.6 在 tomcat6上部署web应用
2011-08-18 14:43 0本文做为一个简单练习总结,探索一个简单web工程从创建到部署的 ... -
eclipse 之 scrapbook
2011-08-06 08:37 1287eclipse 之 scrapbook 在日常的 ... -
eclipse添加findbugs plugin
2011-08-06 08:09 1023eclipse添加findbug plugin Eclips ... -
eclipse添加打开文件夹资源快捷方式
2011-08-05 08:59 1675eclipse添加打开文件夹资源快捷方式 在eclipse ... -
支持IE及FIRFOX 添加连接到收藏夹的简易操作
2011-07-21 09:55 1139支持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 2294velocity中使用jquery: 代码: <!D ... -
Ajax学习笔记(一)
2010-08-05 01:21 826功能 1、使用ajax实现分页功能 一、概念 二、使用到的技 ... -
jquery学习笔记(一)
2010-07-12 15:46 0实现功能: 通过ajax、json从后台查询数 ... -
log4j学习笔记(二)
2010-07-12 12:47 853二、通过配置文件输出日志 1.配置log4j.xml & ... -
log4j学习笔记(一)
2010-07-08 15:07 778一、代码中实现,实现把日志输出到控制台和文件 packag ... -
Input的readonly 属性与disabled属性
2010-07-06 10:48 8663readonly 不可编辑,可以获得焦点,背景颜色默认灰色,值 ...
相关推荐
js实现楼层滚动效果 本文实例为大家分享了jquery实现滑动楼梯效果,实现楼层的滚动以及点击楼层按钮跳转到对应的楼层,代码如下 html代码: ; background-color: black; color: #fff;">无意义的文本</div> ...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
<script type="text/javascript" src="/jquery/jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); <p>If you click on me, I ...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
jQuery Parallux是一款可制作响应式网页滚动视觉差特效的jQuery插件。通过该插件可以制作背景图像,图像,视频,文本等HTML元素的滚动视觉差效果。
您可能感兴趣的文章:jquery单行文字向上滚动效果的实现代码jquery 页眉单行信息滚动显示实现思路及代码c#删除代码中的单行注释行示例js实现单行文本向上滚动效果实例代码jQuery实现单行文字间歇向上滚动源代码js...
19.4 使用jQuery处理事件 19.5 动画效果 19.6 jQuery中的Ajax 19.7 工具函数 19.8 jQuery选择器和选取方法 19.9 jQuery的插件扩展 19.10 jQuery UI类库 第20章 客户端存储 20.1 localStorage和sessionStorage 20.2 ...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增...
示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...
《JavaScript权威指南(第6版)》要讲述的内容涵盖JavaScript语言本身,以及web浏览器所实现的JavaScript API。本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增...
示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。 01. 滑动的字符 在线演示 下载源码 02. ...
自定义选择框使用jQuery替换SelectBox。 隐藏选择框,然后将其替换为易于设置样式CSS版本。 功能包括: 自定义滚动条-默认情况下启用使用jScrollPane的自定义滚动条。 您也可以使用默认的浏览器,但效果并不理想。 ...
页面滚动阻尼效果实现 功能描述 要求 页面分为AB两个区域 当手机可视区的底部接触到 “阻尼带” 的时候,有个上拉弹性过程 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部,让可视区从B区开始显示 当上拉...