zoukankan      html  css  js  c++  java
  • css跑马灯

    css3之前使用js实现

             <div style="padding: 0 1rem;">
                    <div id="container_small_tip">
                        <div id="content_small_tip"></div>
                    </div>
                </div>    
    <script>
    
    function roll(speed=1,fatherselect,select){
        if ($(fatherselect) == null) return;
        var $container = $(fatherselect);//#container_small_tip
        var $content = $(select);//#content_small_tip
        var init_left = $container.width();
        $content.css({ left: parseInt(init_left) + "px" });
        var This = this;
        var time = setInterval(function () {move($container, $content, speed); }, 20);                   //setInterval会改变this指向,即使加了This=this,也要用匿名函数封装
    
        $container.bind("mouseover", function () {
            clearInterval(time);
        });
        $container.bind("mouseout", function () {
            time = setInterval(function () {move($container, $content, speed); }, 20);
        });
        // setTimeout(function () { $("#container").slideUp(); }, 30000);  //毫秒单位,显示30s后消失
        return this;
    };
    function move($container, $content, speed){
        var container_width = $container.width();
        var content_width = $content.width();
        if (parseInt($content.css("left")) + content_width > 0) {
            $content.css({ left: parseInt($content.css("left")) - speed + "px" });
            $content.css({color:"red"})//改变字体颜色
        }
        else {
            $content.css({ left: parseInt(container_width) + "px" });
            $content.css({color:"red"})//改变字体颜色
        }
    }
    
    var content = "我是跑马灯;跑马灯是我";
    $("#content_small_tip").html(content);
    roll(2,"#container_small_tip","#content_small_tip");
    
    </script>

    使用css3 animation

     .news-move {
      position: absolute;
      top: 0;
      left: 990px;
      width: 150%;
      animation: move 25s linear 0s infinite normal ;
      cursor: pointer;
    }
    
    //鼠标hover跑马灯静止 .news-move:hover
    { animation-play-state: paused; }
  • 相关阅读:
    Oracle基础知识整理
    linux下yum安装redis以及使用
    mybatis 学习四 源码分析 mybatis如何执行的一条sql
    mybatis 学习三 mapper xml 配置信息
    mybatis 学习二 conf xml 配置信息
    mybatis 学习一 总体概述
    oracle sql 语句 示例
    jdbc 新认识
    eclipse tomcat 无法加载导入的web项目,There are no resources that can be added or removed from the server. .
    一些常用算法(持续更新)
  • 原文地址:https://www.cnblogs.com/ll15888/p/13303960.html
Copyright © 2011-2022 走看看