zoukankan      html  css  js  c++  java
  • jq 自动滑动轮换(向后插入小块)

    // JavaScript Document
    var Marquee = {
    arrIdObj : {/*marqueebox : {distance:-95,//移动距离delay:3000,//延迟时间speed:1000//移动时间},minCount:2 */},
    //创建对象
    startMarquee:function(){
    //给参数赋值
    if(this.arrIdObj != null && typeof this.arrIdObj === "object"){
    for(var p in this.arrIdObj){
    var obj = new classMarquee(document.getElementById(p),this.arrIdObj[p]);
    }
    }else{return null;}

    function classMarquee(objElem,params){
    var $objElem = $(objElem);
    var Mparams = params;
    //至少多少个
    if(params.minCount > $(objElem).children().length){return null;}
    //初始化
    var t;
    var b = false;
    $objElem.mouseover(function(){b = true;});
    $objElem.mouseout(function(){b = false;});
    function start(){
    $objElem.css("margin-top","0");
    t = setTimeout(scrolling,Mparams.delay);
    }
    function scrolling(){
    if(!b){
    var styleVal = Mparams.distance +"px";
    $objElem.animate({"margin-top":styleVal},Mparams.speed,"linear",function(){
    $objElem.append($objElem.children()[0]);
    start();
    });
    }else{
    start();
    }
    }
    start();
    }
    }
    }

    //自定义部分
    Marquee.arrIdObj ={
    marqueebox : {
    distance:-95,//移动距离
    delay:3000,//延迟时间
    speed:1000,//移动时间
    minCount:5
    },
    marqueebox1:{
    distance:-121,//移动距离
    delay:3000,//延迟时间
    speed:1000,//移动时间
    minCount:2
    }
    }
    Marquee.startMarquee();

    <ul id="marqueebox"><li></li><li></li><li></li><li></li><li></li></ul>

    <ul id="marqueebox1"><li></li><li></li><li></li></ul>

  • 相关阅读:
    MYSQL profiling分析语句
    进程状态与僵尸进程、孤儿进程
    Nginx跨域设置
    Redis的应用场景
    Nginx的作用
    cgi、fast-cgi和php-fpm的介绍(作用)
    CoreDump开启和Swoole Tracker 3.0配置
    好题总结
    Atcoder总结 Part III
    Atcoder总结 Part II
  • 原文地址:https://www.cnblogs.com/mengwei-ziyun/p/5605811.html
Copyright © 2011-2022 走看看