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

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

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

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

<!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 实现页面加载自动播放音乐

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

说明：这里有个小坑，如果用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 实现文字向上滚动：如图

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

<!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>