zoukankan      html  css  js  c++  java
  • 前台特效(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.添加鼠标悬停与鼠标离开事件

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

  • 相关阅读:
    使用鼠标
    TCP编程函数和步骤
    ASP.NET MVC+EF框架+EasyUI实现
    线性表简介
    一个项目的简单开发流程——需求、数据库、编码
    图像处理网络资源
    OPENCV 中的图像旋转与缩放
    命令行下面使用MAKEFILE方式编译OPENCV程序
    OpenCV In Thanksgiving Day
    OpenCV 下面的图像亮度变换 Intensity transformation
  • 原文地址:https://www.cnblogs.com/longdidi/p/2956331.html
Copyright © 2011-2022 走看看