js-新闻无缝滚动

HTML部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312"/>
<title>无缝滚动</title>
</head>
<body>
<div id="box">
    <ul id="con1">
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
        <li>444444444444</li>
        <li>555555555555</li>
        <li>666666666666</li>
        <li>777777777777</li>
        <li>888888888888</li>
        <li>999999999999</li>
    </ul>
    <ul id="con2"></ul>
</div>
</body>
</html>

CSS部分:

 #box{
           height:240px;
        width:300px;
        margin:0 auto;
        border:1px solid #0066FF;
        overflow:hidden;
        padding-bottom:20px;
   }
   #box li{
           color:#333;
        padding:5px 0;
   }
    #box ul{
           margin:0;
        padding:0;
   }     

JS部分:

var area=document.getElementById("box");
var con1=document.getElementById("con1");
var con2=document.getElementById("con2");
con2.innerHTML=con1.innerHTML;
function scrollUp(){
    if(area.scrollTop>=con1.offsetHeight){
        area.scrollTop=0;
    }else{
        area.scrollTop++;
    }
}
var time=50;
myscroll=setInterval("scrollUp()",time);
area.onmouseover=function (){
    clearInterval(myscroll);
}
area.onmouseout=function (){
    myscroll=setInterval("scrollUp()",time);
}
时间: 2024-10-01 00:31:47

js-新闻无缝滚动的相关文章

JS 实现无缝滚动动画原理(初学者入)

这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码:https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML ps: 上面和下面的滚动进度是一致的,上面红色框是为了演

js图片无缝滚动代码

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

JS平滑无缝滚动实现

本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. border: 1px dashed #CCC; 5. width: 1280px; 6. height:200px; 7. } 8. #demo img { 9. border: 3px solid #F2F2F2; 10. } 11. #indemo { 12. float: left; 13. widt

js学习 无缝滚动 和 随机色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js图片无缝滚动

<html> <head> <title>图片滚动</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style> #demo { background:#fff; overflow: hidden; width:500px; border: 1px solid #ccc; } #demo

CSS/JS实现无缝滚动字幕

实现思路 定义两个滚动块,内容一模一样,从下往上两个紧挨着滚动,当第一个滚动块滚动出容器时(即第二个滚动块顶到了容器的上边缘),此时我们将第一个滚动块设置位置到容器上边缘,由于两个滚动块一模一样,从效果上我们也看不出来容器的内容发生了替换. html 代码 <div class="box" id="box"> <ul class="col1" id="col1"> <li>1</li&

js之无缝滚动

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0px;padding:0xp;}//默认全局外边距0,内边距0 #div1 {width:800px;height:200px

js 图片无缝循环

<html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> body{ background:gray; } #wrap{ width:810px; height:200px; border:1px solid black; position:relative; left:50%; top:50%; margin-left:-410px; margin-top:-

js从右向左无缝滚动原理

今天公司的首页新增一个公告需求,类似于如下这段代码的效果,做完以后仔细思考了一下其中的原理 在说原理之前建议先看看我上一篇 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解 这篇文章,里面例图即视化的解释了各种定位的不同,以及在各浏览器下不同的解析结果. 不敲太多的文字,直接上代码,干货都在注释里 <!DOCTYPE html> <head> <meta http-equiv="Content-

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)