<!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. Eclipse Workspace Unavailable

    开启Eclipse 提示: Workspace Unavailable: Workspace in use or cannot be created, choose a different one. ...

  2. zabbix 主机名必须要能ping通

    api01:/home/tomcat> cat /etc/hosts 127.0.0.1 localhost ::1 localhost localhost.localdomain localh ...

  3. zabbix 监控jmx 需要--enable-java

    安装Javagateway如果原来已经安装zabbix,只需要再添加以下zabbix-java # tar zxvf zabbix-2.2.0.tar.gz # cd zabbix-2.2.0 # . ...

  4. 基于visual Studio2013解决面试题之0301累加

     题目

  5. 基于visual Studio2013解决面试题之0206hash表实现

     题目

  6. 用ATL开发和部署ActiveX网页控件

    用ATL开发和部署ActiveX网页控件 摘 要 ActiveX插件技术广泛的运用于B/S系统中,本文通过一个项目实例,详细介绍用ATL开发和部署ActiveX网页控件的过程.学习使用ActiveX让 ...

  7. Android开发按返回键应用后台运行

    @Override  public boolean onKeyDown(int keyCode, KeyEvent event) {   if (keyCode == KeyEvent.KEYCODE ...

  8. Swift - 判断设备类型开发兼容的iOS应用（iPad使用分隔视图控制器）

    1,分割视图控制器(UISplitViewController) 在iPhone应用中,使用导航控制器由上一层界面进入下一层界面. 但iPad屏幕较大,通常使用SplitViewController来 ...

  9. cape town

    开普敦_百度百科 开普敦

  10. RSA密码系统 基于大数环境编写 密码学课程设计

    RSA密码系统的实现 1．问题描述 RSA密码系统可具体描述为:取两个大素数p和q,令n=pq,N=(p-1)(q-1),随机选择整数d,满足gcd(d,N)=1,ed=1 modN. 公开密钥:k1 ...