下拉菜单、遮罩层、轮播图、canvas实现拼图、渐变色背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/css.css" />
</head>
<body onload="init()">
<ul id="navul">
<div class="dropdown">
<a class="dropbtn">更多..</a>
<div class="dropdown-content">
<a href="">百度百科</a>
<a href="#zyzp">主要作品</a>
</div>
</div>
<li class="navli">
<a id="a1" href="#">mv欣赏</a>
<div id="shade"></div>
<div id="modal">
<span style="font-size: 30px;margin-left: 250px;">mv欣赏<a id="a2" href="#" style="float: right;">关闭</a></span>
<video controls=controls; width="600px">
<source src=" vedio/姚晨,林更新 - 一生所爱.mp4 " type="video/mp4 "></source>
<source src="vedio/姚晨,林更新 - 一生所爱.webm " type="video/ogg "></source>
当前浏览器不支持 video直接播放,点击这里下载视频:
<a href="vedio/姚晨,林更新 - 一生所爱.webm ">下载视频</a>
</video>
</div>
</li>
<li class="navli">
<a href="#lunbo">图册</a>
</li>
<li class="navli">
<a href="#jianjie">个人简介</a>
</li>
</ul>
<div id="jianjie">
<div id="jj">
<div id="lgx">
林更新
</div>
<p>
林更新(Kenny Lin),1988年2月13日出生于中国辽宁省沈阳市铁西区,演员,毕业于上海戏剧学院话剧影视表演专业本科。 ...
<a href="#jbxx">>>></a>
</p>
</div>
<audio id="music" src="audio/姚晨,林更新 - 一生所爱.mp3" loop="loop" controls="controls"></audio>
</div>
<div id="jbxx">
<h2>基本信息</h2>
<p>
林更新(Kenny Lin),1988年2月13日出生于中国辽宁省沈阳市铁西区,演员,毕业于上海戏剧学院话剧影视表演专业本科。
</p>
</div>
<div id="lunbo">
<h2 style="margin-top: 0px;">图册</h2>
<div class="lubo_container">
<img class="lbimg" src="img/111.jpg"></img>
<ol class="lubo_idx">
<li id="li_1" style="border-color: bisque;"></li>
<li id="li_2"></li>
<li id="li_3"></li>
<li id="li_4"></li>
</ol>
</div>
<script type="text/javascript">
var index = 1; //用变量记录播放到第几张了
var imgs = ['111.jpg', '333.jpg', '1 (1).jpg', '666.jpg'];
var img = document.querySelector(".lubo_container img");
var lis = document.querySelectorAll(".lubo_idx li");
var intervalId = window.setInterval(function() {
index++;
if(index == imgs.length + 1) {
index = 1;
}
//循环切换图片,同时对应小圈要修改样式
img.src = "img/" + imgs[index - 1];
//修改小圈
changeCircle();
}, 2000);
//2. 鼠标移动上去,停止周期性切换
img.onmouseover = function() {
//停止周期性切换
window.clearInterval(intervalId);
}
//3. 鼠标移开图片,继续周期性切换
img.onmouseout = function() {
//每次设置新时钟,id已经变了,因而要保存下来
intervalId = window.setInterval(function() {
index++;
if(index == imgs.length + 1) {
index = 1;
}
//循环切换图片,同时对应小圈要修改样式
img.src = "img/" + imgs[index - 1];
//修改小圈
changeCircle();
}, 2000);
console.log(intervalId);
}
//4. 点击对应圈,切换到对应的图片
for(var j = 0; j < lis.length; j++) {
lis[j].onclick = function(event) {
index = event.target.id.substr(event.target.id.indexOf("_") + 1) - 0;
img.src = "img/" + imgs[index - 1];
changeCircle();
}
}
//修改小圈样式
function changeCircle() {
//修改小圈
for(var i = 0; i < lis.length; i++) {
lis[i].style.borderColor = "#BFEFFF";
}
lis[index - 1].style.borderColor = "bisque";
}
</script>
</div>
<div id="wenzi">
<div id="zyzp">
<h2>主要作品</h2>
<div style="float: left;">
<h3>电影</h3>
<ul >
<li>狄仁杰之四大天王</li>
<li>西游伏妖篇</li>
<li>长城</li>
<li>三少爷的剑</li>
<li>快手枪手快枪手</li>
<li>智取威虎山3D</li>
</ul>
</div>
<div style="float: left; margin-left:3%;">
<h3>电视剧</h3>
<ul>
<li>楚乔传</li>
<li>武神赵子龙</li>
<li>舞乐传奇</li>
<li>姐姐立正先前走</li>
<li>轩辕剑之天之痕</li>
<li>步步惊心</li>
</ul>
</div>
</div>
<div id="pt">
<h2 id ="dj">你是真爱粉么?</h2>
<canvas id="canvas" height="450px"></canvas>
</div>
</div>
<script type="text/javascript">
const PUZZLE_DIFFICULTY = 4;
const PUZZLE_HOVER_TINT = '#009900';
var _canvas;
var _stage;
var _img;
var _pieces;
var _puzzleWidth;
var _puzzleHeight;
var _pieceWidth;
var _pieceHeight;
var _currentPiece;
var _currentDropPiece;
var _mouse;
function init() {
var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
a1.onclick = shield;
a2.onclick = cancel_shield;
function shield(e) {
e.preventDefault();
var shade = document.getElementById("shade");
shade.style.display = "block";
var modal = document.getElementById("modal");
modal.style.display = "block";
}
function cancel_shield(e) {
e.preventDefault();
var shade = document.getElementById("shade");
shade.style.display = "none";
var modal = document.getElementById("modal");
modal.style.display = "none";
}
_img = new Image();
_img.addEventListener('load', onImage, false);
_img.src = "img/1 (3).jpg";
}
function onImage(e) {
_pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
_pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
_puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
_puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
setCanvas();
initPuzzle();
}
function setCanvas() {
_canvas = document.getElementById('canvas');
_stage = _canvas.getContext('2d');
_canvas.width = _puzzleWidth;
_canvas.height = _puzzleHeight;
_canvas.style.border = "1px solid black";
}
function initPuzzle() {
_pieces = [];
_mouse = {
x: 0,
y: 0
};
_currentPiece = null;
_currentDropPiece = null;
_stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight, 0, 0, _puzzleWidth, _puzzleHeight);
createTitle("想证明自己是真爱?come on!");
buildPieces();
}
function createTitle(msg) {
_stage.fillStyle = "#000000";
_stage.globalAlpha = .4;
_stage.fillRect(100, _puzzleHeight - 40, _puzzleWidth - 200, 40);
_stage.fillStyle = "#FFFFFF";
_stage.globalAlpha = 1;
_stage.textAlign = "center";
_stage.textBaseline = "middle";
_stage.font = "20px Arial";
_stage.fillText(msg, _puzzleWidth / 2, _puzzleHeight - 20);
}
function buildPieces() {
var i;
var piece;
var xPos = 0;
var yPos = 0;
for(i = 0; i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY; i++) {
piece = {};
piece.sx = xPos;
piece.sy = yPos;
_pieces.push(piece);
xPos += _pieceWidth;
if(xPos >= _puzzleWidth) {
xPos = 0;
yPos += _pieceHeight;
}
}
document.getElementById("dj").onclick=test= shufflePuzzle;
}
for(i = 0; i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY; i++) {
piece = {};
piece.sx = xPos;
piece.sy = yPos;
_pieces.push(piece);
xPos += _pieceWidth;
if(xPos >= _puzzleWidth) {
xPos = 0;
yPos += _pieceHeight;
}
}
function shufflePuzzle() {
_pieces = shuffleArray(_pieces);
_stage.clearRect(0, 0, _puzzleWidth, _puzzleHeight);
var i;
var piece;
var xPos = 0;
var yPos = 0;
for(i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
piece.xPos = xPos;
piece.yPos = yPos;
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, xPos, yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(xPos, yPos, _pieceWidth, _pieceHeight);
xPos += _pieceWidth;
if(xPos >= _puzzleWidth) {
xPos = 0;
yPos += _pieceHeight;
}
}
document.onmousedown = onPuzzleClick;
}
function shuffleArray(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
function onPuzzleClick(e) {
if(e.layerX || e.layerX == 0) {
_mouse.x = e.layerX - _canvas.offsetLeft;
_mouse.y = e.layerY - _canvas.offsetTop;
} else if(e.offsetX || e.offsetX == 0) {
_mouse.x = e.offsetX - _canvas.offsetLeft;
_mouse.y = e.offsetY - _canvas.offsetTop;
}
_currentPiece = checkPieceClicked();
if(_currentPiece != null) {
_stage.clearRect(_currentPiece.xPos, _currentPiece.yPos, _pieceWidth, _pieceHeight);
_stage.save();
_stage.globalAlpha = .9;
_stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
_stage.restore();
document.onmousemove = updatePuzzle;
document.onmouseup = pieceDropped;
}
}
function checkPieceClicked() {
var i;
var piece;
for(i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)) {
//PIECE NOT HIT
} else {
return piece;
}
}
return null;
}
function updatePuzzle(e) {
_currentDropPiece = null;
if(e.layerX || e.layerX == 0) {
_mouse.x = e.layerX - _canvas.offsetLeft;
_mouse.y = e.layerY - _canvas.offsetTop;
} else if(e.offsetX || e.offsetX == 0) {
_mouse.x = e.offsetX - _canvas.offsetLeft;
_mouse.y = e.offsetY - _canvas.offsetTop;
}
_stage.clearRect(0, 0, _puzzleWidth, _puzzleHeight);
var i;
var piece;
for(i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
if(piece == _currentPiece) {
continue;
}
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
if(_currentDropPiece == null) {
if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)) {
//NOT OVER
} else {
_currentDropPiece = piece;
_stage.save();
_stage.globalAlpha = .4;
_stage.fillStyle = PUZZLE_HOVER_TINT;
_stage.fillRect(_currentDropPiece.xPos, _currentDropPiece.yPos, _pieceWidth, _pieceHeight);
_stage.restore();
}
}
}
_stage.save();
_stage.globalAlpha = .6;
_stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
_stage.restore();
_stage.strokeRect(_mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
}
_currentDropPiece = null;
if(e.layerX || e.layerX == 0) {
_mouse.x = e.layerX - _canvas.offsetLeft;
_mouse.y = e.layerY - _canvas.offsetTop;
} else if(e.offsetX || e.offsetX == 0) {
_mouse.x = e.offsetX - _canvas.offsetLeft;
_mouse.y = e.offsetY - _canvas.offsetTop;
}
var i;
var piece;
for(i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
if(piece == _currentPiece) {
continue;
}
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
if(_currentDropPiece == null) {
if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)) {
//NOT OVER
} else {
_currentDropPiece = piece;
_stage.save();
_stage.globalAlpha = .4;
_stage.fillStyle = PUZZLE_HOVER_TINT;
_stage.fillRect(_currentDropPiece.xPos, _currentDropPiece.yPos, _pieceWidth, _pieceHeight);
_stage.restore();
}
}
_stage.save();
_stage.globalAlpha = .6;
_stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
_stage.restore();
_stage.strokeRect(_mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
}
function pieceDropped(e) {
document.onmousemove = null;
document.onmouseup = null;
if(_currentDropPiece != null) {
var tmp = {
xPos: _currentPiece.xPos,
yPos: _currentPiece.yPos
};
_currentPiece.xPos = _currentDropPiece.xPos;
_currentPiece.yPos = _currentDropPiece.yPos;
_currentDropPiece.xPos = tmp.xPos;
_currentDropPiece.yPos = tmp.yPos;
}
resetPuzzleAndCheckWin();
}
function resetPuzzleAndCheckWin() {
_stage.clearRect(0, 0, _puzzleWidth, _puzzleHeight);
var gameWin = true;
var i;
var piece;
for(i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
if(piece.xPos != piece.sx || piece.yPos != piece.sy) {
gameWin = false;
}
}
if(gameWin) {
setTimeout(gameOver, 500);
}
}
function gameOver() {
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
createTitle("Yes!You are!");
//initPuzzle();
}
</script>
</body>
</html>
css代码:
h2 {
color: #4D4D4D;
}
h3 {
color: #4D4D4D;
}
body {
padding: 2%;
font-family: "楷体";
font-size: 20px;
background-color: #FFF5EE;
}
#shade {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display: none;
}
#modal {
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 601px;
height: 400px;
margin: auto;
margin: 5% 30%;
display: none;
background-color: skyblue;
padding: 5px;
}
#a2 {
font-size: 20px;
}
/*导航栏*/
#navul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #BFEFFF;
font-size: 20px;
}
.navli {
float: right;
}
.navli:hover {
background-color: #f1f1f1;
}
.dropbtn:hover {
background-color: #f1f1f1;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
float: right;
padding-right: 5px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #BFEFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content :hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*简介*/
#jianjie {
width: 100%;
height: 500px;
background-image: url(../img/222.jpg.png);
background-repeat: no-repeat;
/*background-attachment: fixed;*/
background-size: cover;
}
#music {
width: 100%;
height: 20px;
padding: 3% 0;
}
#jj {
width: 40%;
padding: 3% 6%;
}
#lgx {
padding: 5% 10%;
font-size: 50px;
color: #000000;
}
/*mv*/
.video {
width: 100%;
padding: 20%;
}
/*轮播*/
#lunbo {
/* border: dashed #BFEFFF 20px;*/
background-color: #BFEFFF;
/*margin-top:20px;*/
padding: 0px 20px;
padding-bottom: 10px;
}
.lubo_container {
position: relative;
width: 100%;
}
.lubo_container .lubo_idx {
list-style-type: none;
padding: 0px;
margin: 0px;
position: absolute;
left: 50%;
bottom: 20px;
margin-left: -60px;
}
.lubo_container .lubo_idx li {
border: 10px solid #BFEFFF;
width: 0px;
border-radius: 10px;
float: left;
margin-left: 10px;
z-index: 2;
}
.lbimg {
width: 100%;
}
/*文字*/
#wenzi {
width: 100%;
height: 450px;
background: -webkit-linear-gradient(#BFEFFF, white);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#BFEFFF, white);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#BFEFFF, white);
/* Firefox 3.6 - 15 */
background: linear-gradient(#BFEFFF, white);
/* 标准的语法(必须放在最后) */
}
#jbxx {
padding: 4%;
background-color: #BFEFFF;
/*width: 45%;
float:left;*/
}
#pt {
/*margin-left:50px ;*/
float: left;
}
#zyzp {
padding: 2%;
width: 40%;
float: left;
margin-left: 5%
}