|
JavaScript常见的网页特效
特效样式1、模态框拖曳效果2、放大镜效果3、固定侧边栏效果4、上下图片无间断滚动5、左右图片无间断滚动
如何实现这些效果呢？元素偏移量offset系列元素可视区client系列元素滚动scroll系列如何实现上面那些效果呢模态框拖曳效果代码实现放大镜效果代码实现固定侧边栏效果代码实现上下图片无间断滚动代码实现左右图片无间断滚动代码实现
特效样式
1、模态框拖曳效果
2、放大镜效果
3、固定侧边栏效果
4、上下图片无间断滚动
5、左右图片无间断滚动
如何实现这些效果呢？
我想介绍一下元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列相关的知识。
元素偏移量offset系列
offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。
属性说明offsetLeft返回元素相对其带有定位的父元素左边框的偏移offsetTop返回元素相对其带有定位的元素上方的偏移offsetWidth返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位offsetHeight返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位offsetParent返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）
offset与style的区别
Offsetstyleoffset可以得到任意样式表中的样式值style只能得到行内样式表中的样式值offset系列获得的数值是没有单位的style.width获得的是带有单位的字符串offsetWidth包含padding、border、width的值style.width获得的是不包含padding、border的值offsetWidth等属性是只读属性，只能获取不能赋值style.width是可读写属性，可以获取也可以赋值
案例
获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。  效果展示  JavaScript代码如下
Document
#box{
position: absolute;
top: 50px;
left: 20px;
background-color: pink;;
width: 200px;
height: 200px;
}
var box = document.querySelector('#box');
//输出盒子的宽带和高度
console.log(box.offsetWidth);
console.log(box.offsetHeight);
box.addEventListener('mousemove',function(e){
//获取box的偏移量
var left = box.offsetLeft;
var top = box.offsetTop;
console.log('偏移量:'+'('+left+','+top+')');
//计算鼠标在box中的坐标
var x = e.pageX-left;
var y = e.pageY-top;
console.log('x轴的坐标:'+x+','+'y轴的坐标:'+y);
})
元素可视区client系列
client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。
属性说明clientLeft返回元素左边框的大小clientTop返回元素上边框的大小clientWidth返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位clientHeight返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位
案例
获取元素client。
效果展示 
JavaScript代码如下
Document
div {
width: 200px;
height: 200px;
background-color: pink;
overflow: auto;
border: 10px solid red;
padding: 10px;
}
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容
var div = document.querySelector('div');
console.log(div.clientHeight);
console.log(div.clientTop);
console.log(div.clientLeft);
元素滚动scroll系列
scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。
属性说明scrollLeft返回被卷去的左侧距离，返回数值不带单位scrollTop返回被卷去的上方距离，返回数值不带单位scrollWidth返回自身的宽度，不含边框。注意返回数值不带单位scrollHeight返回自身的高度，不含边框。注意返回数值不带单位
案例 获取scrollHeight。
效果展示 
JavaScript代码如下
Document
div {
width: 200px;
height: 200px;
background-color: pink;
overflow: auto;
border: 10px solid red;
padding: 10px;
}
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容
var div = document.querySelector('div');
console.log(div.scrollHeight);
如何实现上面那些效果呢
模态框拖曳效果代码实现
Document
/* 单击弹出遮罩层的样式 */
.login-header{
width: 100%;
text-align: center;
font-size: 20pt;
position: absolute;
cursor: pointer;
}
.modal{
width: 500px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: none;
box-shadow: 0px 0px 20px #ddd;
z-index: 999;
cursor: move;
}
/* 表单结构 */
.modal form{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
/* 表单标题 */
.modal form .item1{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
/* 表单的输入样式 */
.modal form .item2{
margin: 0 auto;
width: 70%;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.username{
margin-left: 16px;
}
/* 登录会员样式 */
.vip{
border: 1px solid #ccc;
border-radius: 20px;
padding: 3px 40px;
background-color: orange;
color: #fff;
}
/* 关闭按钮样式 */
.close{
position: absolute;
right: -10px;
top: -10px;
border: 1px solid #ccc;
width: 20px;
height: 20px;
text-align:center;
line-height: 17px;
border-radius: 50%;
background-color: wheat;
cursor: pointer;
}
/* 遮罩层样式 */
.login-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc;
display: none;
}
登录会员
用户名：
登录密码：
登录会员
x
单击登录会员...
var modal = document.querySelector('.modal');
var close = document.querySelector('.close');
var login = document.querySelector('.login-header');
var bg = document.querySelector('.login-bg');
//给遮罩层注册click事件
login.addEventListener('click',function(){
modal.style.display = 'block';
bg.style.display = 'block';
modal.style.backgroundColor = 'white';
})
//给close注册click事件
close.addEventListener('click',function(){
modal.style.display = 'none';
bg.style.display = 'none';
})
//给modal注册mousedown事件
modal.addEventListener('mousedown',function(e){
//获取鼠标在模态框中的坐标
var x = e.pageX - modal.offsetLeft;
var y = e.pageY - modal.offsetTop;
//定义移动函数
var move = function(e){
modal.style.left = e.pageX - x + 'px';
modal.style.top = e.pageY - y + 'px';
}
//给文档对象注册鼠标移动事件
document.addEventListener('mousemove',move);
//给文档注册鼠标弹起事件
document.addEventListener('mouseup',function(){
document.removeEventListener('mousemove',move);
})
})
放大镜效果代码实现
放大镜
#magnifying {
display: block;
width: 400px;
height: 400px;
margin: 50px;
position: relative;
border: 1px solid rgba(122, 74, 74, 0.05);
}
#origin {
position: relative;
}
#float {
display: none;
width: 200px;
height: 200px;
background: #1d882c;
border: 1px solid rgb(145, 58, 58);
filter: alpha(opacity=30);
opacity: 0.3;
position: absolute;
overflow: hidden;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 400px;
z-index: 10;
cursor: move;
}
#zoom {
display: none;
position: absolute;
top: 0;
left: 420px;
width: 400px;
height: 400px;
overflow: hidden;
}
#zoom img {
position: absolute;
z-index: 5
}
window.onload = function () {
var Magnifying = document.querySelector("#magnifying");
var Origin = document.querySelector("#origin");
var Mark = document.querySelector("#mark");
var Float = document.querySelector("#float");
var Zoom = document.querySelector("#zoom");
var ZoomImage = Zoom.getElementsByTagName("img")[0];
Mark.addEventListener('mouseover',function () {
Float.style.display = "block";
Zoom.style.display = "block";
});
Mark.addEventListener('mouseout',function () {
Float.style.display = "none";
Zoom.style.display = "none";
});
Mark.addEventListener('mousemove',function (e) {
var _event = e || window.event; //兼容多个浏览器的event参数模式
//计算鼠标中心点的坐标
var left = _event.clientX - Magnifying.offsetLeft - Origin.offsetLeft - Float.offsetWidth / 2;
var top = _event.clientY - Magnifying.offsetTop - Origin.offsetTop - Float.offsetHeight / 2;
//判断鼠标中心点是否在图片内部
if (left (Mark.offsetWidth - Float.offsetWidth)) {
left = Mark.offsetWidth - Float.offsetWidth;
}
if (top (Mark.offsetHeight - Float.offsetHeight)) {
top = Mark.offsetHeight - Float.offsetHeight;
}
Float.style.left = left + "px";
Float.style.top = top + "px";
//求相对位置
var percentX = left / (Mark.offsetWidth - Float.offsetWidth);
var percentY = top / (Mark.offsetHeight - Float.offsetHeight);
console.log(percentX);
//方向相反，故而是负值
ZoomImage.style.left = -percentX * (ZoomImage.offsetWidth - Zoom.offsetWidth) + "px";
ZoomImage.style.top = -percentY * (ZoomImage.offsetHeight - Zoom.offsetHeight) + "px";
});
}
固定侧边栏效果代码实现
Document
.w{
width: 70%;
margin: 0 auto;
margin-top: 10px;
}
.header{
height: 100px;
background-color: red;
}
.bananer{
height: 200px;
background-color: pink;
}
.main{
height: 1267px;
background-color: orange;
}
.slider-bar{
width: 70px;
height: 70px;
background-color: yellow;
position: absolute;
left: 85%;
top: 330px;
}
.goBack{
display: none;
position: absolute;
bottom: 30px;
cursor: pointer;
}
头部区域
bananer区域
主体区域
返回顶部
var header = document.querySelector('.header');
var bananer = document.querySelector('.bananer');
var slider = document.querySelector('.slider-bar');
var goBack = document.querySelector('.goBack');
goBack.addEventListener('click',function(){
window.scrollTo(0,0);
})
document.addEventListener('scroll',function(){
//获取页面顶部和左侧卷去了多少
slider.style.top = window.pageYOffset;
if(window.pageYOffset>(header.scrollHeight+bananer.scrollHeight+30)){
goBack.style.display = 'block';
slider.style.position = 'fixed';
slider.style.left = '85%';
slider.style.top = '0px';
}else{
slider.style.position = 'absolute';
slider.style.left = '85%'
slider.style.top = (header.scrollHeight+bananer.scrollHeight+30)+'px'
goBack.style.display = 'none';
}
})
上下图片无间断滚动代码实现
上下无间断滚动
var speed=10
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop |