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 ...
随机推荐
- Python中的列表解析和生成表达式
摘要:优雅.清晰和务实都是python的核心价值观,如果想通过操作和处理一个序列(或其他的可迭代对象)来创建一个新的列表时可以使用列表解析( List comprehensions)和生成表达式,通过 ...
- (Relax 数论1.6)POJ 1061 青蛙的约会(扩展的欧几里得公式)
/* * POJ_1061.cpp * * Created on: 2013年11月19日 * Author: Administrator */ #include <iostream> # ...
- 如何在一个jpg图片上面叠加文字
1.将jpg转为bmp格式 2.在bmp文件上写上所需文字 3.将写入文字的bmp文件重新转为jpg格式 http://dev.csdn.net/develop/article/22/22948.sh ...
- PHP之操作数据库
数据库,顾名思义,是一个存放数据的容器.然后在使用过程中对数据库里面的数据增删改查,具体是怎么实现的呢? 这儿不得不提一下一个神奇的东西:SQL语句:结构化查询语言(Structured Query ...
- java中怎么判断一个字符串中包含某个字符或字符串
public static void main(String[] args) { String str="ABC_001"; ){ System.out.println(" ...
- android 多媒体数据库详解
主要分为几节: 1. Android的媒体文件内部是如何存储的? 2. Andoid的媒体文件如何获取? 3. 在使用媒体文件的一些小技巧. 1. Android的多媒体如何存储的? Android的 ...
- C++建立动态二维数组
C++建立动态二维数组主要有两种方法: 1.使用数组指针,分配一个指针数组,将其首地址保存在b中,然后再为指针数组的每个元素分配一个数组 int * ...
- MFC 对话框中动态创建N级菜单以及响应事件
创建一个基于对话框的工程,工程名为CreateMenu 为该对话框增加一个文件菜单项和测试菜单项,如下图所示 测试菜单项至少要有一个子菜单项 在对话框属性中关联该菜单 在resource.h中增加 ...
- MFC的消息反射机制
1.消息反射解释: 父窗口将子窗口发给它的通知消息,首先反射回子窗口进行处理(即给子窗口一个机会,让子窗口处理此消息),这样通知消息就有机会能被子窗口自身进行处理. 2.MFC中引入消息反射的原因: ...
- 马航MH17事件将把普京逼入绝境?
据7月22日报道,马克兰东部民间武装22日凌晨将失事客机的"黑匣子"交给马来西亚方面.乌政府与民间武装允许在坠机地点附的小范围停火. 与此同一时候,联合国安理会21日通过决议,敦促 ...