当前位置:首页 > 编程教程 > javascript技术文章 > CSS3+JavaScript实现翻页幻灯片效果

CSS3+JavaScript实现翻页幻灯片

  • 发布时间:
  • 作者:码农之家
  • 点击:106

这篇文章主要知识点是关于css3、JavaScript、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP、MySQL与JavaScript学习手册
  • 类型:PHP大小:76 MB格式:PDF作者:Robin Nixon
立即下载

CSS3+JavaScript实现翻页幻灯片效果

先上效果图

CSS3+JavaScript实现翻页幻灯片效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #content{
        width: 500px;
        height: 300px;
        margin: 40px auto;
        position: relative;
        transform-style: preserve-3d;
      }
      #content>div{
        width: 100%;
        height: 100%;
        position: absolute;
        transform-origin: center bottom;
      }
      #content img{
        width: 100%;
        height: 100%;
      }
      #next{
        position: absolute;
        top:190px;
        left: calc(33% - 60px);
      }
      #prev{
        position: absolute;
        top: 190px;
        left: calc(68% + 30px);
      }
      @keyframes next{  //创建一个动画这是一个翻到下面的效果
        from{
          -wbelit-transform: perspective(1000px) rotateX(0deg); /* 开始位置是 0°*/
          opacity: 1; //初始透明为1
        }
        to{
          -webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/
          opacity: 0; //结束透明为0
        }
      }
      @keyframes prev{ //创建一个由上边翻到上边的动画
        0%{
          -webkit-transform: perspective(1000px) rotateX(180deg); /* 初始开始位置 */
          opacity:0;    //初始为透明
        }
        57%
        {
          -webkit-transform: perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */
          opacity:1; //透明已经为1 了
        }
        66%
        {
          -webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */
        }
        74%
        {
          -webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */
        }
        81%
        {
          -webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */
        }
        87%
        {
          -webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */
        }
        92%
        {
          -webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */
        }
        96%
        {
          -webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */
        }
        100%
        {
          -webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回归 0° */
        }<br>                                        
      }
      .next{
        animation: next 1s ease 1 normal 0s; /* 执行向下的动画 */
        transform: rotateX(-180deg); /* 因为初始位置是0 但当你执行完动画还会回到原位 所以它转到哪里就把他设在哪里不要再让它回去了 */
        opacity: 0;
      }
      .prev{
        animation: prev 1.2s ease 1 normal 0s; /* 执行向上的动画 */
        transform: rotateX(0deg); /* 同上 */
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <button id="next">←</button><button id="prev">→</button>
    <div id="content">
      <div class="prev"><img src="images/012.jpeg"></div> <!-- 设置默认的第一页 -->
      <div class="next"><img src="images/017.jpeg"></div>
      <div class="next"><img src="images/020.jpeg"></div>
      <div class="next"><img src="images/027.jpeg"></div>
      <div class="next"><img src="images/0df3d7ca7bcb0a46ce09bc1e6e63f6246b60afe9.jpg"></div>
    </div>
    <script>
      window.onload=function(){
        var next=document.getElementById("next");
        var prev=document.getElementById("prev");
        var content=document.getElementById("content");
        var oDiv=content.getElementsByTagName("div");
        var x=0;
        next.onclick=function(){  //当向下翻页时
          oDiv[x].setAttribute("class","next"); //第一个页 设置class名让他向下走去
          x++
          if(x>oDiv.length-1){
            x=0
          }
          oDiv[x].setAttribute("class","prev"); //++过后让他的下一个页面起来
        }
        prev.onclick=function(){    //同上只是++变--
          oDiv[x].setAttribute("class","next");
          x--
          if(x<0){
            x=oDiv.length-1
          }
          oDiv[x].setAttribute("class","prev");
        }
      }
    </script>
  </body>
</html>

以上所述是小编给大家介绍的CSS3+JavaScript实现翻页幻灯片效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

JavaScript 相关电子书
学习笔记
网友NO.499194

javascript+html5+css3自定义弹出窗口效果

本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下 效果图: 源码: 1.demo.jsp %@ page contentType="text/html;charset=UTF-8" language="java" %htmlhead title自定义弹出窗口/title script type="text/javascript" src="js/myLayer.js"/script style type="text/css" button{ width: 50px; height: 50px; border: 1px solid blue; background-color: blue; color: red; border-radius: 5px; -webkit-box-shadow: 2px 2px 2px gray; -moz-box-shadow: 2px 2px 2px gray ; box-shadow: 2px 2px 2px gray ; } button:hover{ background-color: green; cursor: pointer; } /style script type="text/javascript" function openWindow() { new MyLayer({ top:"10%", left:"10%", width:"80%", height:"80%", title:"我的标题", content:"操作成功" }).openLayer(); } /script/headbody button type="button" onclick="openWindow()"打开弹窗/button/body/html 2.myLayer.js /** * Created by zhuwenqi on 2017/6/16. *//** * @param options 弹窗基本配置信息 * @……

网友NO.609510

javascript+html5+css3自定义提示窗口

javascript自定义提示窗口效果图: 源码: 1.demo.jsp %@ page contentType="text/html;charset=UTF-8" language="java" %htmlhead title自定义提示窗口/title script type="text/javascript" src="js/myAlert.js"/script script type="text/javascript" function bodyOnload() { var myInput = document.getElementById("myInput"); myInput.style.border = "none"; myInput.style.backgroundColor = "rgba(223, 230, 223, 0.3)"; myInput.value = "请输入你的名字:"; myInput.onfocus = function () { myInput.style.outline = "none"; myInput.value = ""; }; var image_div = document.createElement("div"); image_div.style.width = myInput.offsetHeight ; image_div.style.height = myInput.offsetHeight; image_div.style.float = "right"; image_div.style.cursor = "pointer"; image_div.onclick = function () { new MyAlert().alert("系统提示","click the image_div",5000); }; var outer_div = document.createElement("div"); outer_div.style.border = "1px solid red"; outer_div.style.width = parseInt(myInput.offset……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

idea注册码