无间断滚动效果 htc

页面导航:首页 > 脚本专栏 > htc > 无间断滚动效果 htc

无间断滚动效果 htc

来源:互联网 作者:脚本宝典 时间:2015-07-21 12:45 【

marquee.htc 复制代码 代码如下: //描述:无间断滚动字幕 //版本:2.0 //作者:宝玉(WebUC.NET) //最新更新:2004-10-26 //备: public:component public:attachevent=oncontentreadyonevent=f_Init()/ public:attachevent=onproperty

marquee.htc

复制代码代码如下:


//  描述        : 无间断滚动字幕 
//  版本        : 2.0 
//  作者        : 宝玉(WebUC.NET) 
//  最新更新    : 2004-10-26 
//  备            : 

<public:component> 

<public:attach event="oncontentready" onevent="f_Init()" /> 
<public:attach event="onpropertychange" onevent="f_PropChange()" /> 
<public:property name="direction" /> 
<public:property name="speed" /> 
<public:property name="delay" /> 

<public:method NAME="marquee"/> 
<public:method NAME="stop"/> 
<public:method NAME="start"/> 
</public:component> 

<script language="JScript"> 

var _oMarqueeContent; 
var _oMarquee; 
var _speed = 2; 

var _orientation; 
var _direction = "up";  

var _ContentWidth; 
var _ContentHeight; 
var _MarqueeWidth; 
var _MarqueeHeight; 
var _paddingTop; 

var _firstNode = 1; 
var _count = 0; 

var _timer = null; 
var _pause = false; 

var _marqueeInterval = 100;    // 滚动间隔 
var _delayInterval = 2000;    // 标题显示延迟间隔 

//+---------------------------------------------------------------------------- 
//  Function:       f_Init 
//  Description:    初始化 
//    Parameters:        null 
//  Returns:        null 
//----------------------------------------------------------------------------- 
function f_Init() 


    _oMarquee = document.createElement("div"); 
    _oMarqueeContent = document.createElement("span"); 
    _oMarqueeContent.innerHTML = element.innerHTML; 
    _oMarquee.appendChild(_oMarqueeContent); 
    element.innerHTML = ""; 
    element.appendChild(_oMarquee); 


    if(speed == null) speed = _speed; 
    speed = parseInt(speed); 
    if(!speed) speed =_speed; 

    if(delay == null) delay = _delayInterval; 
    delay = parseInt(delay); 
    if(!delay) delay = _delayInterval; 


    if(direction == null) direction =_direction; 
    direction = direction.toLowerCase(); 
    if(direction != "left" && direction != "right" && direction != "up" && direction != "down") 
        direction = _direction; 

    _orientation= (direction == "left" || direction == "right") ? "horizontal" : "vertical" 

    InitMarquee(); 

    marquee(); 


function InitMarquee() 


    _MarqueeWidth = _oMarquee.offsetWidth; 
    _MarqueeHeight = _oMarquee.offsetHeight; 
    _count = _oMarqueeContent.children.length; 

    _ContentWidth = _oMarqueeContent.offsetWidth; 
    _ContentHeight = _oMarqueeContent.offsetHeight;     

    _paddingTop = _oMarquee.offsetTop; 

    FillMarquee() 

    _oMarqueeContent.style.position = "relative"; 
    _oMarqueeContent.style.pixelTop = 0;     



function FillMarquee() 

    var children = _oMarqueeContent.children; 
    var i = 0; 

    if (_orientation== "horizontal") 
    { 
        while (_oMarqueeContent.offsetWidth < _ContentWidth + _MarqueeWidth) 
        { 
            _oMarqueeContent.appendChild(children[i++].cloneNode(true)); 
        } 
    } 
    else 
    { 
        while (_oMarqueeContent.offsetHeight < _ContentHeight + _MarqueeHeight) 
        { 
            _oMarqueeContent.appendChild(children[i++].cloneNode(true)); 
        } 
    } 


function marquee() 

    if (_pause) 
        return; 

    switch(direction) 
    { 
        case "up": 
            _oMarqueeContent.style.pixelTop -= speed; 
            if(Math.abs(_oMarqueeContent.style.pixelTop + _ContentHeight + _paddingTop) < speed) 
                _oMarqueeContent.style.pixelTop = 0; 

             
            if (Math.abs(_oMarqueeContent.children[_firstNode].offsetTop) - _paddingTop < speed) 
            { 
                _firstNode++; 
                if (_firstNode >= _count) 
                    _firstNode = 0; 

                _timer = window.setTimeout(uniqueID + ".marquee()", _delayInterval); 
            } 
            else 
                _timer = window.setTimeout(uniqueID + ".marquee()", _marqueeInterval); 
            break; 
    } 


function stop() 

    clearTimer(); 
    _pause = true; 


function start() 

    if (_timer != null) 
        clearTimer(); 

    _pause = false; 

    marquee(); 



function clearTimer() 

    window.clearTimeout(_timer); 
    _timer = null; 


// 
// Cancels an event 
// 
function f_CancelEvent() 

    event.returnValue = false; 


// 
// A property changed 
// 
function f_PropChange() 

    switch (event.propertyName) 
    { 
        default: 
            f_Redraw(); 
            break; 
    } 


// 
// Forces a redraw of the control 
// 
function f_Redraw() 




</script> 


HTML文件

复制代码代码如下:


<style> 
body,td{ 
    font-size:9pt; 


.marquee{ 
    overflow-y:hidden;word-break:break-all;padding:10px; 
    behavior:url('marquee.htc'); 

.marquee div{ 
    padding-bottom:10px; 

</style> 
无间断滚动<br /> 
每个标题间有停留<br /> 
鼠标移入停止,鼠标移出继续滚动<br /> 

<span style="height:100px;width:200px;border:1px solid black;" delay="3000" class="marquee" onmouseover="this.stop()" onmouseout="this.start()"> 
        <div><a href="http://www.webuc.net" target="_blank">1. 宝玉(http://www.webuc.net)作品</a></div> 
        <div><a href="http://www.webuc.net" target="_blank">2. 强强联手,助推上海建筑领域信息化建设</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">3. 广联达清单招标投标策略研讨会——河南站圆满成功</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">4. 足球友谊赛:河北电建一公司 VS 广联达石家庄分公司</a>  </div> 
        <div><a href="http://www.webuc.net" target="_blank">5. 广联达——清单算量软件 GCL7.0新版出炉!</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">6. 喜报:广联达公司顺利通过ISO9000质量管理体系三年复审</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">7. 广联达-清单整体解决方案在北京求实造价咨询公司的成功应用</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">8. 广联达-施工项目成本管理系统(GCM)在荣尊堡工程中的应用</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">9. 广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用</a> </div> 
        <div><a href="http://www.webuc.net" target="_blank">10. asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</a> </div> 
</span> 
<script> 

</script> 


Tags:
本文链接:http://www.js-code.com/htc/20150721/2228.html

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <