|
旋转木马：
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
/** element---任意的元素 attr---属性 * */
function getAttrValue(element,attr) {
return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}
function animate(element,json,fn) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//假设都达到了目标
for(var attr in json){
if(attr=="opacity"){//判断属性是不是opacity
var current= getAttrValue(element,attr)*100; //每次移动多少步
var target=json[attr]*100;//直接赋值给一个变量
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
current=current+step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){//判断属性是不是zIndex
element.style[attr]=json[attr];
}else{//普通的属性
//获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
var current= parseInt(getAttrValue(element,attr))||0;
//每次移动多少步
var target=json[attr];//直接赋值给一个变量
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
current=current+step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;//如果没到目标结果就为false
}
}
if(flag){//结果为true
clearInterval(element.timeId);
if(fn){//如果用户传入了回调的函数
fn(); //就直接的调用,
}
}
console.log("target:"+target+"current:"+current+"step:"+step);
},10);
}
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
//页面加载的事件
window.onload = function () {
var flag=true;//假设所有的动画执行完毕了
var list = document.getElementById("slide").getElementsByTagName("li");
//1---图片散开
function assign() {
for (var i = 0; i < list.length; i++) {
//设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置
animate(list[i], config[i],function () {
flag=true;
});
}
}
assign();
//右边按钮
document.getElementById("arrRight").onclick = function () {
if(flag){
flag=false;
config.push(config.shift());
assign();//重新分配
}
};
//左边按钮
document.getElementById("arrLeft").onclick = function () {
if(flag){
flag=false;
config.unshift(config.pop());
assign();
}
};
//鼠标进入,左右焦点的div显示
document.getElementById("slide").onmouseover = function () {
animate(document.getElementById("arrow"), {"opacity": 1});
};
//鼠标离开,左右焦点的div隐藏
document.getElementById("slide").onmouseout = function () {
animate(document.getElementById("arrow"), {"opacity": 0});
};
};
拖拽的对话框：
.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: 0px;
margin: 0px;
}
.login {
width: 512px;
position: absolute;
border: #ebebeb solid 1px;
height: 280px;
left: 50%;
right: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
margin-left: -250px;
margin-top: 140px;
display: none;
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: #000000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
display: none;
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
<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><!--遮挡层-->
//获取超链接,注册点击事件,显示登录框和遮挡层
document.getElementById("link").onclick = function () {
document.getElementById("login").style.display = "block";
document.getElementById("bg").style.display = "block";
};
//获取关闭,注册点击事件,隐藏登录框和遮挡层
document.getElementById("closeBtn").onclick = function () {
document.getElementById("login").style.display = "none";
document.getElementById("bg").style.display = "none";
};
//按下鼠标,移动鼠标,移动登录框
document.getElementById("title").onmousedown = function (e) {
//获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
var spaceX = e.clientX - document.getElementById("login").offsetLeft;
var spaceY = e.clientY - document.getElementById("login").offsetTop;
//移动的事件
document.onmousemove = function (e) {
//新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
var x = e.clientX - spaceX+250;
var y = e.clientY - spaceY-140;
document.getElementById("login").style.left = x + "px";
document.getElementById("login").style.top = y + "px";
}
};
document.onmouseup=function () {
document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
};
高清放大镜：
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
<div class="box" id="box">
<div class="small"><!--小层-->
<img src="images/small.png" width="350" alt=""/>
<div class="mask"></div><!--遮挡层-->
</div><!--小图-->
<div class="big"><!--大层-->
<img src="images/big.jpg" width="800" alt=""/><!--大图-->
</div><!--大图-->
</div>
//获取需要的元素
var box = document.getElementById("box");
//获取小图的div
var small = box.children[0];
//遮挡层
var mask = small.children[1];
//获取大图的div
var big = box.children[1];
//获取大图
var bigImg = big.children[0];
//鼠标进入显示遮挡层和大图的div
box.onmouseover = function () {
mask.style.display = "block";
big.style.display = "block";
};
//鼠标离开隐藏遮挡层和大图的div
box.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 * maxX / (small.offsetWidth - mask.offsetWidth);
//设置图片移动
bigImg.style.marginLeft = -bigImgMoveX + "px";
bigImg.style.marginTop = -bigImgMoveY + "px";
};
自制滚动条：
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
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: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
<div class="box" id="box">
<div class="content" id="content">
民族复兴，急需坚不可摧护国神盾，中华强国梦与强军梦汇成必由之路。古田再出发正风肃纪寻根溯源，人民军队踏上建设世界一流新征程。铁律治军革弊鼎新以重塑威武之师，胜战三问锻造战之必胜的劲旅精兵。军民合作自主创新提升国之大器，英雄辈出为改革强军洒血奉献。40年，从封闭半封闭到全方位开放，中国改革开放的脚步坚定有力，谱写出与世界共同发展的崭新篇章。40年，从最初国际事务的旁观者，到全球治理的参与者、建设者、贡献者。构建人类命运共同体，实现共赢共享，在世界的交响乐中，奏响了中国旋律。“一带一路”、青岛上合峰会，中非论坛、进口博览会，岁月见证着中国推动世界和平发展、合作共赢的坚定决心。如今，新时代的中国，正与世界一道，为全人类开创更加美好，更加值得期待的明天。
民族复兴，急需坚不可摧护国神盾，中华强国梦与强军梦汇成必由之路。古田再出发正风肃纪寻根溯源，人民军队踏上建设世界一流新征程。铁律治军革弊鼎新以重塑威武之师，胜战三问锻造战之必胜的劲旅精兵。军民合作自主创新提升国之大器，英雄辈出为改革强军洒血奉献。40年，从封闭半封闭到全方位开放，中国改革开放的脚步坚定有力，谱写出与世界共同发展的崭新篇章。40年，从最初国际事务的旁观者，到全球治理的参与者、建设者、贡献者。构建人类命运共同体，实现共赢共享，在世界的交响乐中，奏响了中国旋律。“一带一路”、青岛上合峰会，中非论坛、进口博览会，岁月见证着中国推动世界和平发展、合作共赢的坚定决心。如今，新时代的中国，正与世界一道，为全人类开创更加美好，更加值得期待的明天。
民族复兴，急需坚不可摧护国神盾，中华强国梦与强军梦汇成必由之路。古田再出发正风肃纪寻根溯源，人民军队踏上建设世界一流新征程。铁律治军革弊鼎新以重塑威武之师，胜战三问锻造战之必胜的劲旅精兵。军民合作自主创新提升国之大器，英雄辈出为改革强军洒血奉献。40年，从封闭半封闭到全方位开放，中国改革开放的脚步坚定有力，谱写出与世界共同发展的崭新篇章。40年，从最初国际事务的旁观者，到全球治理的参与者、建设者、贡献者。构建人类命运共同体，实现共赢共享，在世界的交响乐中，奏响了中国旋律。“一带一路”、青岛上合峰会，中非论坛、进口博览会，岁月见证着中国推动世界和平发展、合作共赢的坚定决心。如今，新时代的中国，正与世界一道，为全人类开创更加美好，更加值得期待的明天。
民族复兴，急需坚不可摧护国神盾，中华强国梦与强军梦汇成必由之路。古田再出发正风肃纪寻根溯源，人民军队踏上建设世界一流新征程。铁律治军革弊鼎新以重塑威武之师，胜战三问锻造战之必胜的劲旅精兵。军民合作自主创新提升国之大器，英雄辈出为改革强军洒血奉献。40年，从封闭半封闭到全方位开放，中国改革开放的脚步坚定有力，谱写出与世界共同发展的崭新篇章。40年，从最初国际事务的旁观者，到全球治理的参与者、建设者、贡献者。构建人类命运共同体，实现共赢共享，在世界的交响乐中，奏响了中国旋律。“一带一路”、青岛上合峰会，中非论坛、进口博览会，岁月见证着中国推动世界和平发展、合作共赢的坚定决心。如今，新时代的中国，正与世界一道，为全人类开创更加美好，更加值得期待的明天。
民族复兴，急需坚不可摧护国神盾，中华强国梦与强军梦汇成必由之路。古田再出发正风肃纪寻根溯源，人民军队踏上建设世界一流新征程。铁律治军革弊鼎新以重塑威武之师，胜战三问锻造战之必胜的劲旅精兵。军民合作自主创新提升国之大器，英雄辈出为改革强军洒血奉献。40年，从封闭半封闭到全方位开放，中国改革开放的脚步坚定有力，谱写出与世界共同发展的崭新篇章。40年，从最初国际事务的旁观者，到全球治理的参与者、建设者、贡献者。构建人类命运共同体，实现共赢共享，在世界的交响乐中，奏响了中国旋律。“一带一路”、青岛上合峰会，中非论坛、进口博览会，岁月见证着中国推动世界和平发展、合作共赢的坚定决心。如今，新时代的中国，正与世界一道，为全人类开创更加美好，更加值得期待的明天。
民族复兴，急需坚不可摧护国神盾，中华强国梦与强军梦汇成必由之路。古田再出发正风肃纪寻根溯源，人民军队踏上建设世界一流新征程。铁律治军革弊鼎新以重塑威武之师，胜战三问锻造战之必胜的劲旅精兵。军民合作自主创新提升国之大器，英雄辈出为改革强军洒血奉献。40年，从封闭半封闭到全方位开放，中国改革开放的脚步坚定有力，谱写出与世界共同发展的崭新篇章。40年，从最初国际事务的旁观者，到全球治理的参与者、建设者、贡献者。构建人类命运共同体，实现共赢共享，在世界的交响乐中，奏响了中国旋律。“一带一路”、青岛上合峰会，中非论坛、进口博览会，岁月见证着中国推动世界和平发展、合作共赢的坚定决心。如今，新时代的中国，正与世界一道，为全人类开创更加美好，更加值得期待的明天。
</div><!--文字内容-->
<div id="scroll" class="scroll"><!--装滚动条的层-->
<div class="bar" id="bar"></div><!--滚动条-->
</div>
</div>
//获取需要的元素
//最外面的div
var box = document.getElementById("box");
//文字div
var content = document.getElementById("content");
//装滚动条的div---容器
var scroll = document.getElementById("scroll");
//滚动条
var bar = document.getElementById("bar");
//设置滚动条的高度
//滚动条的高/装滚动条的div的高=box的高/文字div的高
//滚动条的高=装滚动条的div的高*box的高/文字div的高
var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
bar.style.height = height + "px";
//移动滚动条
bar.onmousedown = function (e) {
var spaceY = 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";
//设置鼠标移动的时候,文字不被选中
window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
//滚动条的移动距离/文字div的移动距离=滚动条最大的移动距离/文字div的最大移动距离
//文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离
var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
//设置文字div的移动距离
content.style.marginTop=-moveY+"px";
};
};
document.onmouseup=function () {
//鼠标抬起的时候,把移动事件干掉
document.onmousemove=null;
};
tab切换：
#list li {
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
}
<div id="menu">
<ul id="list">
<li class="current"><a href="http://www.baidu.com">首页</a>
</li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相册</a></li>
<li><a href="javascript:void(0)">关于</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
</ul>
</div>
//获取所有的li标签,
var liObjs=document.getElementById("list").getElementsByTagName("li");
//循环遍历,找到每个li中的a,注册点击事件
for(var i=0;i<liObjs.length;i++){
//每个li中的a
var aObj=getFirstElement(liObjs[i]);
aObj.onclick=function () {
//第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除
for(var j=0;j<liObjs.length;j++){
liObjs[j].removeAttribute("class");
}
//第二件事:
//当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色
this.parentNode.className="current";
return false;//阻止超链接跳转
};
}
|
转播
