XSwitch全屏滚动特效--兼容IE8和Chrome浏览器

最新推荐文章于 2021-03-24 11:34:03 发布

zyytaiyame

最新推荐文章于 2021-03-24 11:34:03 发布

阅读量1.6k

点赞数

文章标签：图片电子浏览器 ie 8 chrome

本文链接：https://blog.csdn.net/zyytaiyame/article/details/54098612

版权

XSwitch全屏滚动特效-兼容IE8和Chrome浏览器电子图书翻书页的JS特效，由于IE支持太好，FLASH未来要淘汰，所以折中用了一个全屏滚动特效来替换，因为电子图书大部分也是图片，图片采用全屏拉伸 XSwitch <

摘要由CSDN通过智能技术生成

XSwitch全屏滚动特效-兼容IE8和Chrome浏览器

电子图书翻书页的JS特效，由于IE支持太好，FLASH未来要淘汰，所以折中用了一个全屏滚动特效来替换，因为电子图书大部分也是图片，图片采用全屏拉伸

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XSwitch</title>
    <style media="screen">
        /*简单reset*/
        * {
            margin: 0;
            padding: 0;
        }
        /*必须，关系到单个page能否全屏显示*/
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        /*以下样式用来设置slider样式，可自行修改*/
        .pages {
            position:fixed;
            right: 10px;
            top: 49%;
            list-style: none;
        }
        .pages li {
            width: 8px;
            height: 8px;
            border-radius: 10%;
            background: #2aff00;
            margin: 8px 0px 0px 7px;
        }
        .pages li.active {
            margin-left: 0;
            width: 14px;
            height: 14px;
            border: 4px solid #2aff00;
            background: none;
        }
        #container,
        .sections,
        .section {
            /*必须，兼容，在浏览器不支持transform属性时，通过改变top/left完成滑动动画*/
            position: relative;
            /*必须，关系到单个page能否全屏显示*/
            height: 100%;
        }
        .section {
            /*有背景图时必须，关系到背景图能够全屏显示*/
            background-color: #000;
            background-si

最低0.47元/天解锁文章

zyytaiyame

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
XSwitch全屏滚动特效--兼容IE8和Chrome浏览器

XSwitch全屏滚动特效-兼容IE8和Chrome浏览器电子图书翻书页的JS特效，由于IE支持太好，FLASH未来要淘汰，所以折中用了一个全屏滚动特效来替换，因为电子图书大部分也是图片，图片采用全屏拉伸<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>XSwitch</title> <
复制链接

扫一扫