javascript 向上滚动
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content=",,">
<meta name="Description" content=" /">
<title>SuperSlide - 文字无缝滚动特效-上</title>
<!-- <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> --> </head> <body> <style type="text/css"> /* css 重置 */
*{margin:; padding:; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:; }
a{ text-decoration:none; color:#; }
a:hover{ color:#1974A1; } /* 本例子css */
.txtMarquee-top{ overflow:hidden; position:relative; border:1px solid #ccc; }
.txtMarquee-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding: 10px; }
.txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") -100px no-repeat;}
.txtMarquee-top .hd .next{ background-position: -140px; }
.txtMarquee-top .hd .prevStop{ background-position:-60px -100px; }
.txtMarquee-top .hd .nextStop{ background-position:-60px -140px; }
.txtMarquee-top .bd{ padding:15px; }
.txtMarquee-top .infoList li{ height:24px; line-height:24px; }
.txtMarquee-top .infoList li .date{ float:right; color:#; } </style> <div class="txtMarquee-top">
<div class="bd">
<div class="tempWrap" id="tempWrap" style="overflow:hidden; position:relative; height:120px" >
<ul class="infoList" id="infoList" style="position: relative; padding: 0px; margin: 0px; top: 0px;" >
<li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">口语：会说中文就能说英语！</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">数理化老师竟也看学习资料？</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">学外语，上北外！</a></li>
<li style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">那些无法理解的荒唐事</a></li>
<li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">中国打破了世界软件巨头规则</a></li>
<li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">口语：会说中文就能说英语！</a></li>
<li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">数理化老师竟也看学习资料？</a></li>
<li class="clone" style="height: 24px;"><span class="date">--</span><a href="#" target="_blank">学英语送ipad2,45天突破听说</a></li>
</ul>
</div>
</div>
</div> <script type="text/javascript"> window.onload=function(){ var InfoList = document.getElementById('infoList');
var li = document.getElementsByTagName('li');
var TempWrap = document.getElementById('tempWrap');
var HTempWrap = TempWrap.offsetHeight;
var HInfoList = InfoList.offsetHeight;
var index = ;
var Hli = li[].offsetHeight;
var Lli = li.length;
InfoList.style.height = Hli*Lli;
var info = (HInfoList-HTempWrap)*-; Timeint = setInterval(setTime,) TempWrap.onmouseover = function(){
clearInterval(Timeint);
};
TempWrap.onmouseout = function(){
Timeint = setInterval(setTime,);
}
function setTime(){ index --;
if(index <= info){
index = -;
return false;
}else{
index = index+-;
InfoList.style.top = index+'px';
}
} } </script> </body>
</html>
效果图：
javascript 向上滚动的更多相关文章
- JavaScript判断鼠标滑轮是向下还是向上滚动
我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- jquery插件之文字无缝向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...
- jquery 文字向上滚动+CSS伪类before和after的应用
汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
- js无间隙向上滚动
一.优点:div可以load:缺点:滚动的时候有点娘,磨磨唧唧,不够干脆爽快 html <div id="my_msg" class="my-msg bg-whit ...
- 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- 齐博x2向上滚动特效
要实现图中圈起来的向上滚动特效,大家可以参考下面的代码 <!--滚动开始--> <style type="text/css"> .auto-roll{ he ...
随机推荐
- c++转换构造函数和类型转换函数
看stl源码时,有一段代码感觉很奇怪 iterator begin() { return (link_type)((*node).next); } iterator和link_type是两种不同类型, ...
- poj3469 最小割构图
题目链接:http://poj.org/problem?id=3469 #include <cstdio> #include <cmath> #include <algo ...
- RabbitMQ-死信(Dead Letter)
对于有异常的消息我们可以有如下做法: 记录下来再ack. nack或者reject,同时将requeue设为false. 在第2条的基础上增加死信(Dead Letter). 上边的第3个做法可以 ...
- Textview 文本旋转，倾斜
有时候Android自带的控件无法满足我们的某些要求,这时就需要我们自定义控件来实现这些功能.比如需要一个TextView里的字倾斜一定的角度,就需要自定义TextView. 代码如下: ? 1 2 ...
- Nginx+keepalived做双机热备加tomcat负载均衡
Nginx+keepalived做双机热备加tomcat负载均衡 环境说明: nginx1:192.168.2.47 nginx2:192.168.2.48 tomcat1:192.168.2.49 ...
- PHP开发安全之近墨者浅谈(转)
==过滤输入/输出转义 过滤是Web应用安全的基础.它是你验证数据合法性的过程.通过在输入时确认对所有的数据进行过滤,你可以避免被污染(未过滤)数据在你的程序中被误信及误用.大多数流行的PHP应用的漏 ...
- MYSQL 体系结构图-space结构图
- gcc -I -L -l区别
我们用gcc编译程序时,可能会用到“-I”(大写i),“-L”(大写l),“-l”(小写l)等参数,下面做个记录: 例: gcc -o hello hello.c -I /home/hello/inc ...
- GIT使用指南
安装git,svn,ant,maven并配置环境变量 1.拷贝settings.xml到用户目录的.m2目录下. 2.打开git命令行,使用如下命令生成公钥私钥 ssh-keygen -t rsa 3 ...
- haproxy主配置文件
1.haproxy 配置文件 ------------------------------------------------------------------------------------- ...