• 前台特效(5) 滚动内容


    js方法:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title> New Document </title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <script type="text/javascript">
                //获取
                window.onload=function(){
                    var oneDiv = document.getElementsByTagName("div")[0];
                    var div1 =document.getElementById("div1");
                    var div2 =document.getElementById("div2");
                    div2.innerHTML=div1.innerHTML
    
                    //定时器
                    heights = oneDiv.scrollTop
                    var a1a =setInterval(scrolls,150);
    
                    function scrolls(){
                        if (oneDiv.scrollTop>=div2.offsetHeight)
                        {
                            oneDiv.scrollTop-=div1.offsetHeight
                        }
                        else{
    
                            oneDiv.scrollTop+=5;
                        }
    
                    }
                    //鼠标移上时清除定时器达到滚动停止的目的
                    oneDiv.onmouseover=function() {clearInterval(a1a)}
                    //鼠标移开时重设定时器
                    oneDiv.onmouseout=function(){a1a=setInterval(scrolls,150)}
    
                }
            </script>
    
            <style type="text/css">
                #oneDiv{
                    width:300px;
                    height:300px;
                    overflow:hidden;
                    border:solid 3px #6C787B;
                    text-align:center;
                    background-color: #4390BA;
                    color: #FEFEFE;
                }
            </style>
        </head>
        <body>
            <h1>子时过</h1>
            <div id="oneDiv">
                <div id="div1">
                    <p>单骑奉月光<br/>欲观花 午时的香 <br/>却芬芳带伤 <br/>记相传 跋涉万水<br/>流连的过往<br/>怎奈作 一滴苦水<br/>在枕边流淌<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪 <br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界 <br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜 <br/>记相传 跋涉万水 <br/>流连的过往  <br/>怎奈作 一滴苦水 <br/>在枕边流淌  <br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪<br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回  <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界<br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜<br/></p>
                </div>
                <div id="div2">
                </div>
            </div>
    
        </body>
    </html>

    jquery方法:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <title> New Document </title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
            <script type="text/javascript">
                $(function(){
                    //复制div1内容到div2
                    $("#div2").html($("#div1").html());
                    //定时器
                    var scroll = setInterval(scrolls,150);
                    //滚动函数
                    function scrolls(){
                        if($("#oneDiv").scrollTop()>=$("#div2").height()){
                            $("#oneDiv").scrollTop($("#oneDiv").scrollTop()-$("#div1").height());
                        }else{
                            $("#oneDiv").scrollTop($("#oneDiv").scrollTop()+5);
                        }
                    }
                    //鼠标悬停停止
                    $("#oneDiv").mouseover(function(){
                        clearInterval(scroll);
                    });
                    //鼠标离开继续
                    $("#oneDiv").mouseout(function(){
                        scroll = setInterval(scrolls,150);
                    });
                })
            </script>
    
            <style type="text/css">
                #oneDiv{
                    width:300px;
                    height:300px;
                    overflow:hidden;
                    border:solid 3px #6C787B;
                    text-align:center;
                    background-color: #4390BA;
                    color: #FEFEFE;
                }
            </style>
        </head>
        <body>
            <h1>子时过</h1>
            <div id="oneDiv">
                <div id="div1">
                    <p>单骑奉月光<br/>欲观花 午时的香 <br/>却芬芳带伤 <br/>记相传 跋涉万水<br/>流连的过往<br/>怎奈作 一滴苦水<br/>在枕边流淌<br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪 <br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回 <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界 <br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜 <br/>记相传 跋涉万水 <br/>流连的过往  <br/>怎奈作 一滴苦水 <br/>在枕边流淌  <br/>葬爱化成蝶 相见断桥边<br/>亦真亦幻的情节 梦回子时曰 <br/>琴声的忏悔和冰冷的眼泪<br/>华丽的咒语 完美的沉睡 <br/>前世的宿命在今夜里轮回  <br/>弹指间 路转峰回 <br/>眼看狂风又乍起是狼族的呼唤 <br/>刺客的嘴脸 渔人的世界<br/>迷失的荒野与真爱的纠结 <br/>记载着 子时 狂澜<br/></p>
                </div>
                <div id="div2">
                </div>
            </div>
    
        </body>
    </html>

    基本思路:

    1.复制div1的内容到div2(为了无缝衔接)

    2.设置定时器触发scrolls函数

    3.scrolls函数,当scrollTop大于div2的高度时,使得scrollTop回到滚动到div1与div2的交接点(无缝衔接),其他时候向下滚动

    为了方便理解:

    4.添加鼠标悬停与鼠标离开事件

    希望对你有所帮助! ^_^~~

  • 相关阅读:
    数据库分页
    oracle查询某一个字段的数量总和
    JSON.stringify()和JSON.parse()
    oracle查询以当前年份为准的近些年数据
    关于oracle中日期使用
    最简单的js确认框!
    oracle插入数据时解决和旧数据id的冲突
    CentOS查看内核版本,位数,版本号
    CentOS 使用命令设置代理
    CentOS 编译源码安装MySQL-5.6.16
  • 原文地址:https://www.cnblogs.com/longdidi/p/2956331.html
Copyright © 2020-2023  润新知