一、根据是pc端或者 手机端 自动跳转到相应页面
window.onload = function () {
var test = navigator.userAgent.match(/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i);
if (test) {
location.href = 'https://www.m.baidu.com';
} else {
location.href = 'https://www.baidu.com';
}
}
二、模态框的弹出，居中，登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框的弹出，居中，登录</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #666;
font-size: 16px;
}
.link {
color: #666;
font-size: 14px;
text-align: center;
}
#box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9989;
width: 400px;
height: 300px;
background: #fff;
border: 1px solid #ccc;
margin: 0 auto;
display: none;
}
#box .box-m {
width: 350px;
height: 200px;
margin-top: 40px;
}
#box .box-m .input {
height: 40px;
margin-top: 10px;
}
#box .box-m .input label {
display: inline-block;
width: 120px;
text-align: right;
margin-top: 5px;
color: #666;
}
#box .box-m input {
width: 220px;
height: 30px;
display: block;
background: #fff;
outline: none;
border: 1px solid #ccc;
float: right;
padding: 10px;
box-sizing: border-box;
}
#box .box-m button {
clear: both;
width: 120px;
height: 40px;
margin-left: 50%;
transform: translate(-50%);
margin-top: 30px;
background: #ffffff;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
}
#box .header {
position: relative;
cursor: move;
}
#box .header p {
height: 40px;
line-height: 40px;
text-align: center;
color: #666;
font-size: 16px;
}
#box .header p.close {
cursor: pointer;
position: absolute;
right: -15px;
top: -15px;
border: 1px solid #ccc;
width: 30px;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 15px;
z-index: 9990;
background: #fff;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9980;
display: none;
}
/*# sourceMappingURL=26.css.map */
</style>
</head>
<body>
<script>
window.onload = function () {
// let father = document.querySelector('.father');
// father.addEventListener('mousemove',function (e) {
// console.log( e.pageX-this.offsetLeft);
// console.log( e.pageY-this.offsetTop);
// this.innerHTML = `x的坐标是` + ( e.pageX-this.offsetLeft)+`, y的坐标是`+ (e.pageY-this.offsetTop) ;
// })
//打开模态框
let link = document.querySelector('.link');
let box = document.querySelector('#box');
let bg = document.querySelector('.bg');
let close = document.querySelector('.close');
let header = document.querySelector('.header');
link.addEventListener('click',function (e) {
box.style.display = 'block';
bg.style.display = 'block';
})
//关闭模态框
close.addEventListener('click',function (e) {
box.style.display = 'none';
bg.style.display = 'none';
})
// 当鼠标按下时，在header区域按下时，进行移动
header.addEventListener('mousedown', function (e) {
//鼠标在模态框里的X，Y 的位置
var x = e.pageX-box.offsetLeft;
var y = e.pageY-box.offsetTop;
//移除这个添加的改变模态框位置的的函数
document.addEventListener('mouseup',function () {
document.removeEventListener('mousemove',fn);
})
//鼠标移动时
document.addEventListener('mousemove',fn)
function fn(e) {
// 把随时变化的鼠标位置x，y的值赋给 模态框left ,top 的位置
box.style.left = (e.pageX - x) + 'px';
box.style.top = (e.pageY - y) + 'px';
}
})
}
</script>
<!--1 模态框的拖动效果-->
<div class="link"><a href="javascript:;">点击 登录模态框</a></div>
<div id="box">
<div class="header">
<p class="aa">登录窗口</p>
<p class="close">关闭</p>
</div>
<div class="box-m">
<div class="username input">
<label for="username">用户名：</label>
<input id="username" type="text">
</div>
<div class="password input">
<label for="password">密码：</label>
<input id="password" type="text">
</div>
<button type="submit">登 录</button>
</div>
</div>
<!--背景遮盖-->
<div class="bg"></div>
</body>
</html>
三、京东实现图片放大镜功能
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./2.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.outbox {
margin-left:20px;
margin-top:20px;
}
.firstbox {
width: 450px;
height: 450px;
border: 1px solid #ccc;
cursor:move;
float: left;
}
.firstbox img {
position: relative;
width: 450px;
height: 450px;
}
.mark{
margin-left:20px;
margin-top:20px;
position: absolute;
top:0;
left:0;
width: 300px;
height: 300px;
background-color: #ff8a53;
opacity: 0.5;
display: none;
}
.twobox {
float: left;
width: 600px;
height: 600px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
display: none;
}
.twobox img {
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="outbox">
<div class="firstbox">
<img src="img/9ee1f36339d4e74e.jpg" alt="" >
<div class="mark"></div>
</div>
<div class="twobox">
<img src="img/big.avif" alt="" >
</div>
</div>
</body>
</html>
js部分
addEventListener('load',function () {
var firstbox = document.querySelector('.firstbox');
var twobox = document.querySelector('.twobox');
var twoBoxImg = twobox.querySelector('img');
var mark = document.querySelector('.mark');
firstbox.addEventListener('mouseover',function () {
twobox.style.display = 'block';
mark.style.display = 'block';
this.style.borderRight = 'none';
});
firstbox.addEventListener('mouseout',function () {
twobox.style.display = 'none';
mark.style.display = 'none';
this.style.borderRight = '1px solid #ccc';
})
firstbox.addEventListener('mousemove',fn);
function fn(event) {
//盒子的1半的宽度
boxWidth = mark.offsetWidth/2;
boxHeigth = mark.offsetHeight/2;
//鼠标在盒子的中的距离
screenBoX = event.pageX - firstbox.offsetLeft;
screenBoY = event.pageY - firstbox.offsetTop;
//遮罩层在盒子中，鼠标在盒子中间，遮罩层跟随鼠标一起移动
mouseBoX = screenBoX-boxWidth
mouseBoY = screenBoY-boxHeigth
//条件判断让遮罩层不要超出父级框内。
if(mouseBoX <= 0) {
mouseBoX = 0;
} else if(mouseBoX > boxWidth ) {
mouseBoX = boxWidth;
}
if(mouseBoY <= 0) {
mouseBoY = 0;
} else if(mouseBoY > boxHeigth ) {
mouseBoY = boxHeigth;
}
//遮罩层移动
mark.style.left = mouseBoX + 'px';
mark.style.top = mouseBoY + 'px';
//大图片移动
twoBoxImg.style.left = -mouseBoX + 'px';
twoBoxImg.style.top = -mouseBoY + 'px';
}
})
四、仿照淘宝返回顶部
<!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>
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
.w {
width: 1200px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子，就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
goBack.addEventListener('click', function() {
// 里面的x和y 不跟单位的 直接写数字即可
// window.scroll(0, 0);
// 因为是窗口滚动 所以对象是window
animate(window, 0);
});
// 动画函数
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - window.pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (window.pageYOffset == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
// obj.style.left = window.pageYOffset + step + 'px';
window.scroll(0, window.pageYOffset + step);
}, 15);
}
</script>
</body>
</html>
五、js 仿淘宝实现图片轮播
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/index.css">
<script src="./js/animate.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div class="focus">
<span class="iconfont sp1"></span>
<span class="iconfont sp2"></span>
<a href="javascript:;" class="arrow-l"></a>
<a href="javascript:;" class="arrow-r"></a>
<ul>
<li><a href="#"><img src="img/focus0.jpg" alt=""></a></li>
<li><a href="#"><img src="img/focus1.png" alt=""></a></li>
<li><a href="#"><img src="img/focus3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/focus4.jpg" alt=""></a></li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
css 部分
*{
padding:0;
margin:0;
}
.focus .sp1 {
position: absolute;
top:50%;
left: 0;
margin-top: -10px;
z-index: 9999;
cursor: pointer;
display: none;
}
.focus .sp2 {
position: absolute;
top:50%;
right: 0;
margin-top: -10px;
z-index: 9999;
cursor: pointer;
display: none;
line-height: 20px;
}
.arrow-l{
position: absolute;
top:50%;
left: 0;
width: 20px;
margin-top: -10px;
height: 20px;
background-color: black;
opacity: 0.2;
border-radius: 10px;
border-top-left-radius:0 ;
border-bottom-left-radius:0 ;
cursor: pointer;
display: none;
}
.arrow-r{
position: absolute;
top:50%;
right:0;
width: 20px;
margin-top: -10px;
height: 20px;
background-color: black;
opacity: 0.2;
border-radius: 10px;
border-top-right-radius:0 ;
border-bottom-right-radius:0 ;
cursor: pointer;
display: none;
}
.focus{
position: relative;
width: 520px;
height: 280px;
overflow: hidden;
}
.focus ul {
position: absolute;
top:0;
left: 0;
list-style: none;
width:800%;
height: 280px;
z-index: -9999;
}
.focus ul li{
float: left;
}
a{
text-decoration: none;
}
.focus img{
width: 520px;
height: 280px;
}
ol{
border-radius: 10px;
position: absolute;
bottom: 15px;
height: 13px;
text-align: center;
font-size: 0;
left: 50%;
margin-left: -39px;
background-color: rgba(255,255,255,.3);
}
ol li {
display: inline-block;
margin: 3px;
padding-top: 8px;
width: 8px;
height: 0;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
ol li.current {
background: #ff5000;
}
js部分
//window 节点加载完毕后在运行js
window.addEventListener('load',function () {
//获取相关的元素
//定义一个单击右边按钮的自加变量
var num = 0;
//控制小圆圈自动播放
var circle = 0;
var focus = document.querySelector('.focus');
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
var sp1 = focus.querySelector('.sp1');
var sp2 = focus.querySelector('.sp2');
var arrowl = focus.querySelector('.arrow-l');
var arrowr = focus.querySelector('.arrow-r');
console.log(ul.children.length);
//获取盒子的宽度
var focusWidth = focus.offsetWidth;
//鼠标移动到图片上显示箭头左右半圆图像
focus.addEventListener('mouseover',function () {
sp1.style.display = 'block';
sp2.style.display = 'block';
arrowl.style.display = 'block';
arrowr.style.display = 'block';
})
//鼠标离开图片上隐藏箭头左右半圆图像
focus.addEventListener('mouseout',function () {
sp1.style.display = 'none';
sp2.style.display = 'none';
arrowl.style.display = 'none';
arrowr.style.display = 'none';
})
//根据图片的张数动态生成小圆圈的个数
for (var i=0;i< ul.children.length;i++) {
//创建一小圆圈的元素
var li = document.createElement('li');
//为小圆圈添加自定义属性index
li.setAttribute('index',i);
//把小圆圈添加到ol里面
ol.appendChild(li);
//利用排他思想，当点击当前小圆圈时变成橘黄色，其余不变
// 并为小圆圈绑定单击事件。
li.addEventListener('click',function () {
for(var i=0;i<ol.children.length;i++) {
ol.children[i].className = '';
}
this.className = 'current';
//获取小圆圈的自定义属性index
var index = this.getAttribute('index');
//添加左右滑动动画
//当单击小圆圈时，把当前索引号赋值给单击右边按钮和自动播放变量
circle = num = index;
animate(ul,-index*focusWidth);
})
ol.children[0].className = 'current';
}
//克隆第一张图片(li)放到ul 最后面
var first = ul.children[0].cloneNode(true);
//添加到ul里面
ul.appendChild(first);
sp2.addEventListener('click',function () {
//当图片播放到最后克隆的图片时，自动跳到第一张图片
if(num === ol.children.length) {
num = 0;
ul.style.left = 0;
}
num++;
animate(ul,-num * focusWidth);
circle++;
//当图片播放到最后克隆的图片时，自动跳到第一张图片
if (circle === ol.children.length) {
circle = 0;
ul.style.left = 0;
}
//调用函数
circleChange(circle);
})
sp1.addEventListener('click',function () {
//当图片播放到最后克隆的图片时，自动跳到第一张图片
if(num === 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul,-num * focusWidth);
circle--;
//当图片播放到最后克隆的图片时，自动跳到第一张图片
if (circle < 0) circle = ol.children.length - 1;
//利用排他思想，设置当前小圆圈为橘黄色，其余不变
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
//调用函数
circleChange(circle);
})
function circleChange(circle) {
//利用排他思想，设置当前小圆圈为橘黄色，其余不变
for(var i=0;i<ol.children.length;i++){
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
})
百度网下载实例 链接: pan.baidu.com/s/1DsiojAqV… 提取码: 9khi
