Html5--网页

最新推荐文章于 2023-09-02 22:42:10 发布

ZiMoXuan_

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量340

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/ZiMoXuan_/article/details/80899246

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下拉菜单、遮罩层、轮播图、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">&gt;&gt;&gt;</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%
}

1 (1).jpg
1 (3).jpg

222.jpg.png

ZiMoXuan_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5--网页

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp
复制链接

扫一扫

专栏目录