一、拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function() {
var p2 = document.getElementById("p2");
p.onmousedown = function(event) {
var e = window.event || event;
var oX = e.offsetX;
var oY = e.offsetY;
document.onmousemove = function(event) {
var ex = window.event || event;
p.style.left = ex.clientX - oX + "px";
p.style.top = ex.clientY - oY + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
p2.onmousedown = function(ev) {
var e = window.event || ev;
var oX = e.offsetX;
var oY = e.offsetY;
document.onmousemove = function(ev) {
var ex = window.event || ev;
p2.style.left = ex.clientX - oX + 'px';
p2.style.top = ex.clientY - oY + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
<style>
#p {
width: 100px;
height: 100px;
background: rgba(121, 121, 12, 0.2);
position: absolute;
top: 200px;
}
#p2 {
width: 100px;
height: 100px;
background: rgba(121, 121, 121, 0.7);
position: absolute;
}
</style>
</head>
<body>
<p id="p">
</p>
<p id="p2"></p>
</body>
</html>
二、輪播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>輪播</title>
<style type="text/css">
button{
border:0;
background:antiquewhite;
width: 70px;
height:30px;
border-radius:5px 5px 0 0;
}
#back {
width: 500px;
height: 300px;
/*!:卷軸相對其定位*/
position: relative;
/*!:隱藏視窗外*/
overflow: hidden;
border: 1px solid #ccc;
box-shadow:4px 4px 6px #ccc;
}
#content {
height: 300px;
width: 2000px;
position: absolute;
/*!:第一個表示哪個屬性的過度，all標示所有css屬性*/
transition: all .5s;
}
#content p {
width: 500px;
height: 300px;
float: left;
color:mediumaquamarine;
font-weight:bold;
font-size:20px;
text-shadow:4px 4px 10px #ccc;
}
</style>
</head>
<body>
<!--p#btns>button.btn{button}*5-->
<p id="btns">
<button id="last">上一頁</button>
<button class="btn">button1</button>
<button class="btn">button2</button>
<button class="btn">button3</button>
<button class="btn">button4</button>
<button id="next">下一頁</button>
</p>
<!--可視區-->
<p id="back">
<!--背板-->
<p id="content">
<!--pic-->
<p class="p">p1</p>
<p class="p">p2</p>
<p class="p">p3</p>
<p class="p">p4</p>
</p>
</p>
<script>
//按鈕
var last = document.getElementById("last");
var btns = document.getElementsByClassName("btn");
var next = document.getElementById("next");
//組件
var back = document.getElementById("back");
var content = document.getElementById("content");
var ps = document.getElementsByClassName("p");
//顯示第幾張圖的計數器
var index = 0;
//定時器
var timer;
//卷軸寬度設置成輪播圖片總寬度
content.style.width = ps.length * 500 + "px";
//實現下一張
function nextFun() {
// index++;//1 p2
if(index > ps.length - 1) {
index = 0;
}
//修改卷軸的left值
content.style.left = index * 500 * -1 + "px";
index++; // 1
console.log(index);
}
nextFun();
// content.style.left = 0 + "px";
timer = setInterval(nextFun, 2000);
//鼠標
content.onmouseover = function() {
clearInterval(timer);
}
content.onmouseout = function() {
timer = setInterval(nextFun, 2000);
}
//控制按鈕切換頁面
function resetTimer() {
clearInterval(timer);
timer = setInterval(nextFun, 2000);
}
//下一個
next.onclick = function() {
index++;
if(index > ps.length - 1) {
index = 0;
}
content.style.left = index * 500 * -1 + "px";
resetTimer();
}
//上一個
last.onclick = function() {
index--;
if(index < 0) {
index = ps.length - 1;
}
content.style.left = index * 500 * (-1) + "px";
resetTimer();
}
//按鈕
for(var i = 0; i < btns.length; i++) {
//屬性很好添加
btns[i].index = i;
btns[i].onclick = function() {
//取出當前按鈕中index屬性值，為圖片標號
index = this.index;
content.style.left = index * 500 * -1 + "px";
resetTimer();
}
}
</script>
</body>
</html>
三、模態
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
button {
background: mediumaquamarine;
border: 0;
width: 50px;
height: 20px;
color: bisque;
}
#page1 {
width: 300px;
height: 500px;
border: 5px solid #CCCCCC;
margin: 0 auto;
position: relative;
}
#page2 {
width: 300px;
height: 500px;
background: rgba(121, 11, 11, .2);
position: absolute;
top: 500px;
}
</style>
</head>
<body>
<p id="page1">
<button id="next">下一頁</button>
<p id="page2">
<button id="last">上一頁</button>
</p>
</p>
<script type="text/javascript">
var next = document.getElementById("next");
var last = document.getElementById("last");
var page2 = document.getElementById("page2");
var speed = 1;
//page2上升，遮擋page1
var flag = true;
next.onclick = function() {
if(flag == true) {
flag = false;
console.log("下一頁進入" + flag);
var timer = setInterval(function() {
if(page2.offsetTop <= 10) {
clearInterval(timer);
flag = true;
console.log("下一頁結束：" + flag);
}
page2.style.top = page2.offsetTop - 10 + "px";
}, 10);
}
}
last.onclick = function() {
if(flag == true) {
flag = false;
console.log("上一頁剛進入：" + flag);
var timer = setInterval(function() {
if(page2.offsetTop >= 510) {
flag = true;
console.log("上一頁結束" + flag);
clearInterval(timer);
} else {
page2.style.top = page2.offsetTop + 10 + "px";
}
}, 10);
}
}
</script>
</body>
</html>
四、tab切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button{
border:0;
background:antiquewhite;
width: 70px;
height:30px;
border-radius:5px 5px 0 0;
}
.p {
width: 500px;
height: 300px;
border: 1px solid #ccc;
position: absolute;
color:mediumaquamarine;
font-weight:bold;
font-size:20px;
text-shadow:4px 4px 10px #ccc;
box-shadow:4px 4px 10px #ccc;
}
</style>
</head>
<body>
<button class="btn">button1</button>
<button class="btn">button2</button>
<button class="btn">button3</button>
<button class="btn">button4</button>
<p id="wrap">
<p class="p">i am 1p</p>
<p class="p">i am 2p</p>
<p class="p">i am 3p</p>
<p class="p">i am 4p</p>
</p>
<script type="text/javascript">
var btns = document.getElementsByClassName("btn");
var ps = document.getElementsByClassName("p");
for(var i = 0; i < ps.length; i++) {
ps[i].style.display = "none";
}
//ps[0].style.display = "block";
for(var k = 0; k < btns.length; k++) {
/*閉包
*
for(var j = 0; j < ps.length; j++) {
ps[j].style.display = "none";
}
(function(k) {
btns[k].onmouseover = function() {
ps[k].style.display = "block";
}
btns[k].onmouseout = function() {
ps[k].style.display = "none";
}
})(k);
*/
btns[k].index = k;
btns[k].onmouseover = function() {
for(var j = 0; j < ps.length; j++) {
ps[j].style.display = "none";
}
ps[this.index].style.display = "block";
}
btns[k].onmouseout = function() {
for(var j = 0; j < ps.length; j++) {
ps[j].style.display = "none";
}
}
}
</script>
</body>
</html>
五、瀑佈流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
margin: 20px auto 0;
width: 90%;
overflow: hidden;
}
.wrap ul {
float: left;
width: 24%;
margin: 15px 0.5%;
list-style: none;
}
.wrap ul img {
width: 60%;
height:60%;
}
.wrap ul li {
font-size: 50px;
text-align: center;
background: rgba(12, 122, 11, 0.2);
margin: 15px 0;
box-shadow:0 0 2px 2px #ccc;
}
</style>
<script type="text/javascript">
var imgarr = ["1.png","2.png","3.png","4.png","5.png","6.png","7.png","8.png","9.png"];
window.onload = function() {
var wrap = document.getElementsByClassName('wrap')[0];
//隨機數函數
function random(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
var uls = document.getElementsByTagName('ul');
//創建li
function creatLi(count) {
for(var i = 0; i < count; i++) {
var li = document.createElement('li');
var img = document.createElement('img');
li.appendChild(img);
img.src = "img/"+imgarr[i%imgarr.length];
li.style.height = random(200, 300) + "px";
//li拼接ul中 ：高度最短的ul
//創建變量保存最短ul
var minHeightUl = uls[0];
for(var j = 0; j < uls.length; j++) {
if(minHeightUl.offsetHeight > uls[j].offsetHeight)
minHeightUl = uls[j];
}
minHeightUl.appendChild(li);
}
}
creatLi(60);
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
function getClinetTop() {
return document.documentElement.clientHeight || document.body.clientHeight || window.clientHeight;
}
window.onscroll = function() {
console.log(getScrollTop());
console.log(wrap.offsetHeight - getClinetTop());
console.log("h");
if(getScrollTop() >= wrap.offsetHeight - getClinetTop()) {
creatLi(10);
}
}
}
</script>
</head>
<body>
<p class="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</p>
</body>
</html>