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 ...
随机推荐
- Deep Learning深入研究整理学习笔记五
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- 从零开始学C++之异常（一）：C语言错误处理方法、C++异常处理方法（throw, try, catch）简介
一.C语言错误处理方法 1.返回值(if … else语句判断错误) 2.errno(linux 系统调用) 3.goto语句(函数内局部跳转) 4.setjmp.longjmp(Do not use ...
- Java基础：泛型及其擦除性、不可协变性
转载请注明出处:jiq•钦's technical Blog 1泛型语法: 泛型类: class ClassName<T>{} 泛型方法:public <T> void f(T ...
- FastDFS概要
本篇文章是我上级老大所写. 留在这里为了不弄丢. FastDFS是一款开源的轻量级分布式文件系统 纯C实现,支持Linux, FreeBSD等UNIX系统 类google FS, 不是通用的文件系统, ...
- Linux学习记录--匿名沟通渠道
匿名沟通渠道 管道Linux最初支持Unix IPC其中的一种形式.具有下列特征: 1.管道是半双工.数据可以仅在一个方向流动:当双方需要沟通.建设两条管线需要. 2.仅仅能用于父子进程或者兄弟进程之 ...
- 第二章 IoC Setter注入
Setter注入又称为属性注入.是通过属性的setXXX()方法来注入Bean的属性值或依赖对象.由于Setter注入具有可选择性和灵活性高的优点,因此Setter注入是实际应用中最常用的注入方式. ...
- JavaScript(一基本语法)
本篇博客是对js的一个基本的了解,对于没有js基础的同学来说应该是个入门的基本吧 javascript 是原型化继承来的面向对象的动态类型的区分大小写的客户端的脚本语言.主要目的是为了解决服务器语言, ...
- OpenCV在矩阵上的卷积
转载请注明出处!!!http://blog.csdn.net/zhonghuan1992 OpenCV在矩阵上的卷积 在openCV官网上说是戴面具,事实上就是又一次计算一下矩阵中的每个value,那 ...
- Swift - 标签条（UITabBar）标签页控制器（UITabBarController）用法
App底部的tab标签页可以方便的把功能模块划分清楚,只需点击相应的标签页就可以展示完全独立的视图页面,同时各标签页间的视图也可以进行数据交换. TabBarItem系统自带图标样式(System ...
- 当try和finally里都有return时，会忽略try的return，而使用finally的return
今天去逛论坛 时发现了一个很有趣的问题: 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3 代码如下: class Test { public int aaa() { int x = 1; t ...