导航滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var s = !1;
    jQuery(window).on("scroll",
    function() {
        var e = jQuery(".ot-menu-will-follow .main-menu-placeholder").children(),
        o = jQuery(".ot-menu-will-follow .is-now-following");
        e.size() > 0 && jQuery(window).scrollTop() >= parseInt(e.parent().offset().top, 10) + 280 ? e.addClass("smallify") : o.size() > 0 && jQuery(window).scrollTop() < parseInt(o.parent().offset().top, 10) + 280 && o.removeClass("smallify"),
        e.size() > 0 && jQuery(window).scrollTop() >= parseInt(e.parent().offset().top, 10) && 0 == s ? (s = !0, e.parent().css({
            height: e.parent().height()
        }), e.addClass("is-now-following")) : o.size() > 0 && jQuery(window).scrollTop() < parseInt(o.parent().offset().top, 10) && 1 == s && (s = !1, o.removeClass("is-now-following").parent().css({
            height: "auto"
        }))
    }),
    setTimeout(function() {
        jQuery(".theiaStickySidebar", "body").parent().theiaStickySidebar({
            additionalMarginTop: 30
        })
    },
    100)

鸡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(".dianjichu").click(function(){   
  var id=$(this).attr('data-id');   //点id叠加
  var cid=$(this).attr('data-cid'); //点cid=1
  console.log(cid);
  if(cid==1){   //show_box
     $('.hiout').css('display','none');
     $(".huind"+id).slideDown();
     $(this).attr('data-cid','2');
  }else if(cid==2){  //hide_box
    $(".huind"+id).slideUp();
    $(".dianjichu").attr('data-cid','1');
  }
});
</script>

Onclick

1
2
3
4
5
6
7
8
class="xuan_input<?php echo $k;?>"

onchange="getValue(this,<?php echo $k;?>)"

function getValue(obj, id) {
		var val = $('.xuan_input' + id).val();
		$('.xuan_input' + id).attr('value', val);
}

切换卡

1
2
3
4
5
6
7
8
9
10
11
$(function(){
    var $div_li =$("div.tab_nav ul li");
    $div_li.click(function(){
        $(this).addClass("on")            //当前<li>元素高亮
               .siblings().removeClass("on");  //去掉其它同辈<li>元素的高亮
        var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
        $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
                .eq(index).show()   //显示 <li>元素对应的<div>元素
                .siblings().hide(); //隐藏其它几个同辈的<div>元素
    })
})

滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
setInterval(function(){	//每2ms执行一次
	$(document).ready(function() {
		$(window).scroll(function() {
			if($(document).scrollTop()>=0){
			  $('.pc_nav').css({'background-color':'#fff0'});
			  $('.li_a_one').css({'color':'  #fff'});
			}
			if($(document).scrollTop()>=200){
			  $('.pc_nav').css({'background-color':'#fff'});
			  $('.li_a_one').css({'color':'  #000'});
			}
		});
	});
},200)

双点击

1
2
3
4
5
6
7
8
9
10
11
12
document.querySelector("#qinghaitu").onclick = (()=>{
    var fold = false;
     
    return function(){
        if(fold) {
            alert('点击的第二次');
        }else {
            alert('点击的第一次');
        }
        fold = !fold;
    }
})()

复制文本到剪切板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
function copyText(text) {
    var textarea = document.createElement("textarea");
    var currentFocus = document.activeElement;
    document.body.appendChild(textarea);
    textarea.value = text;
    textarea.focus();
    if (textarea.setSelectionRange)
        textarea.setSelectionRange(0, textarea.value.length);
    else
        textarea.select();
    try {
        var flag = document.execCommand("copy");
    } catch(eo){
        var flag = false;
    }
    document.body.removeChild(textarea);
    currentFocus.focus();
    return flag;
}
$(".copy").on('click',function(){
    var text= $("#wenben").text();
    var flag = copyText(text);
    alert(flag ? "复制成功！" : "复制失败！");
});
</script>

捕捉回车键

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function(){  
   $("html").die().live("keydown",function(event){
        if(event.keyCode==13){
            point();
        }
    })
});  
</script>

动态时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript">
function datetime() {
   //创建日期时间对象
   var datetime = new Date();
   //获取组件
   var year = datetime.getFullYear();
   var month = datetime.getMonth() + 1;
   var day = datetime.getDate();
   var hour = datetime.getHours();
   var minute = datetime.getMinutes();
   var second = datetime.getSeconds();
   var week = datetime.getDay();
   //转换星期格式
   switch (week) {
       case 0:
           var week = '星期日';
           break;
       case 1:
           var week = '星期一';
           break;
       case 2:
           var week = '星期二';
           break;
       case 3:
           var week = '星期三';
           break;
       case 4:
           var week = '星期四';
           break;
       case 5:
           var week = '星期五';
           break;
       case 6:
           var week = '星期六';
           break;
   }
   //月,日,如果小于10加上前导零
   if(month < 10){
      var month = 0 + "" + month;
   }
   if(day < 10){
      var day = 0 + "" + day;
   }
   //小时,分钟,秒如果小于10加上前导零
   if (hour < 10) {
       var hour = 0 + "" + hour;
   }

   if (minute < 10) {
       var minute = 0 + "" + minute;
   }

   if (second < 10) {
       var second = 0 + "" + second;
   }

   //完整时间
   var now =  year + "-" + month + "-" + day + " &nbsp " + week + " &nbsp " + hour + ":" + minute + ":" + second;
   //更新内容
   $(".time").html(now);
}
//定时器
setInterval(datetime, 1000);
</script>

hover切换图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style type="text/css">
.box{
	float: left;
}
.box img{
	width: 400px;
	height: 400px;
}
.box2{
	background: url(https://img2.baidu.com/it/u=3211144097,14888103&fm=26&fmt=auto&gp=0.jpg);
	background-size: 100% 100%;
	width: 400px;
	height: 400px;
	float: right;
}
</style>

<div class="box2"></div>

<div class="box">
	<img id="img" src="https://img2.baidu.com/it/u=1455080057,2406572751&fm=26&fmt=auto&gp=0.jpg">
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
// hover切换图片
$(document).ready(function(){
	$("#img").hover(function(){
		$("#img").attr("src","https://img2.baidu.com/it/u=1455080057,2406572751&fm=26&fmt=auto&gp=0.jpg"); //attr修改属性
	},function(){
		$(this).attr("src","https://img1.baidu.com/it/u=2515816624,1871997490&fm=26&fmt=auto&gp=0.jpg");
	});
})
// hover切换背景
$(document).ready(function(){
	$(".box2").hover(function(){
		$(this).css("background-image","url(https://img0.baidu.com/it/u=2031213332,149863984&fm=26&fmt=auto&gp=0.jpg)");	//css 修改css background-image
	},function(){
		$(this).css("background-image","url(https://img2.baidu.com/it/u=3211144097,14888103&fm=26&fmt=auto&gp=0.jpg)")
	});
});
</script>

Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ajax_load(path){	//封装方法
	var htmls;
	$.ajax({
	type: "post",
	url: path,
	data: '',
	async:false,
	dataType:"html",
	success: function(html){
		htmls=html;
	}
	});
	return htmls;
}

参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$("#updateinf").click(function(){
  var sex =$("input[type='radio']:checked").val();
  var sheng=$("#province option:selected").text();
  var shi=$("#city option:selected").text();
  var xian=$("#area option:selected").text();
  var kongge = '\xa0\xa0';
  var news = sheng +kongge + shi +kongge  + xian;
  $.ajax({
    url:'?m=member&a=mydata_save',
    data:{
      'data':{
        'username':$("#name").val(),  //昵称
        'name':$("#nickname").val(),  //真实姓名
        'sex':sex,  //性别
        'mail':$("#email").val(),   //邮箱  
        'phone':$("#phone").val(),  //手机

        'area':news,  //区域

        'address':$("#address").val()   //联系地址
      }
    },
    success:function(res){
      layer.msg('修改成功',function(){
        window.location.reload();
      });
    }
  });   
  return false;
});

返回顶部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="to-direction bottom">

    <a id="back-to-top" href="javascript:void()" class="to-top">
        <span class="icon iconfont">&#xe7db;</span>
    </a>

    <a id="back-to-bottom" href="javascript:void()" class="to-bottom">
        <span class="icon iconfont">&#xe635;</span>
    </a>

</div>
<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 0){
            $('#back-to-bottom').fadeOut();
            $('#back-to-top').fadeIn();
        } else {
            $('#back-to-top').fadeOut();

            $('#back-to-bottom').fadeIn();
        }
    });
    // 单击时将正文滚动到 0px
    $('#back-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
    $('#back-to-bottom').click(function () {
        $('body,html').animate({
            scrollTop: document.body.clientHeight
        }, 500);
        return false;
    });
});
</script>

移动端二级导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//
<div class="mobile_head hidden-lg hidden-md yin"> 
   <div class="row"> 
      <div class="col-sm-12 col-xs-12">
         <ul class="mobile_dh">
<?php $list=M('classify')->where(array('classify_pid'=>2))->order('date asc')->select();foreach($list as $k=>$v){
// dump($v['classify_id']);
$listcs=M('classify')->where(array('classify_pid'=>$v['classify_id']))->order('date asc')->find();
	?>  
            <li>
               <a class="kuku" href="<?php echo classify_url($v['type_id'],$v['classify_id']);?>"><?php echo $v['classify_name'];?></a>
<?php if($listcs){ ?>
               <span style="    padding: 10px 0;display: inline-block;" class="fr dianji" data-id="<?php echo $k+1; ?>">
                  <img src="images/xia.png">
               </span>
                  <ul class="mou qaq" id="ooo<?php echo $k+1; ?>">  //二级
<?php $list2=M('classify')->where(array('classify_pid'=>$v['classify_id']))->order('date asc')->select();foreach($list2 as $k2=>$v2){?>                	
                     <li><a href="<?php echo classify_url($v2['type_id'],$v2['classify_id']);?>"><?php echo $v2['classify_name'];?></a></li>
 <?php }?>                       
                  </ul>
 <?php }?>             
            </li>
 <?php }?>              
      </div>
   </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('#dianji').click(function(){
   $('.yin').slideToggle(100);  //上下
});

$('.dianji').click(function(){
	var id=$(this).attr('data-id');  //设置或返回被选元素的属性值
   $('#ooo'+id).slideToggle(100);
});
</script>

移动端右侧导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style type="text/css">
#dian{
	position: fixed;
    top: 200px;
    z-index: 999;
    background: red;
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
}
#he{
	background: #98bf21;
    height: 100px;
    width: 100px;
    position: fixed;
    top: 0;
    right: -191px;
    z-index: 999;
    display: block;
}
#guan{
	width: 50px;
    height: 50px;
    background: yellow;
    float: right;
}
</style>

<button id="dian">按钮</button>
<div id="he">
    <div id="guan">
    </div>
</div>

<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){

    $("#dian").click(function(){

      $("#he").animate({'right':'0'},300)

    });

    $("#guan").click(function(){

        $("#he").animate({'right':'-150px'},300)

    });

});
</script>

Tab切换卡__is_index

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style type="text/css">
.none{
	display: none;
}
.block{
	display: block;
}
</style>
<!--  产品展示 -->
<div class="goods">
   <div class="container">
      <div class="row">
<?php $list=M('classify')->where(array('classify_id'=>8))->order('date asc')->find()?>          	
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 tc biaoti">
            <h2 class="title"><?php echo $list['classify_name'];?></h2>
            <div class="gang"></div>
            <p class="subtitle"><?php echo $list['en_name'];?></p>
         </div>
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
            <div class="hidden-lg hidden-md col-sm-12 col-xs-12 cpnav tc" style="padding: 10px 10px;">
<?php $list=M('classify')->where(array('classify_pid'=>8))->order('date asc')->select();foreach($list as $k=>$v){?>            	
               <a href="<?php echo classify_url($v['type_id'],$v['classify_id']);?>"><?php echo $v['classify_name'];?></a>
<?php }?> 
            </div>


            <div class="col-lg-3 col-md-3 hidden-sm hidden-xs tc">
               <ul class="ul">
<?php $list=M('classify')->where(array('classify_pid'=>8))->order('date asc')->select();foreach($list as $k=>$v){?> 
                  <li class="li dtssb <?php if($k==0) echo "on";?>" data-id="<?php echo $k+1?>" ><a href="<?php echo classify_url($v['type_id'],$v['classify_id']);?>"><?php echo $v['classify_name'];?></a></li>
<?php }?>
               </ul>
            </div>
            <!--  -->

            <!--  -->
<?php $list=M('classify')->where(array('classify_pid'=>8))->order('date asc')->select();foreach($list as $k=>$v){?> 
            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 p0 mmsjj dtmlk<?php echo $k+1;?> none  <?php if($k==0) echo "blok";?>">
<?php $goods=M()->table('index_goods n,index_relevance r')->where('r.classify_id ='.$v['classify_id'].' and r.content_id=n.goods_id')->order('date desc')->select();foreach($goods as $k=>$v){?> 
               <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
                     <a href=""><img class="hoverimg" src="<?php echo $v['goods_img'];?>"></a>
                     <p style="padding:10px 0;text-align: center;"><a href=""><?php echo $v['goods_name'];?></a></p>
                  </div>
               </div>
<?php }?>

            </div>
<?php }?>
         </div>
      </div>
   </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//鼠标指针悬停
	$(".dtssb").hover(function(){
		var id=$(this).attr("data-id");		//设置或返回被选元素的属性值。
		$(".dtssb").removeClass("none");	//从被选元素移除一个或多个类。
		$(this).addClass("none")			//向被选元素添加一个或多个类。
		$(".mmsjj").removeClass("blok");
		$(".dtmlk"+id).addClass("blok");
	})
//点击按钮
	$('.huier').click(function(){
	    var id=$(this).attr('data-id');
	    //alert(id);
	    $('.huier').removeClass('activb');
	    $(this).addClass('activb');
	    $('.huisdw').removeClass('acvtio');
	    $('.nierong'+id).addClass('acvtio');
});

</script>

选择li添加类名

1
2
3
4
5
$(document).ready(function () {
    $('.box ul li:nth-child(1)').addClass('thumb_large')
    $('.box ul li:nth-child(1)').addClass('thumb_info')
    $('.box ul li:nth-child(5)').addClass('thumb_large')
});

Hover客服

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- css -->
<style type="text/css">
.dian{position: fixed;top: 200px;z-index: 999;right: 0px;background: red;width: 50px;height: 50px;}
.chuxian{position: fixed;top: 200px;right: -191px;z-index: 999;display: block;background: blue;width: 50px;height: 50px;}
.box{right: 0;position: absolute;top: 95px;background: yellow}
.se{padding: 5px 0}
.box ul li a p{padding-left: 20px;font-size: 15px;}
</style>
<!-- html -->
<div class="dian" class="hidden-xs hidden-sm"></div>
<div class="chuxian">
    <div class="box">
      <ul>
        <li class="se"><a href="https://www.layui.com/"><p>V:12345</p></a></li>
        <li class="se"><a href=""><p>13800000000</p></a></li>
        <li class="se"><a href=""><p>23456</p></a></li>
      </ul>
    </div>
</div>
<!-- js -->
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".dian").hover(function(){
      $(".chuxian").animate({'right':'0'},300)
      $(this).animate({'right':'-53px'},100)
    });

    $(".chuxian").hover(function(){

    },function(){
        $(this).animate({'right':'-191px'},300)
         $(".dian").animate({'right':'0'},300)
    });
});
</script>

a标签动画上下滑

1
2
3
4
5
6
7
8
9
10
11
$(".opaos").click(function(){
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset},800);
    return false;
    }
  }
});

pdf.js 修改预览页面title

  1. 打开viewer.js
  2. 搜索 setTitleUsingUrl: function pdfViewSetTitleUsingUrl 定位到代码位置
  3. 复制粘贴如下代码对其进行替换：
1
2
3
4
5
6
7
8
9
10
11
12
setTitleUsingUrl: function pdfViewSetTitleUsingUrl(url) {
    this.url = url;
    try {
      var titleTmp = (TITLE == '' || TITLE == undefined) ? 
    		  (decodeURIComponent(pdfjsLib.getFilenameFromUrl(url)) || url) : TITLE;
      this.setTitle(titleTmp);
    } catch (e) {
      // decodeURIComponent may throw URIError,
      // fall back to using the unprocessed url in that case
      this.setTitle(url);
    }
},

在加载viewer.js的script上面定义全局变量TITLE

1
2
3
4
<script type="text/javascript" language="javascript">
	var TITLE = "${fileName}";
</script>
<script src="static/js/pdf/viewer.js"></script>