一、 JQ击li标签改变自身(或者子元素)样式
1、直接改变样式属性值
$(function (){
$(".class名").click(function () {
$(this).css({"background-color":"#2277e1",
"color":"#fff"});
$(this).siblings().css({"background":"#f5f5f5",
"color": "#000"});
})
})
2、通过改变样式名而改变样式
$(function (){
$(".class名").click(function () {
$(this).addClass("新样式class名");
$(this).siblings().removeClass("新样式class名");
})
})
3、点击li标签改变子元素样式 JQ
$(function () {
$(".new li").click(function () {
$(this).children(".new-left").addClass("bg-blu");
$(this).siblings().children(".new-left").removeClass("bg-blu");
$(this).children(".new-right").addClass("blu");
$(this).siblings().children(".new-right").removeClass("blu");
})
});
4、子元素选择器的区别
$("#list").find("div"); //子元素
$("#list").children("div"); //直接子元素
二、判断是否含有class，无则加，有则去除
if($("body").hasClass("over")){
$("body").removeClass("over");
}else{
$("body").addClass("over");
};
三、图片自适应盒子宽度显示
img{ width:100%; height:auto}
四、页面适配手机屏幕
头部信息中加入
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
切记！！！！
否则页面只适配与电脑屏幕尺寸。不适应手机端
五，JQ点击显示与隐藏的简洁代码
$("点击模块").on("click",function(){
//展开、收起，无过渡效果
$("显示与隐藏模块").toggle();
//缓慢展开、收起
$("显示与隐藏模块").slideToggle(可设置时间);
//缓慢收起
$("模块").slideUp(可设置过渡时间);
//缓慢展开
$("模块").slideDown(可设置时间);
})
显示与隐藏模块css为：display：none;
六、JQ商品数量加减
<script>
//减量
$("#reduce").on("click", function() {
var val = $("#number").text();
if (val > 1) {
//数字大于1时自动减1
$("#number").html(val - 1);
}
});
//加量
$("#plus").on("click", function() {
var val = $("#number").text();
//原数字基础上加1
$("#number").html(parseInt(val) + 1);
});
</script>
七、css文字居中，两边长线
<div class="work-intro">
<div class="title">
<h2 class="title-text"><span>工作经历</span></h2>
</div>
</div>
.title-text span {
display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
position: relative; /*定位横线（当横线的父元素）*/
color: #188eee; /*居中文字的颜色*/
text-align: center; }
.title-text span:before, .title-text span:after {
content: '';
position: absolute; /*定位背景横线的位置*/
top: 50%;
background: #8c8c8c; /*背景横线颜色*/
width: 35%; /*单侧横线的长度*/
height: 1px;
}
.title-text span:before {
left: 2%; /*调整背景横线的左右距离*/
}
.title-text span:after { right: 2%; }
八、点击高亮显示，再点击取消
先将其背景图片设置为灰色，即未点亮状态（判断背景色是否为亮色）
$('点击的div').click(function(){
if(!$(this).hasClass("背景图为高亮的.class")){
$(this).addClass("背景图为高亮的.class");
}else{
$(this).removeClass("背景图为高亮的.class");
}
})
九、css改变光标样式
最常用的即为改变光标样式为小手
用css 添加手状样式,鼠标移上去变小手,变小手
cursor:pointer;
用JS使鼠标变小手onmouseover(鼠标越过的时候)
οnmοuseοver=“this.style.cursor=‘hand’”
cursor其他取值
auto ：标准光标
default ：标准箭头
pointer, hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
十，页面中锚点链接跳转，有页面滑动的效果
$("a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1500);
return false;
});
十一、JQ实现页面跳转效果（效果与a标签跳转基本相同）
<div onclick="window.open('http://www.baidu.com')">在新窗口跳转至百度（打开新窗口）</div>
<div onclick="window.open('http://www.baidu.com','_self')">在当前窗口跳转至百度（当前窗口打开，不开新页面）</div>
十二、JQ定时跳转至另一个页面
setTimeout(function(){
location.href="跳转地址";
},等待跳转时间);
十三、广告页JQ定时跳转
<!-- html内容 -->
<header style="text-indent: 2em; margin-top: 30px;">
<span id="time">4</span><a href="index.html" title="点击访问">跳过</a>
</header>
<!-- JS内容-->
delayURL();
function delayURL() {
var delay = document.getElementById("time").innerHTML;
var t = setTimeout("delayURL()", 1000);
if (delay > 0) {
delay--;
document.getElementById("time").innerHTML = delay;
} else {
clearTimeout(t);
window.location.href = "index.html";
}
}
十四、内容滚动，背景图不动
background: url(../../assets/images/home/img4_1.jpg) repeat fixed;
background-size: cover; background-position: center center;
如果不要平铺，则repeat改为no-repeat
十五、文字横向间距
letter-spacing:距离;
十六、input/textarea框
1、input提示文字，鼠标点击后消失
<input type="text" value="欢迎留下您的宝贝建议"
style="color:#888" value="欢迎留下您的宝贝建议" onfocus="if (value =='欢迎留下您的宝贝建议')
{value ='';style='color:#000'}" onblur="if (value ==''){value='欢迎留下您的宝贝建议';style='color:#888'}">
<input type="text" value="搜索">
<sciript>
$('input').click(function() {
if (this.value == '搜索') {
$(this).val("");
}
});
$(document).bind("click", function(e) {
var target = $(e.target);
if (target.closest("input").length == 0) {
console.log('123')
if ($('input').val() == '') {
$('input').val("搜索");
}
}
})
</sctipt>
2、留言板
<textarea id="textarea"onblur="if(this.innerHTML==''){this.innerHTML='在这里输入默认值';this.style.color='#D1D1D1'}" style="COLOR: #d1d1d1" onfocus="if(this.innerHTML=='在这里输入默认值'){this.innerHTML='';this.style.color='#000'}">在这里输入默认值</textarea>
3、去除点击后的黑框
input{
outline: none;
}
4、textarea鼠标拉扯设置
/*禁止横向拉升*/
resize: vertical;
/*纵向拉伸 */
resize: horizontal;
/*不显示拉伸状态 */
resize: none;/resize: unset;
5、 textarea高度随内容变化，不出现滚动条
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
6、更改radio的默认样式以及选中后的样式
.man-ul li label input {
/* 清除默认样式 */
appearance: none;
width: 15px;
height: 15px;
background-color: #636363;
border-radius: 50%;
}
.man-ul li label input:checked {
background-color: #e7c598;
}
7、限制textarea输入字符个数
<div>
<textarea name="content" id="id" cols="" rows=""></textarea>
<!-- 字数显示 -->
<span>0/100</span>
</div>
<script>
function limitImport(str, num) {
$(document).on('input propertychange', str, function() {
var self = $(this);
var content = self.val();
if (content.length > num) {
self.val(content.substring(0, num));
}
self.siblings('span').text(self.val().length + '/' + num);
});
}
//用法示例
limitImport('#id', 10);
</script>
十七、li横向均匀分布在ul标签中间距相等
1、参照栅格系统
2、ul样式中加入代码
text-align:justify;
text-align-last:justify;
li标签中加入样式
display:line-block; //将li标签转换为行内块状元素，否则竖排显示
text-align取值及意义
十八、li均分ul宽度（无间距）
ul{
display:table;
}
li{
display: table-cell;
text-align: center;
}
十九、li标签水平排列时出现间距
原因：li标签换行后，浏览器解析出空格
①HTML文件中的li标签不换行，所有的li标签写在一横行（个人不喜欢，看着很乱）
②给父级ul标签添加css样式
font-size：0；
二十、点击元素以外的范围隐藏元素（JQ）
$(document).bind("click", function(e) {
var target = $(e.target);
if (target.closest("范围目标元素").length == 0) {
$("要隐藏的目标元素").hide();
}
})
二十一、在不同的分辨率下执行不同的JQ代码
$(function () {
var w=$(window).width();
if(w>最小分辨率&& w<最大分辨率）{
所需要执行的代码
}
PS也可以只写一个分辨率。例如：if(w<1200){
当屏幕小于1200时所执行的代码
分辨率后面不用带单位哒！！！！！
}
二十二、JQ点击切换开关状态
下方为代码中的图片哦！！格式： .png
二十三、点击a标签中的span子标签不触发a标签的跳转事件（点子不触父）
<a href="baidu.com">
<span class="had-arrow" ></span>
</a>
<script>
$(".had-arrow").on("click",function(e){//e为参数 function中必传
$(".son").toggle();
e.preventDefault(); //阻止事件冒泡影响父元素
})
</script>
二十四、C3动画鼠标移入图片先放大后缩小
.class{
animation:动画名称 过渡时间 1（执行次数）;
}
@keyframes 动画名称 {
from 0% {
transform:scale(1) //原图大小
}
50% {
transform:scale(1.2) //放大1.2倍
}
to {
transform:scale(1) //恢复原图大小
}
}
二十五、鼠标移入边框由中间向两边延伸展开
.元素:after {
content: ' ';
position: absolute;
z-index: 2;
left: 50%;
display: block;
width: 165px;
height: 1px;
transform: translate(-50%);
}
.元素:hover:after {
height: 2px;
animation: ad_width .5s linear forwards;
background: #ff8a00;
}
@keyframes ad_width {
from {
width: 0
}
to {
width: 165px
}
}
二十六、判断子元素是否为偶数（奇、偶执行不同的代码）
// 获取子元素的个数
var childs = $(".list ul").children("a").length;
console.log(childs);
// 判断是否为偶数
if( childs%2 == 0 ){
// 偶数
console.log ("偶数");
}else{
console.log ("奇数");
}
二十七、animation动画停留在结束时
animation-fill-mode:forwards;
二十八、点击指定区域外隐藏目标元素
$(document).click(function(e){
var target = $(e.target);
if(target.closest("指定范围区域").length != 0) return;
$("目标元素").hide();
})
二十九、JQ屏幕改变事件
1、屏幕滚动到一定高度显示与隐藏
$(function(){
$(window).on('scroll',function(){
var h=$(document).scrollTop();//获取滚动条到顶部的垂直高度
if(h>=500){
$("目标元素").show();
}else{
$("目标元素").hide();
}
});
})
2、屏幕改变函数
//滚动时触发
$(window).on('scroll',function(){
})
//页面加载时触发
$(window).on('load',function(){
})
//相当于原生js中的
window.onload=function(){
}
//每次改变浏览器窗口时触发：
$(window).resize(function(){
});
三十、选择被选元素之前的元素
ul li:not(.active)> a span { color: red; }
a span为被选中改变样式的元素，要逐级选择
<ul>
<li><a>我是一个a <span>111</span></a></li>
<li><a>我是一个a <span>111</span></a></li>
<li class="active"><a>我是一个a</a></li>
<ul>
三十一、设置table表单的tr上下间距
table{ border-collapse: separate; border-spacing: 10px; }
tr{margin: 10px 0;}
三十二、内容超出滚动但是隐藏滚动条
::-webkit-scrollbar{
display: none;
width: 0;
height: 0;
}
三十三、各浏览器兼容
-moz-box-sizing: ; /*Firefox3.5+*/
-webkit-box-sizing: ; /*Safari3.2+*/
-o-box-sizing: ; /*Opera9.6*/
-ms-box-sizing: ; /*IE8*/
box-sizing: ; /*W3C标准*/
三十四、a标签的href除了跳转之外的功能（发邮件/短信、打电话）
/* */
/* 在拨号界面，显示号码，并提示拨打 */
<a href="tel:10086" class="call">10086</a>
/*移动web页面自动探测电话号码*/
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
/* 使用wtai协议进行拨打电话 */
<a href="wtai://wp//mc;10086">拨打10086 </a>
<a href="wtai://wp/ap;10086;">将10086存储至电话簿 </a>
/* 发送短信咨询功能 */
<a href="sms:12345678901">
/* 此方法发送邮件需要下载安装邮件的客户端 */
<a href="mailto:邮箱地址">send mail</a>
三十五、验证码60秒倒计时（JQ）
<button type="button" id="sendsms" value="获取验证码">获取验证码</button>
<script type="text/javascript">
var time = 60;
$(function() {
$("#sendsms").click(function() {
if (time ==
60) { //如果不加入该判断，则会出现在倒计时期间不断的点击发生不断的加快（其实就是你点了多少次就重复多少次该函数）的问题，用setTimeout（）方法不加此判断也是一样的
var time1 = setInterval(function() {
if (time == 0) {
$("#sendsms").html("重新发送");
$("#sendsms").removeAttr("disabled");
time = 60;
clearInterval(time1);
} else {
$("#sendsms").attr("disabled", "true");
$("#sendsms").html("重新获取(" + time + ")");
time--;
}
}, 1000);
}
})
})
</script>
三十六、JQ点击切换img的src属性（点击换路径、换图）
// $(".tax-rlist img").attr("src", "images/down01.png"); //只切换一次
//两张图相互切换
if ($(this).find('img').attr('src') == 'images/down02.png') {
$(this).find('img').attr('src', 'images/down01.png');
} else {
$(this).find('img').attr('src', 'images/down02.png');
}
三十七、鼠标移入、移出中英文切换
<li _t_nav="top-nav-li-1" class="l1 cur on">
<a class="fir" href="/" target="_top" onmouseover="javascript:this.innerHTML='关于'" onmouseout="javascript:this.innerHTML='ABOUT'">ABOUT</a>
</li>
三十八、jq鼠标移入的区别
一、jq的移入事件有mouseenter和mouseover
mouseenter只有在鼠标指针穿过被选元素时才会触发；
mouseover是不论鼠标指针穿过被选元素还是其子元素都会触发
$("#id").mouseenter(function () {
console.log('移入');
});
$("#id").mouseover(function () {
console.log('移入');
});
二、jq的移出事件有mouseleave和mouseout
mouseleave只有在鼠标指针离开被选元素时触发；
mouseout是不论鼠标指针穿过被选元素还是其子元素都会触发
$("#id").mouseleave(function () {
console.log('移出');
});
$("#id").mouseout(function () {
console.log('移出');
});
三、hover事件是包含了移入和移出事件
hover 事件规定当鼠标指针悬停在被选元素上时要运行两个函数，若只写一个函数则是移入事件，没有移出事件的相应处理。
$("#id").hover(function(){
console.log('移入');
},function(){
console.log('移出');
三十九、将A的属性或值赋值给B
var imgWidth = $('.a').width();
$('.b').width(imgWidth);
//背景图片
var mg = $('.A').css("backgroundImage").replace('url(', '').replace(')', '');
$('.B').css('background','url('+mg+') no-repeat' );
四十、JQ页面（发生）卷曲（即页面上下滚动）事件
1、点击元素使页面发生卷曲
$(".prev").click(function() {
$("html, body").animate({ scrollTop: "-=500" }, 600);
});
$(".next").click(function() {
$("html, body").animate({
scrollTop: "+=500"
}, 600);
2、页面卷曲一定高度后触发事件
$(window).bind("scroll", function() {
var sTop = $(window).scrollTop();
// var sTop = parseInt(sTop);
if (sTop >= 90) {
console.log('卷曲>90');
} else {
console.log('卷曲<90');
}
});
3、页面向上卷曲和下卷曲时触发事件
$(document).ready(function() {
var p = 0,
t = 0;
$(window).scroll(function(e) {
p = $(this).scrollTop();
if (t <= p) {
console.log('向下滚');
} else {
console.log('向上滚');
}
setTimeout(function() {
t = p;
}, 0);
});
});
四十一、判断div元素是否出现在可视区域
两种思路
1、判断div元素到头部的距离是否大于卷曲的距离以及小于卷曲距离+窗口高度
var d = $("div ").offset().top;
if (a >= $(window).scrollTop() && a < ($(window).scrollTop() + $(window).height())) {
alert("div在可视范围");
$(".induce p").animate({
opacity:'1',
bottom:'0',
},800)
}
2、判断div元素到视窗底部的距离
var b_top = $('.about').offset().top;
var window_height = $(window).height();
// 相减
if (window_height - b_top > 0) {
alert("div在可视范围");
}
3、元素是否滚出可视
$(function () {
let p, t = 0;
$(window).scroll(function (e) {
p = $(this).scrollTop();
if (($(window).scrollTop() > ($('元素').offset().top + $('元素').outerHeight())) || (($(window).scrollTop() + $(window).height()) < $('元素').offset().top)) {
console.log("no no no");
} else {
// 出现在可视区域
if (p < t) {
console.log('up'); // 向上滚动
} else {
console.log('down'); // 向下滚动
}
}
setTimeout(function () {
t = p;
}, 0);
})
});
4、页面滚动，给出现在可视区域的相应的元素添加类，其兄弟元素去除类
// 设置基本变量
var windowScrollTop = $(window).scrollTop();
var windowViewHeight = $(window).height();
var elementArray = $('#elements-container ul li');
// 响应缩放事件
$(window).resize(function() {
windowViewHeight = $(window).height();
});
// 响应滚动事件
$(window).scroll(function() {
windowScrollTop = $(window).scrollTop();
if (windowScrollTop != undefined && windowScrollTop != null &&
windowViewHeight != undefined &&
windowViewHeight != null &&
elementArray != undefined &&
elementArray != null) {
elementArray.each(function(index) {
if (elementArray.eq(index).offset().top >= windowScrollTop && elementArray.eq(index).offset().top <= windowScrollTop + windowViewHeight) {
elementArray.eq(index).addClass('my-an-down');
} else {
elementArray.eq(index).removeClass('my-an-down');
}
});
}
});
DOME
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动动画</title>
</head>
<style type="text/css">
/* 设置网页的整体高度以便滚动 */
body {
height: 2000px;
}
/* 设置滚动元素容器的位置 */
#elements-container {
margin: 800px auto 0px auto;
width: auto;
height: auto;
}
/* 设置要滚动的元素的基本样式方便观察 */
#elements-container ul li {
display: inline-block;
margin-bottom: 18px;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
color: red;
border: 1px solid red;
}
/* 设置进入的动画样式 */
@keyframes animation-down {
from {
opacity: 0;
transition: all 1s ease 0s, opacity 1.5s ease 0s;
transform: translateY(-40px);
}
to {
opacity: 1;
transition: all 1s ease 0s, opacity 1.5s ease 0s;
}
}
.my-an-down {
animation: animation-down 2s 1;
}
</style>
<body>
<div class="container">
<div id="elements-container">
<ul>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
</ul>
<ul>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
</ul>
<ul>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
<li>
这是一个元素
</li>
</ul>
</div>
</div>
<script src="JS/jquery.min.js"></script>
<script type="text/javascript">
// 设置基本变量
var windowScrollTop = $(window).scrollTop();
var windowViewHeight = $(window).height();
var elementArray = $('#elements-container ul li');
// 响应缩放事件
$(window).resize(function() {
windowViewHeight = $(window).height();
});
// 响应滚动事件
$(window).scroll(function() {
windowScrollTop = $(window).scrollTop();
if (windowScrollTop != undefined && windowScrollTop != null &&
windowViewHeight != undefined &&
windowViewHeight != null &&
elementArray != undefined &&
elementArray != null) {
elementArray.each(function(index) {
if (elementArray.eq(index).offset().top >= windowScrollTop && elementArray.eq(index).offset().top <= windowScrollTop + windowViewHeight) {
elementArray.eq(index).addClass('my-an-down');
} else {
elementArray.eq(index).removeClass('my-an-down');
}
});
}
});
//简略写法
var a = $('div')
a.each(function(index) {
if (a.eq(index).offset().top >= $(window).scrollTop() && a.eq(index).offset().top < ($(window).scrollTop() + $(window).height())) {
a.eq(index).addClass('animated fadeIn');
} else {
a.eq(index).removeClass('animated fadeIn');
});
</script>
</body>
</html>
四十二、等待几秒后页面自动跳转
$(document).ready(function() {
function jump(count) {
window.setTimeout(function() {
count--;
if (count > 0) {
$('#ID').text(count);
jump(count);
} else {
location.href = "http://baidu.com/";
}
}, 1000);
}
jump(5);
});
四十三、video标签
当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。
video::-webkit-media-controls-fullscreen-button {
display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
display: none;
}
//进度条
video::-webkit-media-controls-timeline {
display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
display: none;
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none;
}
//音量按钮
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
display: none;
}
//所有控件
video::-webkit-media-controls-enclosure{
display: none;
}
//自动循环播放，且隐藏下方导航条
<video src="" autoplay loop muted ></video>
//自动循环播放显示导航条
<video
src=""
autoplay="autoplay"
loop="loop"
muted="muted"
controls="controls"
controlsList="nodownload">
</video>
//jq控制自动播放
myVid = document.getElementById("video1");
function 事件名称() {
// myVid.get( 0 ).play();
myVid.play();
}
四十四、flex布局
1、子元素自动换行
.flex布局元素{
display: flex;
flex-wrap: wrap;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
}
2、flex横向/纵向排列
flex布局的对齐方式分为主轴方向和交叉轴方向，默认主轴为横向即
flex-direction:row;
需要使布局方向纵向需要设置为，设置后主轴为纵向，交叉轴为横向
flex-direction:column;
3、flex交替排列顺序（即前后元素反向排列）
ul{
display: flex;
flex-flow: column;
}
li01{
order: 2;
}
li02{
ord
}
四十五、定时循环为li标签添加类名
var timeout = 10000; //每隔10s
var index = 0;
var addClassOn;//添加类名事件
addClassOn = setInterval(function() {
if (index >= $("ul li").length) {
index = 0; //无限循环
} else {
$("ul li").eq(index++).addClass("on").siblings().removeClass("on"); //一个添加，兄弟元素移出
}
}, timeout);
四十六、图片或者div对角显示一半（折叠效果）
//一：-webkit-mask-image隐藏（无动画过渡效果）
box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-size: cover;
width: 100%;
height: 248px;
-webkit-mask-image: -webkit-linear-gradient(right top, transparent 50%, white 50%);
border: 1px solid #000;
width: 200px;
height: 200px;
//若是图片，此处将背景色换成图片
background-color: #0077AA;
transition: -webkit-mask-image 1s;
}
//方法二：伪类遮盖(有动画过渡效果)
box {
width: 240px;
height: 240px;
margin: 40px auto 0;
position: relative;
cursor: pointer;
overflow: hidden;
background-color: #63A35C;
}
box:before {
content: '';
position: absolute;
top: 0;
right: 0;
border: 0px solid;
border-color: rgba(0, 0, 0, 0) #fff;
-webkit-transition: border .5s ease;
border-right-width: 240px;
border-bottom-width: 240px;
}
box:hover:before {
border-right-width: 0;
border-bottom-width: 0;
}
四十七、JQ点击实现复制
1、
function copyContent(id) {
var copyCon = document.getElementById(id);
copyCon.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好，可贴粘。");
}
2、
<ul class="info-list">
<li>
<div class="info">
<em>1</em>
<span class="link-addr"title="123333333">123333333</span>
</div>
</li>
<span class="copy-success">复制成功</span>
</ul>
.copy-success{
display: none;
padding: 6px 12px;
text-align: center;
background-color: #fff;
color: #333;
border-radius: 4px;
position: fixed;
top: 10px;
left: 50%;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
}
$(".link-addr").click(function () {
var copy_text = $(this).text();//需要复制的内容
var y = $(this).offset().top - 32,
x = $(this).offset().left + 45;
copyText(copy_text);
//复制成功后提示文字
$('.copy-success').css({
'display': 'block',
'top': y,
'left': x
});
setTimeout("$('.copy-success').css('display', 'none')", 1500);
});
function copyText(text) {
var oInput = document.createElement('input');
oInput.value = text;
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
oInput.className = 'oInput';
oInput.style.display = 'none';
}
四十八、JQ获取img的src的值，并修改，传值给另外一个img标签
//获取
var cover = $('#avarimgs')[0].src;
//修改
$('.favMg img').attr('src', path);
//传值
$('.目标元素img').attr('src', cover);
四十九、lable包裹input标签，点击时会触发两次点击事件的解决办法
$('label').click(function(e) {
if ($(e.target).is('input')) {
return;
}
$(this).toggleClass('curr');
console.log('点击')
});
五十、引入公共的HTML部分
<div id= "head" ></div>
<script>
$("#head").load("common/header.html");
</script>
或者
<iframe src="header.html" frameborder="0" width="100%" height="auto" scrolling="no"></iframe>
五十一、定时切换显示
var index = 0;
var mg = 0;
var vdo = 0;
var _index = 0;
setInterval(title_qiehuan, 10000);
function title_qiehuan() {
if (index >= $(".banLeft li").length) {
index = 0;
_index = 0;
mg = 0;
vdo = 0;
} else {
$(".banLeft li").eq(index++).addClass("banActive").siblings().removeClass("banActive");
console.log(index);
$(".ind img").eq(_index++).addClass("banActive").siblings().removeClass("banActive");
$(".ind canvas").eq(mg++).addClass("banActive").siblings().removeClass("banActive");
$(".banRight video").eq(vdo++).addClass("banActive").siblings().removeClass("banActive");
}
}
ref = setInterval(function(){
title_qiehuan();
console.log('F5');
},40000);
//二、最后一个元素显示时可能会执行双倍时间，未找到解决方案，如有想法，欢迎沟通
var timeout = 10000;
var index = 0;
var mg = 0;
var vdo = 0;
var addClassOn;
var _index = 0;
var leng = $(".banLeft li").length;
console.log(leng);
addClassOn = setInterval(function () {
if (index >= $(".banLeft li").length) {
index = 0;
_index = 0;
mg = 0;
vdo = 0;
} else {
$(".banLeft li").eq(index++).addClass("banActive").siblings().removeClass("banActive");
console.log(index);
$(".ind img").eq(_index++).addClass("banActive").siblings().removeClass("banActive");
$(".ind canvas").eq(mg++).addClass("banActive").siblings().removeClass("banActive");
$(".banRight video").eq(vdo++).addClass("banActive").siblings().removeClass("banActive");
}
}, timeout);
五十二、判断打开的系统是否为苹果系统
var ua = navigator.userAgent.toLowerCase();
//判断是不是移动端iPHone Safair浏览器打开的本页面
if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1
&& ua.indexOf('linux') == -1 && ua.indexOf('android') == -1) {
alert("是 ");
}
else {
alert("请使用iPhone中的Safari浏览器打开本页面！");
}
五十三、视频在苹果手机内嵌播放，不会弹出视频窗口
写在video标签内
x5-playsinline=“true”
playsinline=“true”
webkit-playsinline=“true”
五十四、css解决移动端点击会有一个蓝色蒙层的效果
html,body{
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
五十五、jq配置swiper轮播在不同分辨率下的显示个数
//写在swiper配置js内部
// 媒体查询
breakpoints: {
320: { //当屏幕宽度大于等于320
slidesPerView: 1,//加载一个轮播
slidesPerGroup: 1,//定义slides的数量多少为一组
},
768: { //当屏幕宽度大于等于768
slidesPerView: 2,
slidesPerGroup: 2,
},
1280: { //当屏幕宽度大于等于1280
slidesPerView: 3,
slidesPerGroup: 3,
}
},
五十六、css图片始终铺满屏幕且不变形
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: 100%;
object-position: 50% 50%;
object-fit: cover;
}
五十七：css改变图片的灰白度/增加黑度（类似于蒙版效果）
img{
/*增加黑度(蒙版效果）*/
filter: brightness(60%);
/* 灰白效果 */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
/*图片变白处理*/
filter: grayscale(100%) brightness(200%);
}
五十八：菜单栏点击跳页面，指定样式跟着到点击的菜单项
$(document).ready(function() {
$(".hadList a").each(function() {
$this = $(this);
if ($this[0].href == String(window.location)) {
$(".hadList a").removeClass("hadActive");
$(this).addClass("hadActive");
}
});
});
五十九、jq赋值css属性
六十、css修改radio选择后的样式
.payMethod input {
width: 20px;
height: 20px;
appearance: none;
position: relative;
outline: none;/* 清除默认样式 */
margin-right: 20px;
}
input:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #e5e5e5;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
input:checked:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #DD870D;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
input:checked:after {
content: "";
width: 9px;
height: 9px;
text-align: center;
background: #DD870D;
border-radius: 50%;
display: block;
position: absolute;
top: 4px;
left: 4px;
}
input:checked+label {
color: #edd19d;
}
六十一控制input / textarea最大输入字符
<input type="text" value="" id="myej" />
<script>
$(document).ready(function() {
//最大输入字符
$('#myej').attr('maxlength', 10)
//这行代码在html中可以用 maxlength="10"代替
//EG: <input type="text" id="" value="" maxlength="10" />
})
</script>
显示输入的字符长度
<div class="txtarea">
<textarea id="handledMsg" rows="5" class="textarea-style" onkeyup="setLength(this,200,'wordsLength');"></textarea>
<span id="wordsLength">0/200</span>
</div>
<script>
function setLength(obj, maxlength, id) {
var num = obj.value.length;
var leng = id;
if (num < 0) {
num = 0;
}
if (num > 0) {
console.log('1')
// 根据是否有内容输入判断按钮是否可以跳转
$('.anony button').css({
'opacity': '1'
})
document.getElementById(leng).innerHTML = num + "/200";
}
</script>
六十二、css瀑布式布局
父盒子 {
column-gap: 10px; // 卡片间距
column-count: 2; // 卡片列数
}
子盒子 {
break-inside: avoid;
}
六十三、判断运行的系统
1、手机系统
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
alert("安卓手机");
} else if (u.indexOf('iPhone') > -1) { //苹果手机
alert("苹果手机");
} else if (u.indexOf('Windows Phone') > -1) { //winphone手机
alert("winphone手机");
}
2、是否微信内置浏览器
function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
console.log(ua);
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
}
else {
return false;
}
}
if (isWeiXin()) {
alert(" 是来自微信内置浏览器");
}
else {
alert("不是来自微信内置浏览器");
}
3、浏览器类型
$(function() {
if($.browser.msie) {
alert("IE");
}
else if($.browser.safari)
{
alert("Safari");
}
else if($.browser.mozilla)
{
alert("火狐");
}
else if($.browser.opera) {
alert("欧朋");
}
else {
alert("i don't konw!");
}
1946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
