无间断滚动的新闻文章列表

<!--Quirks Mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无间断滚动的新闻文章列表</title>
<link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" />
<!--[if IE]><style>
@import url("/tutorials/demo/css/ie.css");
</style><![endif]-->
<style type="text/css">
<!--
a{background:#FFF; color:#333;}
a:hover{background:#FFF;color: #C00;}
#demo ul{text-align: left; }
#demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;}
#FGWrapper{width: 400px; margin:2em auto; background:#EEE;}
#demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;}
#desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;}
#copyright{float: right;}
-->
</style>
<noscript>
<style type="text/css">
#demo{overflow:auto; }
}
</style>
</noscript>
</head>
<body>
<div id="ForestganWrap">
<div id="forestganHeader">
<h1>CSS 布局演示 </h1>
<h2 id="demo_date">2010-10-05 发表</h2>
</div>
<div id="forestganMiddle"> <div id="FGWrapper">
<div id="demo">
<div id="demo1">
<ul>
<li>
<a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="/tcys/1061.htm">
超级漂亮的几款清新的网页CSS布局配色实例</a></li>
<li>
<a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="/tcys/1060.htm">
CSS制作斜角上有背景图片的Div层</a></li>
<li>
<a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="/tcys/1059.htm">
Js实现的层展开、折叠效果，默认层是折叠的</a></li>
<li>
<a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="/tcys/1058.htm">
DIV始终固定在网页右下角的CSS实现方法</a></li>
<li>
<a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="/tcys/1057.htm">
JavaScript未知高度元素的垂直居中</a></li>
<li>
<a title="渐变彩色的文字" target="_blank" href="/ljwb/1056.htm">
渐变彩色的文字</a></li>
<li>
<a title="指定文字逐条显示" target="_blank" href="/ljwb/1055.htm">
指定文字逐条显示</a></li>
<li>
<a title="滚动的标题栏" target="_blank" href="/qtdm/1054.htm">
滚动的标题栏</a></li>
<li>
<a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="/txtx/1036.htm">
JS 4屏平滑滚动幻灯片特效</a></li>
<li>
<a title="图片的无缝滚动（纵向、横向）" target="_blank" href="/txtx/1035.htm">
图片的无缝滚动（纵向、横向）</a></li>
<li>
<a title="鼠标触及带边框的菜单" target="_blank" href="/cddh/1034.htm">
鼠标触及带边框的菜单</a></li>
<li>
<a title="比较实用的CSS控制链接颜色效果" target="_blank" href="/ljwb/1032.htm">
比较实用的CSS控制链接颜色效果</a></li>
<li>
<a title="鼠标接触或离开图片时，图片大小相应变化" target="_blank" href="/txtx/1031.htm">
鼠标接触或离开图片时，图片大小相应变化</a></li>
<li>
<a title="特殊的鼠标悬停提示" target="_blank" href="/sbtx/1028.htm">
特殊的鼠标悬停提示</a></li>
<li>
<a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="/cddh/1027.htm">
CSS Sprite制作的鼠标感应网站导航条</a></li>
<li>
<a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="/tcys/1025.htm">
鼠标激活显示背景色的CSS特效代码</a></li>
<li>
<a title="[酷] 又一款FLASH图片切换效果代码" target="_blank" href="/txtx/1023.htm">
[酷] 又一款FLASH图片切换效果代码</a></li>
<li>
<a title="精致的翻动图片新闻代码" target="_blank" href="/txtx/1022.htm">
精致的翻动图片新闻代码</a></li>
<li>
<a title="跟随鼠标顶部奇妙的海底生花" target="_blank" href="/sbtx/1021.htm">
跟随鼠标顶部奇妙的海底生花</a></li>
<li>
<a title="强制点击广告代码的特效" target="_blank" href="/ljwb/1020.htm">
强制点击广告代码的特效</a></li>
<li>
<a title="鼠标经过列表显示小图的列表特效代码" target="_blank" href="/tcys/1019.htm">
鼠标经过列表显示小图的列表特效代码</a></li>
<li>
<a title="不用圆角图片制作的圆角效果" target="_blank" href="/tcys/1018.htm">
不用圆角图片制作的圆角效果</a></li>
<li>
<a title="超级漂亮的几款清新的网页CSS布局配色" target="_blank" href="/tcys/1061.htm">
超级漂亮的几款清新的网页CSS布局配色实例</a></li>
<li>
<a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="/tcys/1060.htm">
CSS制作斜角上有背景图片的Div层</a></li>
<li>
<a title="Js实现的层展开、折叠效果，默认层是折叠的" target="_blank" href="/tcys/1059.htm">
Js实现的层展开、折叠效果，默认是折叠的</a></li>
<li>
<a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="/tcys/1058.htm">
DIV始终固定在网页右下角的CSS实现方法</a></li>
<li>
<a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="/tcys/1057.htm">
JavaScript未知高度元素的垂直居中</a></li>
<li>
<a title="渐变彩色的文字" target="_blank" href="/ljwb/1056.htm">
渐变彩色的文字</a></li>
<li>
<a title="指定文字逐条显示" target="_blank" href="/ljwb/1055.htm">
指定文字逐条显示</a></li>
<li>
<a title="滚动的标题栏" target="_blank" href="/qtdm/1054.htm">
滚动的标题栏</a></li>
<li>
<a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="/txtx/1036.htm">
JS 4屏平滑滚动幻灯片特效</a></li>
<li>
<a title="图片的无缝滚动（纵向、横向）" target="_blank" href="/txtx/1035.htm">
图片的无缝滚动（纵向、横向）</a></li>
<li>
<a title="鼠标触及带边框的菜单" target="_blank" href="/cddh/1034.htm">
鼠标触及带边框的菜单</a></li>
<li>
<a title="比较实用的CSS控制链接颜色效果" target="_blank" href="/ljwb/1032.htm">
比较实用的CSS控制链接颜色效果</a></li>
<li>
<a title="鼠标接触或者离开图片时，图片大小会相应变化" target="_blank" href="/txtx/1031.htm">
鼠标接触或离开图片时，图片大小相应变化</a></li>
<li>
<a title="特殊的鼠标悬停提示" target="_blank" href="/sbtx/1028.htm">
特殊的鼠标悬停提示</a></li>
<li>
<a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="/cddh/1027.htm">
CSS Sprite制作的鼠标感应网站导航条</a></li>
<li>
<a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="/tcys/1025.htm">
鼠标激活显示背景色的CSS特效代码</a></li>
<li>
<a title="[酷] 又一款FLASH图片切换效果代码" target="_blank" href="/txtx/1023.htm">
[酷] 又一款FLASH图片切换效果代码</a></li>
<li>
<a title="精致的翻动图片新闻代码" target="_blank" href="/txtx/1022.htm">
精致的翻动图片新闻代码</a></li>
<li>
<a title="跟随鼠标顶部奇妙的海底生花" target="_blank" href="/sbtx/1021.htm">
跟随鼠标顶部奇妙的海底生花</a></li>
</ul>
</div>
<div id="demo2"> </div>
<script type="text/javascript">
//图片无间断滚动代码，兼容IE、Firefox、Opera
var speed=40;
var FGDemo=document.getElementById(‘demo‘);
var FGDemo1=document.getElementById(‘demo1‘);
var FGDemo2=document.getElementById(‘demo2‘);
FGDemo2.innerHTML=FGDemo1.innerHTML
function Marquee1(){
if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0)
FGDemo.scrollTop-=FGDemo1.offsetHeight
else{
FGDemo.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)
FGDemo.onmouseover=function() {clearInterval(MyMar1)}
FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</script> </div>
<div id="desc"><a href="http://www..com"><span id="copyright"></span></a>文章列表无间断滚动演示</div>
</div> </div>
</div>
</body>
</html>
<p align="center"></p>
时间： 2024-12-21 18:09:14

无间断滚动的新闻文章列表的相关文章

IOS实现文字水平无间断滚动

IOS实现文字水平无间断滚动 IOS跑马灯效果,实现文字水平无间断滚动,示例代码如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer *timer; UIScrollView *scrollViewText; } @property (nonatomic ,strong) NSArray *arrData; @end ViewController.m

javascript -- (无间断滚动图片)

无间断滚动图片 --原理(定时器 每隔.1秒调用一次滚动的函数) /***body**/ <div id="wrap"> <div id="box"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg

JS图片无间断滚动代码合集

JavaScript图片滚动代码合集,向上下左右四个方向的无缝滚动代码,前端设计开发时所能用的一个图片特效,你可只用其中的一种滚动.前端框架分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1

JavaScript js无间断滚动效果 scrollLeft方法 使用模板

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> 无间断滚动scrollLeft套用模板 </title> <meta name="Keywords" content=""> <meta name="Description" content=""

IOS跑马灯效果，实现文字水平无间断滚动

ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController{ 4 NSTimer *timer; 5 UIScrollView *scrollViewText; 6 } 7 8 @property (nonatomic ,strong) NSArray *arrData; 9 10 11 @end ViewController.m 1 // 2 // ViewContro

司徒正美文章列表

由于本人对司徒正美文章的喜欢,特此整理文章列表如下. 一个带完整的RBAC授权系统的rails应用(第一部分)(司徒正美, 3年前, 12/6549) 一个带完整的RBAC授权系统的rails应用(第二部分)(司徒正美, 3年前, 1/1135) 随机生成十六进制颜色(司徒正美, 3年前, 0/340) ruby中的类变量与实例变量(司徒正美, 3年前, 0/231) ruby模拟多个构造器(司徒正美, 3年前, 0/153) ruby的实例方法(写方法,读方法与读写方法)(司徒正美, 3年前,

一个带标号的CSS文章列表写法

<title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#b52725;text-decoration:underline;} .clear{display:bloc

Dede文章列表

文章列表标签的使用: {dede:arclist flag='h' typeid='' row='' col='' titlelen='' infolen='' imgwidth='' imgheight='' listtype='' orderby='' keyword='' limit='0,1'} <a href='[field:arcurl/]'>[field:title/]</a> {/dede:arclist} col='' 分多少列显示(默认为单列) row='10'

1.7 博客系统| 系统首页的导航区域| 主体布局| admin |首页文章列表的渲染

设置系统首页(文章列表渲染) index.html bootstrap里边的导航组件:https://v3.bootcss.com/components/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" h