jq 一些通用的小技巧

最新推荐文章于 2019-06-15 14:13:52 发布

bini000

最新推荐文章于 2019-06-15 14:13:52 发布

阅读量358

点赞数

文章标签： jq-技巧

本文链接：https://blog.csdn.net/bini000/article/details/51952931

版权

总结一下项目中通用的东西，方便自己以后查看，也方便他人。

1、我们经常会写弹出层，一般固定宽高的话可以用absolute定位，但是如果宽高不确定同时想让弹出层总是居中弹出，那么可以用jq实现，实现代码如下（相应的类名或者id名请作相应的修改）：

//让指定的div始终显示在屏幕中间
function divCenter(divname){
var top=($(window).height()-$(divname).height())/2;
var left=($(window).width()-$(divname).width())/2;
var scrollTop=$(document).scrollTop();
var scrollLeft=$(document).scrollLeft();
$(divname).css(
{
position:'absolute',
top:top+scrollTop,
left:left+scrollLeft
}).show();
}
//这样就可以很方便的弹出
//弹出弹出层
function showAll(divname){
showFade();
divCenter(divname);
}

2、验证浏览器的版本，如果浏览器版本过低给出提示：
验证浏览器版本 js

$(function(){
    function FuckInternetExplorer() {
        var browser = navigator.appName;
        var b_version = navigator.appVersion;
        var version = b_version.split(";");
          if (version.length > 1) {
            var trim_Version = parseInt(version[1].replace(/[ ]/g, "").replace(/MSIE/g, ""));
            if (trim_Version < 9) {
                $("#upgrade").show();
                return false;
            }
        }
        return true;
    }
    FuckInternetExplorer();
    $("#upgrade").on("click","i",function(){
        $("#upgrade").hide();
    })
})

html:

<div id="upgrade">
            <a href="http://browsehappy.com/" target="_blank">浏览器版本提醒：你的浏览器太古董了！将无法体验完整产品功能，还不速速换一个，点击下载新版浏览器！</a>
            <i></i>
        </div>

3、文字滚动。比如说抽奖页面获奖者信息以恒定的速度滚动显示。那我们规定三个容器，一个为最外层容器 winner-list-box, 一个为内容容器 winner-record-list，一个为复制内容的容器another-box。这里是用监听容器的滚动轴来实现。

/*抽奖记录文字滚动*/
$(function() {
var speed=100;//数值越大，速度越慢
//重复的容器
var demo2=document.getElementById("another-box");
//内容容器
var demo1=document.getElementById("winner-record-list");
//最外层容器
var demo=document.getElementById("winner-list-box");
demo2.innerHTML=demo1.innerHTML;
demo.scrollTop=demo.scrollHeight;
var h = $(demo1).height();
function MarqueeUp(){
if(demo.scrollTop >= h){
demo.scrollTop = 0;
}else{
demo.scrollTop ++;
}
}
var MyMar=setInterval(MarqueeUp,speed);
});

4、倒计时

**html:**
<div class="congrate-time">
                        兑奖倒计时:
                        <span class="red-txt" id="day_show">0</span>天<span id="hour_show" class="red-txt">0</span>时<span id="minute_show" class="red-txt">0</span>分<span id="second_show" class="red-txt">0</span>秒
                    </div>


**js:**

var intDiff = parseInt(12000000);//倒计时总秒数量
        function timer(intDiff){
            window.setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值        
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day);
            $('#hour_show').html('<s id="h"></s>'+hour);
            $('#minute_show').html('<s></s>'+minute);
            $('#second_show').html('<s></s>'+second);
            intDiff--;
            }, 1000);
        } 
$(function(){
    timer(intDiff);
});