1.火狐浏览器超好用的网页翻译插件
2.jquery中解决命名冲突问题：
如果写了一个名为$的函数，再调用jquery中的$()方法，命名会冲突，
function $(s) {
return document.querySelector(s);//返回的是原生dom对象
}
$("p").style.color = "red";
解决命名冲突用 jQuery.noConflict(); 后面找jquery对象用jQuery()方法
3.旋转，缩放，平移动画
平移：transform:"translate(100px,100px)
$("div:eq(0)").css({
transform:"translate(100px,100px)",
transform:"translateX(100px)",
transform:"translateY(100px)"
})
缩放： transform: scale(2)
$("button:eq(2)").on("click",function() {
$("div:eq(2)").css({
// transform:"scale(2,1)" x,y 两个
// transform:"scale(2)" x,y 一个
transform:"scale(2,1)"
})
})
旋转：transform:rotate(50deg)
$("button:eq(1)").on("click",function() {
$("div:eq(1)").css({
transform:"rotate(50deg)"
})
})
jquery动画animate()方法中不支持translate ，rotate，scale属性，
必须引入jquery的动画插件： jquery-animate-css-rotate-scale
引入的时候要先引入jquery 再引入jquery动画插件
插件中只支持：旋转rotate和缩放scale
$("button:eq(3)").on("click",function() {
// jquery动画中是不支持 translateY rotate scale
// 必须引入一个插件 jquery-animate-css-rotate-scale
// 该插件只支持 rotate scale
// 必须先引入jquery
$("div:eq(3)").animate({
// transform:"translateY(100px)",
// transform:"rotate(50deg)",
// 只能添加 scale 和 rotate属性
scale:2,
rotate:50
})
})
4.原生js实现轮播图
将所有的图片通过绝对定位叠在一起，通过改变图片外边所包裹的a标签的透明度，来实现图片的显示与隐藏。
用中间变量num记录当前选中的索引，遍历所有的点加onclick事件，让num=当前点击的索引值，遍历所有的图片，判断图片的索引是否等于num，如果等于就通过添加透明度为1的类，否则移除类，（在圆点的点击，箭头的点击，以及定时器的逻辑里都要用到，所以封装为一个方法），当点击上一张的箭头时，让num--如果num<0,就让num=4，调用封装的方法；点击下一张让num++，如果num》4,就让num=0，调用封装的方法；创建定时器，定时器的回调函数里执行箭头点击下一张的逻辑，给图片的大盒子添加鼠标进入（清除定时器），鼠标离开事件（开启定时器）
箭头居中：
position: absolute;
top: 50%;
transform: translateY(-50%);
通过改变透明度来实现显示与隐藏：
.box .show {
opacity: 1;
}
设置中间变量记录当前圆点点击的索引值，与图片的索引值比较来添加移除类
<style>
main {
position: relative;
width: 1000px;
height: 500px;
margin: 0 auto;
border: solid 1px red;
}
img {
position: absolute;
width: 1000px;
height: 500px;
}
.box a {
opacity: 0;
}
.box .show {
opacity: 1;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 70px;
background-image: url(./img/icons.png);
}
.prev {
left: 0;
background-position: -88px 0;
}
.next {
right: 0;
background-position: -126px 0;
}
.prev:hover {
background-position: 0 0;
}
.next:hover {
background-position: -41px 0;
}
.pages {
position: absolute;
bottom: 40px;
width: 100%;
display: flex;
justify-content: center;
}
.pages span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
margin: 0 20px;
}
.pages span.active {
background: red;
}
</style>
<body>
<main>
<div class="box">
<a href="#" class="show">
<img src="./img/1.jpg" alt="">
</a>
<a href="#">
<img src="./img/2.jpg" alt="">
</a>
<a href="#">
<img src="./img/3.jpg" alt="">
</a>
<a href="#">
<img src="./img/4.jpg" alt="">
</a>
<a href="#">
<img src="./img/5.jpg" alt="">
</a>
</div>
<div class="prev"></div>
<div class="next"></div>
<div class="pages">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</main>
<script>
var dots = document.querySelectorAll("span");
var aList = document.querySelectorAll("a");
var previousBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
// 定义中间变量 记录当前选中了哪个
var num = 0;
dots.forEach((el, index) => {
el.onclick = function () {
num = index;
change();
}
})
// 控制激活的状态
function change() {
aList.forEach((el, index) => {
if (num === index) {
el.classList.add("show");
dots[index].classList.add("active");
}
else {
el.classList.remove("show");
dots[index].classList.remove("active");
}
})
}
// 上一张
previousBtn.onclick = function () {
num--;
if (num < 0) {
num = 4;
}
change();
}
// 下一张
nextBtn.onclick = function () {
num++;
if (num > 4) {
num = 0;
}
change();
}
// 定时器
var timer = setInterval(() => {
nextBtn.click();
}, 1000);
document.querySelector('main').onmouseenter = function () {
clearInterval(timer);
};
document.querySelector('main').onmouseleave = function () {
timer = setInterval(() => {
nextBtn.click();
}, 1000);
};
</script>
</body>5.jQuery无缝轮播图
将图片绝对定位在框子的右边，通过改变上一张图片的left值以及当前点击图片的left值来实现图片无缝改变的效果，
其中上一张，下一张的切换图标的收缩效果是通过动画的旋转实现的
transform-origin: 0 0;
transform: rotateZ(-30deg);
用jq方法将第一张图及圆点先显示及展示高亮，定义中间变量记录上一张图的索引，判断下一张的索引值与num的大小关系，改变当前图片的位置与num图片的位置，定义一个布尔变量来实现频繁点击时的节流效果。
6.仿华为商城案例
下拉箭头及下拉菜单：通过自定义动画的旋转及菜单的slideToggle();实现
var isRorate = true;
$(".black_nav").click(function () {
if(isRorate){
$(".arrow").animate({rotate:180})
}else{
$(".arrow").animate({rotate:0})
}
isRorate = !isRorate;
$(".menu").slideToggle();
})
手机动画：让之前的整个盒子先下去以及隐藏（通过改变背景图的透明度），在让其回到原始位置，再让当前点的盒子显示，通过find找到右边的手机盒子让其先下去一点再上来实现抖动效果，
var previous = 0;
$(".left li").click(function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".phone").eq(previous).animate({
top:"30%",
opacity:0
},function () {
$(".phone").eq(previous).css({
display:"none",
top:0
});
$(".phone").eq(index).css({display:"block",opacity:1}).find(".phone_right").css({top:"30%"}).animate({
top:"10%"
})
previous = index;
})
})滚动窗口时给页面添加一个遮罩并设置一个渐变色：
给遮罩设置 pointer-events: none; 属性
你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素
通过滑动条的垂直距离来改变透明度。
$(window).scroll(function () { var st = $(window).scrollTop(); if(st > 100 && st < 830){ $(".mask").css({ opacity:st / 830 }); } })
5.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 480px;
height: 270px;
overflow: hidden;
margin: 0 auto;
}
img {
display: block;
width: 480px;
height: 270px;
position: absolute;
left: 480px;
top: 0;
}
#last,
#next {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
transition: all .5s;
top: 110px;
text-align: center;
line-height: 50px;
font-size: 26px;
border-style: none;
outline-style: none;
background-color: rgba(0, 0, 0, 0);
color: white;
}
#last {
left: 10px;
}
#next {
right: 10px;
}
#last2 {
transform-origin: 0 100%;
transform: rotateZ(30deg);
margin-left: 11px;
}
.last1 {
width: 4px;
height: 20px;
background-color: white;
margin-left: 23px;
transition: all .3s;
}
#last:hover {
background-color: rgba(255, 255, 255, 0.4);
}
#next:hover {
background-color: rgba(255, 255, 255, 0.4);
}
#last:hover #last2 {
transform: rotateZ(45deg);
background-color: black;
}
#last3 {
transform-origin: 0 0;
transform: rotateZ(-30deg);
margin-left: 11px;
}
#last:hover #last3 {
transform: rotateZ(-45deg);
background-color: black;
}
#last4 {
transform-origin: 100% 100%;
transform: rotateZ(-30deg);
}
#next:hover #last4 {
transform: rotateZ(-45deg);
background-color: black;
}
#last5 {
transform-origin: 100% 0;
transform: rotateZ(30deg);
}
#next:hover #last5 {
transform: rotateZ(45deg);
background-color: black;
}
.btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.btn button {
outline-style: none;
border-style: none;
background-color: grey;
width: 10px;
height: 10px;
border-radius: 10px;
cursor: pointer;
padding: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<img src="imgs/1.jpg" alt="">
<img src="imgs/2.jpg" alt="">
<img src="imgs/3.jpg" alt="">
<img src="imgs/4.jpg" alt="">
<div class="btn" id="btn">
<button></button>
<button></button>
<button></button>
<button></button>
</div>
<button id="last">
<div class="last1" id="last2">
</div>
<div class="last1" id="last3">
</div>
</button>
<button id="next">
<div class="last1" id="last4">
</div>
<div class="last1" id="last5">
</div>
</button>
</div>
<script src="./jquery-1.8.3.min.js"></script>
<script>
$("img").first().css({
left: 0
})
$("button").first().css({
background: "white"
})
var num = 0;// 记录上一个
$(".btn button").click(function () {
var index = $(this).index();
// 点
$(".btn button").eq(num).css({
background: "gray"
})
$(this).css({
background: "white"
})
// 图
if (num < index) {
// 当前点击的
$("img").eq(index).css({
left: 480
}).animate({
left: 0
})
// 上一个
$("img").eq(num).animate({
left: -480
})
}
else if (num > index) {
// 当前点击的
$("img").eq(index).css({
left: -480
}).animate({
left: 0
})
// 上一个
$("img").eq(num).animate({
left: 480
})
}
num = index;
})
var flag = true;// 实现节流 频繁点击
function change() {
if (flag) {
flag = false;
$(".btn button").eq(num).css({
background: "gray"
})
$("img").eq(num).animate({
left: -480
});
num++;
if (num > 3) {
num = 0;
}
$("img").eq(num).css({
left: 480
}).animate({
left: 0
},function () {
flag = true;
})
$(".btn button").eq(num).css({
background: "#fff"
})
}
}
var timer = setInterval(change, 2000);
$("#next").click(change);
$(".box").mouseenter(function () {
clearInterval(timer);
});
$(".box").mouseleave(function () {
timer = setInterval(change, 2000);
});
$("#last").click(function () {
if (flag) {
flag = false;
$(".btn button").eq(num).css({
background: "gray"
})
$("img").eq(num).animate({
left: 480
});
num--;
if (num < 0) {
num = 3;
}
$("img").eq(num).css({
left: -480
}).animate({
left: 0
},function () {
flag = true;
})
$(".btn button").eq(num).css({
background: "#fff"
})
}
});
</script>
</body>
</html>
