49.CSS--- 特殊css3效果展示

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);}）