1.设置多行文本超出显示省略号
<div class="caption">
<p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和行高
,高度是行高的两倍</p>
</div>

css:

.caption {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 15px;//
height:30px;///* 2行隐藏就两倍,三行隐藏就三倍*/
}
单行文本超出隐藏
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2.图片上下跳动(热门)
<span class="stylist-hot"></span>

css:
.stylist-hot{
width:24px;
height:20px;
background: url("/stylist-hot.png") no-repeat;
    background-size: 100% 100%;
display: inline-block;
position: absolute;
top: -6px;
right: -8px;
-webkit-animation: bounce-up 1s linear infinite;
animation: bounce-up 1s linear infinite;
}
@-webkit-keyframes bounce-up {
25% {transform: translateY(-3px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(3px);}
}
3.终极内墙法

/*用伪元素改造的内墙法----终极版内墙法*/
    /*在.clearfloat 标签里面的而最后 创建一个标签(块级)*/
   .clearfloat(或者为.clearfixed,类名不同功能不同):after{
        display: block;
       content: "";
       clear: both;
       visibility: hidden;
       height: 0px;
   }
   .clearfloat{
    zoom:1;
   }

4.阻止点击事件的传递

$(".public-nav").click(function(event) {
$(".public-nav").hide();
event.stopPropagation();
})

点击input显示div,点击bodydiv隐藏

$("input").bind("click", function(e) {
$(".div").show();
e.stopPropagation();
$("body").click(function(){
$(".div").hide();
})
})
5.当锚点遇上fixed定位出现的bug
在父元素上面加{
padding-top:1rem;
margin-top:-1rem; }即可
6.if判断是否有某个类

if($(this).hasClass('activity-1-active'))

7.cookie记录浏览器时间周期
        var cookietime = new Date();
cookietime.setTime(date.getTime() + ( 7*24*60*60*1000));//coockie时间为7天
$.cookie("example", "foo",{expires:cookietime});
// $.cookie("example", "foo",{ expires: 7 });
if($.cookie(".DottextCookie")!=null){
$(".address-popup").show();
}else{
$(".address-popup").hide();
}
8.url中文转码和解码
例:原链接:https://html/answer-classify.html?cla=装修量房
转码后:http://html/answer-classify.html?cla=%E8%A3%85%E4%BF%AE%E9%87%8F%E6%88%BF
方法:
          var strUrl = window.location.href;
var arrUrl = strUrl.split("?cla=");
var strPage = arrUrl[arrUrl.length-1];
var classifySpan=decodeURIComponent(strPage);
console.log(arrUrl,"strPage:",strPage,classifySpan)
////搜索关键词变色
var regExp = new RegExp(classifySpan, "g");//创建正则表达式,g表示全局的,如果不用g,则查找到第一个就不会继续向下查找了;
$(".answer-classify-content ul li>p:first-child a").each(function()//遍历p类里的文字;
{
var html = $(this).html();
var newHtml = html.replace(regExp, "<span style='color:#FF9600' >"+classifySpan+"</span>");//将找到的关键字替换,加上highlight属性; $(this).html(newHtml);//更新文章; });
  var cencodeStr=encodeURIComponent("交房验收");
console.log("编码后:"+cencodeStr+"\n"+"解码后:"+decodeURIComponent(cencodeStr)); 9.上传图片的原理
html:
<li class="answer-imgs">
<i class="answer-upload">
<input type="file" id="answer-file" accept="image/png, image/jpeg, image/gif, image/jpg" >
</i>
<b>(最多可传三张)</b>
</li>
js:
//为外面的盒子绑定一个点击事件
$(".answer-upload").click(function(){
/*
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
*/
// 1、先回去input标签
var $input = $("#answer-file");
// 2、给input标签绑定change事件
$input.on("change" , function(){
//补充说明:因为我们给input标签设置multiple属性,因此一次可以上传多个文件
//获取选择图片的个数
var files = this.files;
var length = files.length;
//3、回显
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var div = document.createElement("div");
img = document.createElement("img");
iBiao = document.createElement("i");
div.className = "upload-img";
var fr = new FileReader();
fr.onload = function(){
var mochu=document.querySelector(".answer-imgs");
img.src=this.result;
mochu.appendChild(div);
div.appendChild(img);
div.appendChild(iBiao);
iBiao.onclick= function(){
$(this).parent().hide();
}
}
fr.readAsDataURL(value);
})
})
//4、我们把当前input标签的id属性remove
$input.removeAttr("id");
//我们做个标记,再class中再添加一个类名就叫test
var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
$(this).append($(newInput));
})
 10.JQuery中的$.cookie()使用方法

<span style="color:#000000;">jQuery.cookie.js下载地址:<a href="http://plugins.jquery.com/cookie/1.4.0/" rel="nofollow" target="_blank">点击打开链接</a></span>

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>


新增cookie:

$.cookie('cookieName', 'cookieValue');
注:如果没有设置cookie的有效期,则cookie默认在浏览器关闭前都有效,故被称为"会话cookie"。

// 创建一个cookie并设置有效时间为7天:
$.cookie('cookieName', 'cookieValue', { expires: 7 });

// 创建一个cookie并设置cookie的有效路径:
$.cookie('cookieName', 'cookieValue', { expires: 7, path: '/' });
读取cookie:


$.cookie('cookieName'); // 若cookie存在则返回'cookieValue';若cookie不存在则返回null
删除cookie:把cookie的值设为null即可


$.cookie('the_cookie', null);

 
11.jq模糊搜索input
//实时筛选,不用点击按钮
$(".install-input").focus(function(){
setInterval(function(){
if ($(".install-input").val() != '') {
$(".install-downloap").show();
}
$(".install-downloap a:contains(" + $(".install-input").val().trim() + ")").show();
$(".install-downloap a:not(:contains(" + $(".install-input").val().trim() + "))").hide(); },100);})
												

49.CSS--- 特殊css3效果展示的更多相关文章

  1. 颗粒翻页(css3效果展示)

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

  2. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  3. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  4. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  5. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  6. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  7. 10款让你心动的 HTML5 & CSS3 效果

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...

  8. 12款令程序员惊叹的CSS3效果库

    最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...

  9. CSS3-Hover 效果 展示

    首先说说兼容性的问题吧,主要说说IE浏览器的兼容性.IE10+. 效果展示的css代码: .button { margin: .4em; padding: 1em; cursor: pointer; ...

随机推荐

  1. iOS 精简Controlelr代码的两个方法

    MVC是苹果推荐使用的iOS APP架构.后来又有MVVM,MVP等架构出现.主要目的是让业务逻辑.展示.数据各个层级解耦.实现最大程度上的代码复用. 对MVC这种架构来说,随着APP中模的增多,控制 ...

  2. eclipse背景色设置成护眼色(豆沙绿)

    1.点击windows -->preferences 2.展开Editors 3.选择自定义颜色 4.把色调调成:85 饱和度调成:123 亮度调成205 即可调成豆沙绿色了 然后点确定.

  3. 实现简单的 u-boot

    根据u-boot-1.1.6启动流程来划分,u-boot功能主要划分为四个部分 1,硬件初始化                        -->start.S  init.c 2,从 fla ...

  4. nodejs 学习五 单元测试一

    一. chai chai 自身是依赖nodejs的 assert,让检测更加语义化. chai 采用两种模式,TDD和BDD, TDD是类似自然语言方式 BDD是结构主义 chai文旦地址 二.moc ...

  5. [转载]MACD 各周期指标状态

    MACD指标:MACD指标是一个非常好用的指标,它与均线.量价关系配合使用对判断行情很有效.这里有必要再深一点讲MACD级别之间的作用. 一.首先,必须明白的是任何指标中都是大级别包含小级别,小级别对 ...

  6. oracle-安装-init.sh

    !#/bin/bashgroupadd -g 1001 oinstallgroupadd -g 1002 dbagroupadd -g 1003 opergroupadd -g 1004 asmadm ...

  7. 004-Quartz存储与持久化-基于quartz.properties的配置

    一.概述 Quartz提供两种基本作业存储类型.第一种类型叫做RAMJobStore,第二种类型叫做JDBC作业存储.在默认情况下Quartz将任务调度的运行信息保存在内存中,这种方法提供了最佳的性能 ...

  8. Redis入门到高可用(九)——有序集合zset

    一.数据结构 集合与有序集合,列表与有序集合的对比 二.主要API zadd 将一个或多个 member 元素及其 score 值加入到有序集 key 当中. zrem 移除有序集 key 中的一个或 ...

  9. eclipse 假死

    由于电脑关机,导致Eclipse非正常关闭,之后启动Eclipse发现一直启动不起来,于是从网上找了一些方法如下: 1.删除文件.snap 到<workspace>\.metadata\. ...

  10. 【Java】-NO.16.EBook.4.Java.1.004-【疯狂Java讲义第3版 李刚】- 内部类

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.004-[疯狂Java讲义第3版 李刚]- 内部类 Style:EBook Series:Java S ...