零碎的知识点及常用特效

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

* {
-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;
            width: 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;
            width: 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;
            width: 30%;
            position: relative;
            overflow: hidden;
            margin-top: 20px;
            background-color: #e0e0e0;
        }

        .main_main_3 {
            top: 0px;
            left: 0px;
            height: auto;
            width: 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>

  

时间: 2024-10-10 14:12:11

零碎的知识点及常用特效的相关文章

一些零碎小知识点积累随笔

工作学习期间的一些零碎小知识点积累 1.蜂鸣器 1)有源蜂鸣器,这里的有源不是指电源的"源",而是指有没有自带震荡电路,有源蜂鸣器自带了震荡电路,一通电就会发声: 2)无源蜂鸣器则没有自带震荡电路,必须外部提供 2~5Khz 左右的方波驱动,才能发声. 2.Altium Designer Winter 9 1)加载库 a.加载库,在Libraries面板上点击Libraries按钮或者选择菜单Design-->Add/Remove Library,这样可使用的库就显示在对话框中.

Gradle基本知识点与常用配置

查看原文:http://blog.csdn.net/u010818425/article/details/52268126 本文篇幅较长,文中系统地讲解了Gradle的基本知识点以及一些常用的命令和配置,适合于刚接触Gradle的同学: 在此基础上,可以阅读以下的实战经验文章: <Gradle实战:Android多渠道打包方案汇总> <Gradle实战:不同编译类型的包同设备共存> <Gradle实战:发布aar包到maven仓库> <Gradle实战:执行sql

零碎的知识点

分类有什么好处呢? 分类可以实现团队开发的便利性,也就是说一个类可以有多个人来实现.另外,分类也可以用来对系统自带的类进行扩充. 那么使用分类有哪些注意点呢? 1. Category可以访问原始类的实例变量,但不能添加变量,只能添加方法.如果想添加变量,可以考虑通过继承创建子类. 2.Category可以实现原始类的方法,但不推荐这么做,因为它是直接替换掉原来的方法,这么做的后果是再也不能访问原来的方法. 3.多个Category中如果实现了相同的方法,只有最后一个参与编译的才会有效. 4.类中

PHP初入,div知识点整理(特效&amp;字体等元素的使用整理)

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--<style> /*.nav{ background-color: red;/*背景颜色*/ background-image: url(../01.jpg); /*加背景图片*/ border: 2px solid black; width: 200px

jQuery一些常用特效方法使用实例

1. jQuery fadeIn() 用于淡入已隐藏的元素. 语法: $(selector).fadeIn(speed,callback); 实例: $("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);}); 2. jQuery fadeOut() 方

零碎技术知识点——OAuth协议

定义: OAuth: OAuth(开放授权)是一个开放标准,允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方网站或分享他们数据的所有内容. QQ登录OAuth2.0:对于用户相关的OpenAPI(例如获取用户信息,动态同步,照片,日志,分享等),为了保护用户数据的安全和隐私,第三方网站访问用户数据前都需要显式的向用户征求授权. 普及原因: 用户角度:方便.快捷.安全,很多资料信息可以公用: 中小第三方网站和应用角度:OAuth 可以使它们能够得到用

js常用特效-幻灯片

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 padding: 0px; 11 list-style: none; 12 } 13 14 #box { 15 positi

一些零碎的知识点

①在html中的onclick和事件中,如果想要传输值需要 onclick="wds_deletebooknotes('@item.Id')需要加个单引号 ② 在<a>标签中如果有href而且还有onclick方法需要注意href不可以写成href=””,要不然跳转出错,可以不写href ③ Click与live当视图没有套视图时可以使用$("#ewrw").click(function(){})当视图套视图时,需要使用$("#ewrw").l

js常用特效——选项卡效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 list-style: none; 11 } 12 ol>li{ 13 width: 50p