javaScript滚动新闻
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>滚动新闻</title>
</head>
<style type="text/css">
#div1{
width:200px;
height:80px;
background-color:#CCC;
position:absolute;
left:0px;
top:0px;
z-index:1;
overflow:hidden;
}
#imgs{
width:100px;
height:400px;
background-color:#9C9;
position:absolute;
left:200px;
top:0px;
z-index:1; //垂直方向置于最顶层
overflow:hidden; //超出部分隐藏
}
</style>
<body>
<!--div 的高度设置比实际须要的高度小-->
<div id="div1">
<ul id="news">
<li><a href="#">aaaaaaaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbbbbbbbbb</a></li>
<li><a href="#">ccccccccccccccc</a></li>
<li><a href="#">ddddddddddddddd</a></li>
<li><a href="#">eeeeeeeeeeeeeee</a></li>
<li><a href="#">fffffffffffffff</a></li>
<li><a href="#">ggggggggggggggg</a></li>
</ul>
</div>
<div id="imgs">
<img src="imgs/11.png"></img>
<img src="imgs/22.png"></img>
<img src="imgs/33.png"></img>
<img src="imgs/44.png"></img>
<img src="imgs/55.png"></img>
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
//注意须要让当前的dom载入全然之后，再运行js代码
//文字滚动
news = document.getElementById('news');
function newScroll(node){
var t = node.firstChild;
node.removeChild(t);
node.appendChild(t);
}
id = setInterval('newScroll(news)',400);
news.onmouseover = function(){
clearTimeout(id);
}
news.onmouseout = function(){
id = window.setInterval('newScroll(news)',400);
} //图片滚动
imgs = document.getElementById('imgs');
id1 = setInterval('newScroll(imgs)',400);
imgs.onmouseover = function(){
clearTimeout(id1);
}
imgs.onmouseout = function(){
id1 = window.setInterval('newScroll(imgs)',400);
}
</script>
javaScript滚动新闻的更多相关文章
- javaScript滚动新闻之上下左右平滑滚动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用JavaScript实现新闻滚动效果
最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...
- AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX
1.AJAX简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...
- 基于jQuery实现滚动新闻代码下载
分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 滚动新闻插件vticker
vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间.间隔时间.显示个数.滚动方向(向上/向下).容器高度等等,但它对 HTML 结构有 ...
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...
- 【js与jquery】jquery循环滚动新闻
2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...
- 利用JQuery一步步打造无缝滚动新闻
首先,我们这里有这么一段html代码,很简洁,如下所示: 1 <div id="tag">2 <ul>3 <li>你说我是好人吗,我是好人啊&l ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
随机推荐
- 进阶：案例五: Dynamic 创建 Business Graphic
效果图: step: 无需节点无需UI 1.添加属性 2.代码: method WDDOMODIFYVIEW . DATA:lr_graph TYPE REF TO cl_wd_business_gr ...
- iOS开发经常使用宏定义
iOS开发经常使用宏定义 iOS开发中经常须要获取屏幕宽度高度,为view设置颜色,为imgagView设置图片等,我们都可定义一些宏,随时都可拿来使用,方便开发 <span style=&qu ...
- 深度RAMOS，把操作系统全部安装在内存上
你看下深度RAMOS就知道了 RAMOS+音速启动+绿色软件+云端 很爽 http://www.shenduwin7.com/jiaocheng/52.html
- win32多线程程序设计笔记（第二章）
第二章线程的第一次接触,主要讲了如何创建线程以及需要注意的几点. 一.创建线程 与调用函数的过程类似;线程只不过用CreateThread的API将函数封装起来,并产生一个与主程序同时执行的程序来调用 ...
- 使用Understand获取某个函数（方法）的静态度量指标
在之前的一篇日志中,我简单总结了调用Understand的Perl API的方法,这里再简单总结一些经验: 在SciTools\doc\manuals\pdf目录下的understand_api.pd ...
- GitHub上项目配置和导入eclispe的问题解决
在github上下载的工程文件导入的时候总是遇到各种各样的问题,昨天晚上瞎忙一晚上查资料没搞定.早上找高手请教了一下,一起弄了好一会终于解决了,这里记录一下方法解决的具体方法步骤. 本方法适用于离线导 ...
- RotateDisp – 一键旋转显示画面 - 小众软件
RotateDisp – 一键旋转显示画面 - 小众软件 RotateDisp – 一键旋转显示画面
- java web从零单排第十六期《struts2》控制标签(2)
1.s:subset标签概述: s:subset标签功能是从一个集合中取出部分元素合并成一个新的集合,新生成的这个集合是原来集合的子集.属性和意义如下: 属性名 是否必需 默认值 类型 说明介绍 co ...
- listview改变选中行字体颜色
[android]listview改变选中行字体颜色 目标:选中item,其字体设置为#3197FF,未选中的,其字体为#FFFFFF 与listvew设置选中行item背景图片一样,使用select ...
- Java---25---集合框架共性方法
集合类 为什么会出现集合类 面向对象语言对事物的体现都是以对象的形式,所以为了方便对较多个对象的操作,就对对象进行存储,集合就是存储对象最经常使用的一种方式 数组和集合类同一时候容器,有何不同? 数组 ...