<!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滚动新闻的更多相关文章

  1. javaScript滚动新闻之上下左右平滑滚动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  3. AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX

    1.AJAX简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...

  4. 基于jQuery实现滚动新闻代码下载

    分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 滚动新闻插件vticker

    vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间.间隔时间.显示个数.滚动方向(向上/向下).容器高度等等,但它对 HTML 结构有 ...

  6. javascript滚动栏响应鼠标滑轮的实现上下滚动事件

    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...

  7. 【js与jquery】jquery循环滚动新闻

    2.html代码: <h3>最新动态</h3> <div class="scrollNews" > <ul> <li>& ...

  8. 利用JQuery一步步打造无缝滚动新闻

    首先,我们这里有这么一段html代码,很简洁,如下所示: 1 <div id="tag">2 <ul>3 <li>你说我是好人吗,我是好人啊&l ...

  9. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

随机推荐

  1. POI读取公式的值

    excel中的数据: package poi; import java.io.FileInputStream; import java.io.IOException; import java.io.I ...

  2. Problem J: Island Buses

    主要题意是:大海之间有岛,有的岛之间有桥,问你岛的个数,桥的个数,以及没有桥联通岛的个数,其中最后一次输入的没有回车,不注意的话最后一次会被吞,第二,桥的两端的标记是“X”(X也代表陆地),“X”的四 ...

  3. 了解sota字符界面（章节4.1）

    4 SOTA操作 4.1 SOTA字符界面 sotaCC是字符界面管理sota系统程序 . 在/.../sota/bin/目录下,启动sotaCC.在终端的该目录下输入指令“./sotaCC”,启动s ...

  4. NYOJ 1085 数单词 （AC自己主动机模板题）

    数单词 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 为了可以顺利通过英语四六级考试,如今大家每天早上都会早起读英语. LYH本来以为自己在6月份的考试中能够通过六 ...

  5. ASP.NET - GridView实现点击编辑列

    加载: 点击编辑: 数据库设计: 前端代码: DataKeyNames="ID"  设置点击“编辑”选项的时候,要获取的值,一般获取ID主键,便于修改数据. AutoGenerat ...

  6. CURD演示 2

    <?php class UserAction extends Action{ public function index(){ echo "你好!"; $m=M('user' ...

  7. 马航MH17事件将把普京逼入绝境?

    据7月22日报道,马克兰东部民间武装22日凌晨将失事客机的"黑匣子"交给马来西亚方面.乌政府与民间武装允许在坠机地点附的小范围停火. 与此同一时候,联合国安理会21日通过决议,敦促 ...

  8. Swift - 炫酷放射弹出按钮菜单（改造自AwesomeMenu）

    这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu 这里改造成了Sw ...

  9. matlab画棋盘格程序

    转载请注明出处:zhouyelihua**http://blog.csdn.net/zhouyelihua/article/details/46674191** 意义 在摄像机标定过程中经常须要打印棋 ...

  10. 简单的RPC java实现

    RPC的名声大噪之时是在2003年,那一个“冲击波”病毒(Blaster Worm virus)袭卷全球的一年.而“冲击波”正是用着RPC这把刀来敲开了远程电脑的大门.当然RPC 有更多正面的应用,比 ...