js实现网页全屏切换（平滑过渡），鼠标滚动切换

最新推荐文章于 2023-08-09 16:40:29 发布

denghut882925

最新推荐文章于 2023-08-09 16:40:29 发布

阅读量1.2k

点赞数 2

原文链接：http://www.cnblogs.com/ertingbo/p/7093410.html

版权

实现效果为页面平滑过渡全屏切换，点击导航和鼠标滚动都可以切换。

效果图：

html代码：

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome=1"><!--告诉ie使用新的渲染方式，防止低版本的ie不能使用css3-->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css"/>
    <link href="css/css.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="nav">
        <input type="radio" name="radio-set" checked id="nav1">
        <a href="#panel1">导航1</a>
        <input type="radio" name="radio-set" id="nav2">
        <a href="#panel2">导航2</a>
        <input type="radio" name="radio-set" id="nav3">
        <a href="#panel3">导航3</a>
        <input type="radio" name="radio-set" id="nav4">
        <a href="#panel4">导航4</a>
        <input type="radio" name="radio-set" id="nav5">
        <a href="#panel5">导航5</a>
    <div class="scroll">
        <section class="panel" id="panel1">
            <div class="icon" data-icon="a"></div>
            <h1>Serendipity1</h1>
            <p>you are my sunshine</

最低0.47元/天解锁文章

denghut882925

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js实现网页全屏切换（平滑过渡），鼠标滚动切换

实现效果为页面平滑过渡全屏切换，点击导航和鼠标滚动都可以切换。效果图：html代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta h...
复制链接

扫一扫