帮助了 AmazingCounters.com 位小伙伴

jquery 文字向上滚动+CSS伪类before和after的应用

汇总常用技巧——CSS伪类before和after的应用 

先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间!

 

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .span-right:before,.span-right:after{
            content: '';
            display:inline-block;
            width: 20%;
            margin: 5px 5%;
            border-bottom: 1px solid #cacaca;
        }
        .span-right:after{
            clear: both;
        }
     .round{
      width:16px;
      width: 16px;
      height: 16px;
      display: inline-block;
      font-size: 1.5rem;
      text-align: center;
      color: #000;
      text-decoration: none;
      }
    </style>
</head>
<body>

<div>
    <span class="span-right"><a href="#" class="round">●</a>2015-07-22<a href="#" class="round">●</a></span>
</div>
</body>
</html>
复制代码

 

2015-10-20 实现页面加载自动播放音乐

说明:这里有个小坑,如果用jquer改写下面的js代码 执行时暂停不了 如果出现这个问题 就使用原声的js吧

复制代码
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title class="link_names">
        audio html5 自动波放 背景音乐 iganlei</title>
<head>

    <script type="text/javascript">
        function musicPaused(f) {
            var music = document.getElementById("clickSound");
            if(f == 1){
                music.pause();//停止播放
            }else{
                music.play();//正常播放
            }
        }
    </script>
    <audio id=" " autoplay="autoplay">
        <source src="http://www.austgl.com/34830913.mp3">
    </audio>
    音乐马上想起(需支持html5的浏览器)
    <input id="btn" type="button" onclick="musicPaused(1)" value="停止" />
    <a href="#" onClick="musicPaused(1)">停止</a>
    <a href="#" onClick="musicPaused(0)">开始</a>
复制代码

jquery  实现文字向上滚动:如图

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type"/>
    <title>test</title>
    <meta charset="UTF-8">
    <style type="text/css">
        ul,li{margin:0;padding:0}
        #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
        #scrollDiv li{height:25px;padding-left:10px;}
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function AutoScroll(obj){
            $(obj).find("ul:first").animate({
                marginTop:"-25px"//每次向上滚动的高度
            },500,function(){
                $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
            });
        }
        $(document).ready(function(){
            setInterval('AutoScroll("#scrollDiv")',3000)//定时函数 每隔3s执行一次上面的滚动函数AutoScroll
        });
    </script>
</head>

<body>
<div id="scrollDiv">
    <ul>
        <li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
        <li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
        <li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
        <li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
        <li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
    </ul>
</div>
</body>
</html>
View Code
复制代码

 

posted on   云的旋律  阅读(850)  评论(0编辑  收藏  举报

编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现

导航

统计

前端攻城狮分享群
点击右上角即可分享
微信分享提示