js

最新推荐文章于 2025-03-16 08:47:05 发布

蚂蚁小草

最新推荐文章于 2025-03-16 08:47:05 发布

阅读量349

点赞数

分类专栏： JavaScript的

本文链接：https://blog.youkuaiyun.com/yueruitao/article/details/86625296

版权

JavaScript的专栏收录该内容

2 篇文章

订阅专栏

根据url添加样式
$(function () {
    var url = window.location.pathname;
    $('.rt-header .container .nav >li a').each(function () {
        var hre = $(this).attr('href');
        if (url === hre) {
            $(this).css('border-top', '2px solid #0099e5').css('color', '#0099e5');
            //$(this).siblings('.nav-tabs').css('background', '');
        }
    });
});

当大于等于520 滑动固定
$(function() {
	var nav = $(".fixed_pc");
	var win = $(window);
	var sc = $(document);
	win.scroll(function() {
		if (sc.scrollTop() >= 520) {
			nav.addClass("fixed_tab");
		} else {
			nav.removeClass("fixed_tab");
		}
	})
})

$(function(){$('.tab-js-key').click(function() {
    var _this=$(this);
    _this.addClass('active').siblings('li').removeClass('active');
    });
});

window.onload=function(){
  var obt=document.getElementById("footer-link1");
  var odiv=document.getElementById("link-main");
  obt.onclick=function(){
    if(odiv.style.display=="none"){
      odiv.style.display="block";
      obt.value="隐藏模块";
    }
    else{
      odiv.style.display="none";
      obt.value="显示模块";
    }
  }
}

//弹框
$(function(){
        if($.cookie("isClose") != 'yes'){
            var winWid = $(window).width()/2 - $('.alert_windows').width()/2;
            var winHig = $(window).height()/2 - $('.alert_windows').height()/2;
            $(".alert_windows").css({"left":winWid,"top":-winHig*2});   //自上而下
            $(".alert_windows").show();
            $(".alert_windows").animate({"left":winWid,"top":winHig},1000);
            $(".alert_windows input").click(function(){
                $(this).parent().fadeOut(500);
                $.cookie("isClose",'yes',{ expires:1/8640});    //测试十秒
                //$.cookie("isClose",'yes',{ expires:1});       一天
            });
        }
    });
$(document).ready(function(){
  $("#sub").click(function(){
    $("form").hide();
  })

});

window.onload = function () {
    $("#crm_phone").focus();
};
/************************  失焦判断  **********************************/
$("input").blur(function () {
    $(".spa").css("color", "#BD362F");
    if ($(this).is("#crm_phone")) {            //手机号判断
        var ph = /^1[3|5|7|8|][0-9]{9}$/;
        if ($("#crm_phone").val() !== "") {
            if (!(ph.test($("#crm_phone").val()))) {
                $(".spa2").text("请输入正确手机号");
                $(this).css("border", "1px solid #BD362F");
                return false;
            } else if (ph) {
                $(".spa2").text("");
                return true;
            };
        } else {
            $(".spa2").text("");
        }
    }
});
/********************** 聚焦提示 ************************/
$("input").focus(function () {
    if ($(this).is("#crm_phone")) {
        $(".spa2").text("请输入您的手机号").css("color", "#aaa");
        $(this).css("border", "1px solid #aaa");
    };
});
/*********************** 提交验证 ***************************/
$("#sub").click(function () {
    var ph = /^1[3|4|5|6|7|8|9|][0-9]{9}$/;    //手机号正则
    if (ph.test($("#crm_phone").val())) {
        return true;
    } else {
        if ($("#crm_phone").val() === "") {
            $(".spa2").text('请填写您的手机号');
        }
        return false;
    }
});

// 题库首页移动版响应式
$(function(){
    var w_width = $(window).width();
    if(w_width < 1140){
        $(".row-tiku .middle-content .content-left .click").css("overflow",'scroll');
    }
});

$(".one-tab-f li").hover(function(){var index=$(this).index();$(this).parent().next("div").children(".one-tab-s1").eq(index).removeClass("one-hide-box").siblings("div").addClass("one-hide-box")});$(".one-tab-f li").hover(function(){$(this).find("a").addClass("one-tab-f-changes").parent().siblings("li").find("a").removeClass("one-tab-f-changes")});$("#topNav .swiper-wrapper .swiper-slide").click(function(){var index=$(this).index();$(this).parent().parent().siblings("#one-tab-s").children(".one-tab-s1").eq(index).removeClass("one-hide-box").siblings("div").addClass("one-hide-box")});var marg=0;var pag=$(".one-tab-f li").length*184;var allwidth=$(".boxShadow").width();$(".box-switchover-major-right").click(function(){if(pag>allwidth){marg+=184;allwidth+=184;$(".one-tab-f").css("margin-left",-(marg)+"px")}});$(".box-switchover-major-left").click(function(){if(marg!=0){marg-=184;allwidth-=184;$(".one-tab-f").css("margin-left",-(marg)+"px")}});$('.tab-content').children("ul").eq(0).removeClass("hide");$(".tab-title span").hover(function(){var index=$(this).index();$(this).parent().parent().next("div").children("ul").eq(index).removeClass("hide").siblings("ul").addClass("hide")});$('.tab-title span').hover(function(){$(this).addClass('selected').siblings('span').removeClass('selected')});
//课程切换
$('.qiehuan').children("div").eq(0).removeClass("hide");
$(".navqh li").click(function () {
    var index=$(this).index();
    $(this).parent().parent().next("div").children("div").eq(index).removeClass("hide").siblings("div").addClass("hide");
});
$('.navqh li').click(function(){
    $(this).addClass('active').siblings('li').removeClass('active');
});

//课程切换
$('.qiehuanrm').children("div").eq(0).removeClass("hide");
$(".navqhrm li").hover(function () {
    var index=$(this).index();
    $(this).parent().parent().next("div").children("div").eq(index).removeClass("hide").siblings("div").addClass("hide");
});
$('.navqhrm li').hover(function(){
    $(this).addClass('active').siblings('li').removeClass('active');
});

$(function (){  
    //合成事件 hover()  
    $("#rt-sidebar").hover(function (){  
        $("#sp-ul").show();  
    },function (){  
        $("#sp-ul").hide();  
    });  
           
}); 
$('.kemu-qiehuan').children("div").eq(0).removeClass("hide");
$(".navqh li").hover(function() { var index = $(this).index();$(this).parent().parent().next("div").children("div").eq(index).removeClass("hide").siblings("div").addClass("hide");});
$('.navqh li').hover(function() {$(this).addClass('active').siblings('li').removeClass('active');});
//滑动固定头部
$(function() {
	var nav = $(".rt-nav");
	var win = $(window);
	var sc = $(document);
	win.scroll(function() {
		if (sc.scrollTop() >= 160) {
			nav.addClass("header-sp");
		} else {
			nav.removeClass("header-sp");
		}
	})
})

//回顶部按钮
var obtn = document.getElementById('bat');
var clientHeight = document.documentElement.clientHeight;
var timer = null;
var isTop = true;
window.onscroll = function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(osTop >= clientHeight){
                obtn.style.opacity = '1';
    }else{         //否则隐藏
                obtn.style.opacity = '0';
    }
    if(!isTop){

        clearInterval(timer);
    }
    isTop = false;
}
$("#bat").click(function () {
    timer = setInterval(function(){
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    var speed = Math.floor(-osTop / 6);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
    isTop =true;
    	if(osTop == 0){
    	clearInterval(timer);
    	}
    },30);
})
 $(document).ready(function(){
        $('#course-more-1').hover(function() {
            $("#course-more-1").css('display', 'block');
        }, function() {
           $("#course-more-4").css('display', 'none');
        });
            $("#course-more-4").hover(function() {
                $(this).css('display', 'block');;
            }, function() {
                $(this).css('display', 'none');
            });
 })
 //头部显示时间设置
 setTimeout(function(){$(".navbar-top-black-banner").fadeOut(1500);},10000);

white-space: nowrap; overflow: hidden;不进行换行和隐藏
text-overflow: ellipsis;后面几个字显示...

background-size:cover; 图片自适应
鼠标图片放大
<div class="col-md-3 col-xs-3 ad-item">
 
 <a href="{{ ad[0].href|default('') }}" target="{{ ad[0].target|default('') }}" class="ad-template">
    
<img class="img-responsive" src="{{ asset(ad[0].src|default('')) }}">
  
</a>

</div>  
.rt-ad .row .ad-template{display: block;overflow: hidden;}
.rt-ad img:hover{transform:scale(1.3);-webkit-transform:scale(1.4)}
.row .img-responsive {cursor: pointer;transition: all 0.6s;}

bootstrap
添加 data-ride="carousel"  可以实现自动播放

当原图片加载失败时，如何让图片加载上我们默认给的图片http://blog.youkuaiyun.com/Noneyes/article/details/70255205
1、在img标签中加上 onerror="this.src='error.png ' ";
<img src="Images/1.png " onerror="this.src='error.png ' " >

jquery:滚动到指定位置
scrollTo
zhuxinjiaoyu1104 QQ

#085af7;好的颜色http://tool.oschina.net/commons?type=3;  #00dcff


col-md-2 col-sm-3 col-xs-4

固定头部js
$(function(){//滑动固定头部
var nav=$(".rt-header"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
  if(sc.scrollTop()>=130){
    nav.addClass("fixednav"); 
  }else{
   nav.removeClass("fixednav");
  }
})  
})
火狐浏览器下点击a标签时出现虚线 加上就不会出现虚线了
a:focus {
outline: none;
}


如果栏目比较多,移动端使用互动显示
    display: -webkit-box;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
然后在子下级设置width的宽度即可

*************************************
鼠标经过显示隐藏事件
1) $(function (){  
    //合成事件 hover()  
    $("#sidebar").hover(function (){  
        $("#sidebar-nav").show();  
    },function (){  
        $("#sidebar-nav").hide();  
    });  
           
});
下面的更全面,默认隐藏,如果想要点击把hover换成click就可以了
2) $(document).ready(function(){
	$("#sidebar-nav").css('display', 'none');
        $('#sidebar').hover(function() {
            $("#sidebar-nav").css('display', 'block');
        }, function() {
           $("#sidebar-nav").css('display', 'none');
        });
        $("#sidebar-nav").hover(function() {
            $(this).css('display', 'block');
        }, function() {
            $(this).css('display', 'none');
        });
 });
************************
style来控制样式；

cursor:pointer代表鼠标滑过变成小手图标

text-decoration:none代表不显示下划线
****************
js

$(function() {}) 是$(document).ready(function()的简写

************************
jq隐藏显示
$(document).ready(function(){
$("p").css('display', 'none');
  $("button").hover(function(){
    $("p").toggle();
  });
});
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
*********************************
根据url修改导航栏样式的js
var url = window.location.pathname;
$('.nav li a').each(function(){
    var hre = $(this).attr('href');
        if(url == hre){
//            $(this).css('color','#3477ff');
            $(this).css('cssText','color:red !important');
            $(this).siblings('.nav-tabs').css('color','');

        }
})
*********************************
切换进行添加active兄弟移除
$(function(){$('.qw').click(function() {
    var _this=$(this);
    _this.addClass('active').siblings('li').removeClass('active');
    });
});
**************************************
/**
* JavaScript脚本实现回到页面顶部
* @param acceleration 速度
* @param stime 时间间隔 (毫秒)
**/
function gotoTop(acceleration, stime) {
	acceleration = acceleration || 0.1;
	stime = stime || 10;
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;
	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;
	// 滚动条到页面顶部的水平距离
	var x = Math.max(x1, Math.max(x2, x3));
	// 滚动条到页面顶部的垂直距离
	var y = Math.max(y1, Math.max(y2, y3));
	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
	var speeding = 1 + acceleration;
	window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
	// 如果距离不为零, 继续调用函数
	if (x > 0 || y > 0) {
		var run = "gotoTop(" + acceleration + ", " + stime + ")";
		window.setTimeout(run, stime);
	}
}

<a href="#" onclick="gotoTop();return false;" class="totop"></a>
小火箭css
.totop {
    position: fixed;
    right: 15px;
    bottom: 25px;
    display: block;
    width: 26px;
    height: 62px;
    background: url(/static-dist/app/img/rocket.png) no-repeat 0 0;
    -webkit-transition: all 0.2s ease-in-out;
}
.totop:hover{background:url(/static-dist/app/img/rocket.png) no-repeat 0 -62px;}
***********************************************