1、判断浏览器的类型
$(document).ready(function(){
//Firefox 2 and above
if($.support.mozilla && $.support.vesion >= "1.8"){
// you code
}
//Safari
if($.support.safari){
// you code
}
//Chrome
if($.support.chrome){
// you code
}
//Opera
if($.support.opera){
// you code
}
//IE6 and below
if($.support.msie && $.support.vesion <= 6){
// you code
}
//anything above IE6
if($.support.msie && $.support.vesion > 6){
// you code
}
});
jQuery 1.9 之前,官方使用$.browser检测, 之后使用$.support
2、表单输入(点击文字小时,失去焦点文字又出现)
HTML: <input class="focus_on" type="text" value="用户名" />
Js:
$(".focus_on").focus(function () {
var check1 = $(this).val();
if (check1 == this.defaultValue)
{
$(this).val("");
$(this).css("color","#333");
}
}).blur(function () {
if($(this).val()==""){
$(this).val(this.defaultValue);
$(this).css("color","#b4b4b4");
}
});
3、一个简单的Tab切换
Js:
$(".qr-code-title ul li").hover(function(index) {
var index = $(this).index();
$(this).addClass("QR-title-on").siblings().removeClass("QR-title-on");
$(".qr-code-img ul li").eq(index)
.addClass("qr-code-img-on")
.siblings().removeClass("qr-code-img-on");
});
HTML:
<div class="qr-code">
<div class="qr-code-title">
<ul>
<li class="QR-title-R QR-title-on">服务号</li>
<li>订阅号</li>
</ul>
</div>
<div class="qr-code-img">
<ul>
<li class="qr-code-img-on">
<img src="images/contact/official_QR_code.png" alt="服务号" />
<p><strong>支持手机支付</strong></p>
</li>
<li>
<img src="images/contact/Order_QR_code.png" alt="订阅号" />
</li>
</ul>
</div>
</div>
CSS:
.qr-code{
width:100%;
height:auto;
}
.qr-code-title{
float:left;
width:100%;
height:24px;
}
.QR-title-R{border-right:solid 1px #e6e6e6;}
.qr-code-title ul li{
float:left;
width:59px;
height:24px;
line-height:24px;
text-align:center;
color:#666;
background-color:#ebebeb;
cursor:pointer;
}
.qr-code-title ul li.QR-title-on{
color:#333;
background-color:#fff;
}
.qr-code-img{
float:left;
width:102px;
padding:8px;
}
.qr-code-img ul li{
display:none;
float:left;
width:100%;
height:auto;
}
.qr-code-img ul li.qr-code-img-on{display:block;}
.qr-code-img p{text-align:center;}
.qr-code-img img{width:100%;margin-bottom:10px;background-color:#fff;}
4、动态添加边距
$(".contain-contain ul li").each(function(index) {
if( index % 3 < 2 ){
$(this).addClass("progressRmargin");
}
});
.progressRmargin{margin-right:40px;}
保证了除了第3列或3列的倍数不添加progressRmargin,适合3列的列表布局
5.让广告条/菜单/DIV随鼠标一起滚动(无振动)
页面上需要滚动的位置添加空的DIV标签
<div class="header-float"></div> <!-- The header wrapper of float layout -->
//全局变量
var winTop = $(window).scrollTop(); //鼠标滚动的高度
var Is_show = false;
$(window).scroll(function(){
winTop = $(window).scrollTop(); //鼠标滚动的高度
nav_fixed(); //主导航 跟随鼠标 滚动
});
/*----------------- 主导航 跟随鼠标 滚动 -----------------*/
function nav_fixed(){
//顶部菜单随滚动一起浮动
var $offset2 = $(".header-float").offset();
if( winTop > $offset2.top ){
if( Is_show === false ){
Is_show = true;
$(".header").css({
"position":"fixed",
"_position":"absolute",
"top":"-120px",
"left":$offset2.left + "px",
"z-index":"4000",
"box-shadow":"0 1px 3px rgba(0,0,0,0.4)",
"opacity":0,
}).animate({
"top":"0px",
"opacity":1,
},400);
}
else{
$(".header").css({
"top":"0px",
});
}
}else{
$('.header').removeAttr("style");
Is_show = false;
}
};
/*----------------- 主导航 跟随鼠标 滚动 end -----------------*/
6、广告banner自动显示并隐藏(增加重新打开按钮切换)
JS:
/*---------------- 首页事件广告条 -----------------------*/
//顶部 广告条事件 函数
function top_adv(){
var adv_over = false; //判断广告条是否被关闭 , 默 认不关闭
var adv_delay = 4000; //广告显示延迟4000ms
var $event_open = $("#event-banner-open"); //打开广告条按钮
var $event_close = $("#event-banner-colse"); //关闭广告条按钮
var $event_wrap = $(".event-banner-wrap"); //广告条容器
var $nav = $(".nav"); //主屏幕nav内容部分容器
var Width = $nav.width();
var left = $nav.offset().left;
//按钮显示位置
$event_close.css({
"left": Width + left + 10
});
$event_open.css({
"left": Width + left + 10
});
//延时5s自动关闭
$event_wrap.delay(adv_delay).slideUp(500,function(){
adv_over = true;
show_open_btn(adv_over);
});
//点击关闭广告条
$event_close.click(function() {
$event_wrap.stop(true,true).slideUp(400,function(){
adv_over = true;
show_open_btn(adv_over);
});
});
//点击重新打开广告条
$event_open.click(function() {
adv_over = false;
//console.log(adv_over);
show_open_btn(adv_over);
});
//显示打开广告的按钮 函数
function show_open_btn(adv_over){
if(adv_over){
if( winW > 1050 ){
$event_open.fadeIn(500);
}
else{
$event_open.fadeOut(0);
}
}
else{
$event_open.fadeOut(100);
$event_wrap.stop(true,true).slideDown(500);
}
}
}
/*---------------- 事件广告条 end -----------------------*/
HTML:
<!-- event-banner -->
<div class="event-banner-wrap">
<div class="event-banner">
<span id="event-banner-colse" class="hover-delay"></span>
<img src="images/event/event_banner.jpg" alt="活动主题广告条" />
</div>
</div>
<div id="event-banner-open" class="hover-delay"></div>
<!-- event-banner end -->
CSS:
.event-banner-wrap{
width:100%;
height:auto;
background-color:#f5b160;
}
.event-banner{
width:1000px;
height:auto;
margin:0 auto;
}
.event-banner img{width:100%;z-index:1;}
#event-banner-colse,#event-banner-open{
position:absolute;
display:block;
width:21px;
height:21px;
top:2px;
/*right:-31px;*/
z-index:100;
background:#000 url(../images/close_adv.png) no-repeat center center;
cursor:pointer;
filter:alpha(opacity=20);
opacity:0.2;
-moz-opacity:0.2;
}
#event-banner-open{
display:none;
background:#000 url(../images/open_adv.png) no-repeat center center;
}
#event-banner-colse:hover, #event-banner-open:hover{
filter:alpha(opacity=50);
opacity:0.5;
-moz-opacity:0.5;
}
7、检测IE8或以下的浏览器,并提示更新(很多网站都用到)
JS:
$(document).ready(function() {
/*---------------- 浏览器兼容性检测 -----------------------*/
//关闭兼容性提示
var $cp_tips = $(".cp-tips"); //提示信息对象
$(".cp-tips-close").click(function() {
$cp_tips.stop(true,true).slideUp(400);
});
$cp_tips.delay(3000).slideUp(500); //延时3s自动关闭
});
HTML:
<!--[if lt IE 8]>
<div class="cp-tips">
<span class="cp-tips-close" title="关闭"></span>
<p>已经有超过90%的用户使用更高版本 <a target="_blank" title="下载Chrome" href="http://www.google.cn/intl/zh-CN/chrome/">Google Chrome</a> 或 <a target="_blank" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" title="下载最新版IE浏览器">Internet Explorer</a> 体验到了更精彩的VIPABC,您还不试试?</p>
</div>
<![endif]-->
CSS:
.cp-tips{
width:1005;
height:33px;
line-height:33px;
text-align:center;
color:#960;
background-color:#ffefc6;
}
.cp-tips-close{
display:block;
float:right;
width:22px;
height:22px;
margin:5px;
background:url(../images/close.png) no-repeat;
cursor:pointer;
}
.cp-tips a{
color:#f75c61;
text-decoration:underline;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。