目录
1.拖拽对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽对话框</title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {
padding: 0;
margin: 0;
}
.login {
width: 512px;
height: 280px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -140px;
border: gray solid 1px;
background: white;
box-shadow: 0 0 10px gray; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
z-index: 9999;
display: none;
}
.login-title {
width: 100%;
margin-top: 10px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
cursor: move;
-moz-user-select: none; /*Firefox*/
-webkit-user-select: none; /*webkit浏览器--Google Safari*/
-ms-user-select: none; /*IE*/
user-select: none; /*文字不能被选中*/
position: relative;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;/*其父级还有10px的margin 所以20px+10px*/
background:white;
border: gray solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
.login-input-content {
margin-top: 20px;
}
.login-input {
overflow: hidden;
margin-bottom: 20px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
#username, #password { /* .login-input input.list-input*/
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: gray 1px solid;
text-indent: 10px; /*缩进*/
}
.login-button {
width: 50%;
margin: auto;
margin-top:30px;
line-height: 40px;
font-size: 14px;
border: gray 1px solid;
text-align: center;
}
.login-bg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: black;
filter: alpha(opacity=10); /*IE*/
-moz-opacity: 0.1; /*Firefox*/
opacity: 0.1;
display: none;
}
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div class="login-header">
<a id="link" href="javascript:void(0);">点击，弹出登录框</a>
</div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div><!--头部-->
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div><!--输入框-->
<div id="loginBtn" class="login-button">
<a href="javascript:void(0);" id="login-button-submit">登录会员</a>
</div><!--按钮-->
</div>
<div id="bg" class="login-bg"></div><!--遮挡层-->
<script>
function my$(id) {
return document.getElementById(id);
}
//获取超链接,注册点击事件,显示登录框和遮挡层
my$("link").onclick=function () {
//由于javascript:;-->所以超链接不会跳转,就不需要return false;了
my$("login").style.display="block";
my$("bg").style.display="block";
};
//获取关闭,注册点击事件,隐藏登录框和遮挡层
my$("closeBtn").onclick = function () {
my$("login").style.display = "none";
my$("bg").style.display = "none";
};
//按下鼠标,移动鼠标,移动登录框
my$("title").onmousedown = function (e) {
//获取此时的可视区域的横/纵坐标-此时登录框距离左/上侧页面的横坐标
var spaceX=e.clientX-my$("login").offsetLeft;
var spaceY=e.clientY-my$("login").offsetTop;
//鼠标移动事件
document.onmousemove=function (e) {
//移动后新的可视区的横纵坐标-spaceX/spaceY
//为了使鼠标的位置不变,还需要考虑这个登录框的margin
var x=e.clientX-spaceX+250;
var y=e.clientY-spaceY+140;
my$("login").style.left = x+ "px";
my$("login").style.top = y + "px";
};
};
//鼠标抬起,解绑鼠标移动事件
document.onmouseup=function () {
document.onmousemove=null;
};
</script>
</body>
</html>
2.高清放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高清放大镜</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 150px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.small {
position: relative;
}
.mask {
width: 80px;
height: 80px;
background: yellow;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.big {
width: 160px;
height: 160px;
position: absolute;
top: 0;
left: 210px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="../images/test.jpg" style="width: 200px; height: 150px;" alt=""/>
<div class="mask"></div><!--遮挡层-->
</div><!--小图-->
<div class="big">
<img src="../images/test.jpg" style="width: 400px; height: 300px;" alt=""/><!--大图-->
</div><!--大图-->
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
console.log(my$("box").offsetLeft);
var box = my$("box");
//获取小图的div
var small = box.children[0];
//获取遮挡层
var mask = small.children[1];
//获取大图的div
var big = box.children[1];
//获取大图img
var bigImg = big.children[0];
//鼠标进入小图显示遮挡层和大图的div
small.onmouseover = function () {
mask.style.display = "block";
big.style.display = "block";
};
//鼠标离开隐藏遮挡层和大图的div
small.onmouseout = function () {
mask.style.display = "none";
big.style.display = "none";
};
//鼠标的移动事件--在小图上移动
small.onmousemove = function (e) {
//鼠标此时的可视区域的横坐标和纵坐标
//主要是设置鼠标在遮挡层的中间显示
var x = e.clientX - mask.offsetWidth / 2;
var y = e.clientY - mask.offsetHeight / 2;
//主要是margin的100px的问题
x = x - 100;
y = y - 100;
//横坐标的最小值
x = x < 0 ? 0 : x;
//纵坐标的最小值
y = y < 0 ? 0 : y;
//横坐标的最大值
x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
//纵坐标的最大值
y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
//为遮挡层的left和top赋值
mask.style.left = x + "px";
mask.style.top = y + "px";
//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
//大图的横向的最大移动距离
var maxX = bigImg.offsetWidth - big.offsetWidth;
//大图的纵向的最大移动距离
var maxY = bigImg.offsetHeight - big.offsetHeight;
//大图的横向移动距离
var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);
//大图的纵向移动距离
var bigImgMoveY = y * maxY / (small.offsetHeight - mask.offsetHeight);
//设置大图移动距离
bigImg.style.marginLeft = -bigImgMoveX + "px";
bigImg.style.marginTop = -bigImgMoveY + "px";
}
</script>
</body>
</html>
3.div滚动条
下面的滚动条是系统的，不能设置样式
接下来自己制作滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条案例</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 300px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: whitesmoke;
}
.bar {
height: 80px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: gray;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
床前明月光，疑是地上霜。举头望明月，低头思故乡。
锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波。
清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。
床前明月光，疑是地上霜。举头望明月，低头思故乡。
锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波。
清明时节雨纷纷，路上行人欲断魂。借问酒家何处有？牧童遥指杏花村。
</div><!--文字内容-->
<div id="scroll" class="scroll"><!--装滚动条的层-->
<div class="bar" id="bar"></div><!--滚动条-->
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
var box = my$("box");
var content = my$("content");
var scroll = my$("scroll");
var bar = my$("bar");
//设置滚动条的高度
//滚动条的高/装滚动条的div的高=box的高/文字div的高
//滚动条的高=装滚动条的div的高*box的高/文字div的高
bar.style.height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight + "px";
//移动滚动条
bar.onmousedown = function (e) {
var spaceY = e.clientY - bar.offsetTop;
//console.log(e.clientY+","+bar.offsetTop);
//移动事件--鼠标按下,这时鼠标移至页面的任何一个地方都还可以滚动
document.onmousemove = function (e) {
var y = e.clientY - spaceY;
y = y < 0 ? 0 : y;
y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;
bar.style.top = y + "px";
//滚动条的移动距离/文字div的移动距离=滚动条最大移动距离/文字div最大移动距离
//文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离
var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
//设置文字div的移动距离
content.style.top=-moveY+"px";//content.style.marginTop=-moveY+"px";
//设置鼠标移动的时候,文字不被选中
window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
};
};
//鼠标抬起时,解绑移动事件
document.onmouseup = function () {
document.onmousemove = null;
};
</script>
</body>
</html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
