zoukankan      html  css  js  c++  java
  • 零碎的知识点及常用特效

    点击文字防止文字被选中的方法:

    * {
    -moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    未来元素:live

    可以给还没创建出来的元素附上事件

    书写格式:$(".div").live("click",function(){})

    颜色渐变
    引用Jquery封装好的jquery.color.js到需要的页面中去

    index() 方法

    返回指定元素相对于其他指定元素的 index 位置。

    这些元素可通过 jQuery 选择器或 DOM 元素来指定。

    自定义动画补充:
    animate({left:"值",top:"值"},执行时间,function(){回调 
    函数//回调函数可有可无})//旋转做不了

    停止动画,防止动画积累: .stop()

    鼠标移入变成小手:

    cursor: pointer;

    文字换行:

    word-wrap: break-word;

    弹窗遮罩

    弹窗制作的一些知识点
    获取浏览器高度:var llbo = window.innerHeight;
    获取页面高度:var bo = $("body").outerHeight();
    换行:word-wrap:break-word

    文字自适应

    第一种写法:

    <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                position: relative;
                 300px;
                height: auto;
                word-wrap: break-word;
            }
        </style>
    
    <script type="text/javascript">
    $(document).ready(function () {
                var p = $("#box").html();
                $("#box").html(p.substring(0, 48));
                $("#box").html($("#box").html() + "...")
                $("#box").toggle(function () {
                    $("#box").html(p);
                }, function () {
                    $("#box").html(p.substring(0, 48));
                    $("#box").html($("#box").html() + "...")
                })
            });
     </script>
     <div id="box">
            1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
        </div>
    

      第二种

    <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                position: relative;
                 300px;
                height: auto;
                word-wrap: break-word;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $('#box').toggle(function () {
                    $(this).css('white-space', 'normal', 'text-overflow', 'initial', 'backgroundColor', 'yellow');
                }, function () {
                    $(this).css('white-space', 'nowrap', 'text-overflow', 'ellipsis', 'backgroundColor', 'white');
                });
            });
        </script>
    
    </head>
    <body>
        <div id="box">
            1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
        </div>
    </body>
    

      第三种(简单的写法)

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
    
            .main_main_2 {
                height: 18px;
                 30%;
                position: relative;
                overflow: hidden;
                margin-top: 20px;
                background-color: #e0e0e0;
            }
    
            .main_main_3 {
                top: 0px;
                left: 0px;
                height: auto;
                 100%;
                position: absolute;
                overflow: hidden;
            }
    
            .one {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
    
            .two {
                overflow-wrap: break-word;
            }
        </style>
        <script src="jQuery/jquery.color.js"></script>
        <script src="jQuery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".main_main_2").toggle(function () {
                    $(this).children().attr('class', 'main_mian_3 two');
                    var hei = $(this).children().outerHeight();
                    $(this).stop().animate({ height: hei }, 250, function () { $(this).css("backgroundColor", "aqua") });
                },
                function () {
                    $(this).children().attr('class', 'one main_mian_3');
                    $(this).stop().animate({ height: "18px" }, 250, function () { $(this).css("backgroundColor", "#e0e0e0") });
    
                });//main_main_2toggle结尾
            });//ready结尾
        </script>
    </head>
    <body>
        <div class="main_main_2">
            <div class="main_main_3 one">
                却说陈宫临欲下手杀曹操,忽转念曰:“我为国家跟他到此,杀之不义。不若弃而他往。”插剑上马,不等天明,自投东郡去了。操觉,不见陈宫,寻思:“此人见我说了这两句,疑我不仁,弃我而去;吾当急行,不可久留。”遂连夜到陈留,寻见父亲,备说前事;欲散家资,招募义兵。父言:“资少恐不成事。此间有孝廉卫弘,疏财仗义,其家巨富;若得相助,事可图矣。”操置酒张筵,拜请卫弘到家,告曰:“今汉室无主,董卓专权,欺君害民,天下切齿。操欲力扶社稷,恨力不足。公乃忠义之士,敢求相助!”卫弘曰:“吾有是心久矣,恨未遇英雄耳。既孟德有大志,愿将家资相助。”操大喜;于是先发矫诏,驰报各道,然后招集义兵,竖起招兵白旗一面,上书“忠义”二字。不数日间,应募之士,如雨骈集。
            </div>
        </div>
        <div class="main_main_2">
            <div class="main_main_3 one">
                一日,有一个阳平卫国人,姓乐,名进,字文谦,来投曹操。又有一个山阳巨鹿人,姓李,名典,字曼成,也来投曹操。操皆留为帐前吏。又有沛国谯人夏侯惇,字元让,乃夏侯婴之后;自小习枪棒;年十四从师学武,有人辱骂其师,惇杀之,逃于外方;闻知曹操起兵,与其族弟夏侯渊两个,各引壮士千人来会。此二人本操之弟兄:操父曹嵩原是夏侯氏之子,过房与曹家,因此是同族。不数日,曹氏兄弟曹仁、曹洪各引兵千余来助。曹仁字子孝,曹洪字子廉:二人弓马熟娴,武艺精通。操大喜,于村中调练军马。卫弘尽出家财,置办衣甲旗幡。四方送粮食者,不计其数。
            </div>
        </div>
    </body>
    

      

  • 相关阅读:
    erl_0012 timer:tc 测试模块函数调用运行耗时
    erl_0011 erlang 定时器相关
    erl0010
    erl0009
    erl0008
    erl0007
    erl0006
    erl0005
    开开心心过生活、踏踏实实做技术
    Android-理解Intent
  • 原文地址:https://www.cnblogs.com/123lucy/p/5763490.html
Copyright © 2011-2022 走看看