零碎的知识点及常用特效
点击文字防止文字被选中的方法:
* {
-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>
转载于:https://www.cnblogs.com/123lucy/p/5763490.html
零碎的知识点及常用特效相关推荐
- 计算机vb知识点,2020年全国计算机二级VB复习知识点:常用内部函数
[摘要] 小编整理了2020年全国计算机二级VB复习知识点:常用内部函数的相关内容,下面一起来看看2020年全国计算机二级VB复习知识点:常用内部函数的具体内容吧,希望能够帮助到大家! 2020年全国 ...
- Wow.js常用特效对应名称
wow.js是我非常喜欢使用的一个插件,不过每次用的时候都要去查一下每个类名代表什么意思,比较麻烦,这里记录一下. 1)引入animate.css <link rel="stylesh ...
- 博客的HTML代码如何运用,html代码运用(五)--常用特效解析
常用特效解析: 原图: 590){this.width=590;}" border=0 twffan="done"> 1.效果一: 代码: <IMG src= ...
- css知识点笔记-常用属性
css知识点范围:常用属性 删除线:text-decoration : line-through 下划线:text-decoration : underline 斜体:font-style : ita ...
- PHP 知识点笔记-常用数据类型
PHP知识点范围:常用数据类型 php的数据类型:包括8种原始数据类型.4种标量类型.2种复合类型和2种特殊类型: var_dump()输出对应的数据类型: 8进制前面是0,16进制前面是0x: 浮点 ...
- git clone 多个_软件测试知识点 | 测试过程常用的Git命令
testkuaibao|软件测试自学公众号 点击上图进入软件测试面试题题库,面试题都是有相应的参考答案,希望对小伙伴们有所帮助 前言 目前,在版本控制系统中Git已经被广泛使用,并且很多技术团队也会逐 ...
- html常用特效,网页常用特效整理:初级篇-网页设计,HTML/CSS
笔者日积月累了许多精彩.实用的web特效的制作,这些特效几乎都是比较常用的网页特效.现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家. 初级篇 1.让文字不停地滚动 <marquee ...
- JavaAndroid零碎的知识点2
1.抽象类实现接口,不用实现接口的方法. 2.内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但给 ...
- JSP知识点笔记-常用技术方法
jsp知识点范围:请求回应,session,异常处理,cookie,数据库等 request具有请求域,即完成客户端请求之前,该对象一直有效: 客户端为动态时request获取不到,静态时才能获取到: ...
最新文章
- 东芝打印机cd40故障_东芝小尺寸UV平板机介绍
- linux线程函数大全
- cnn 预测过程代码_FPN的Tensorflow代码详解——特征提取
- Python Type Hints 从入门到实践
- Jquery中AJAX参数详细介绍
- navicat for mysql 用户_Navicat for MySQL 怎么/怎么添加管理用户?Navicat for MySQL 添加管理用户教程_37游游网...
- spring.factories 的妙用
- Oreo授权系统V1.0.6公益开源版本源码
- apache多域名绑定手记
- OPENSSL编程 第二十章 椭圆曲线
- frame页面跳转和信息提示页面
- mybatis 调用 oracle函数_从Oracle到PG 该做的改造工作一个都不能少!
- cameralink图像接收与发送代码
- 免费公共DNS服务器大全
- 怎样把HTC G7的内存扩展到2GB
- 赛扬n5095处理器怎么样 英特尔n5095核显相当于什么水平
- elasticsearch的父子_ElasticSearch 学习记录之父子结构的查询
- Contest1480 - ZZNU17级暑期集训——单人挑战赛(Final)(ZZNU 2145AK王国系列问题-百官排序)
- pdf文件怎么转换成图片
- 这些专业是考研大户!