jQuery鼠标滚动垂直全屏切换代码

体验效果:http://hovertree.com/texiao/jquery/68/源码下载:http://hovertree.com/h/bjaf/f643upc4.htm代码如下:转自:htt

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

体验效果:
http://hovertree.com/texiao/jquery/68/

源码下载:
http://hovertree.com/h/bjaf/f643upc4.htm

代码如下:

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery鼠标滚动垂直全屏切换代码 - 何问起</title><base target="_blank" /> <style type="text/css"> h1, body, html { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } h1 { font-size: 2em; font-weight: normal; } p { font-size: 1em; margin: 0.5em 0 2em 0; } #container, .section { height: 100%; position: relative; } #section0, #section1, #section2, #section3 { background-color: #000; background-size: cover; background-position: 50% 50%; } #section0 { background-color: #024BCE; color: #fff; text-shadow: 1px 1px 1px #333; } #section1 { color: #fff; text-shadow: 1px 1px 1px #333; background-color: #31B81D; } #section2 { background-color: #01B5F0; color: #fff; text-shadow: 1px 1px 1px #666; } #section3 { color: #008283; background-color: #5D0FF1; text-shadow: 1px 1px 1px #fff; } #section0 p { color: #F1FF00; } #section3 p { color: #00A3AF; } .left { float: left; } .intro { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } #pages { position: fixed; right: 10px; top: 50%; list-style: none; } #pages li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 0 0 10px 5px; } #pages li.active { width: 14px; height: 14px; border: 2px solid #FFFE00; background: none; margin-left: 0; } #section0 .title { -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-animation: sectitle0 1s ease-in-out 100ms forwards; animation: sectitle0 1s ease-in-out 100ms forwards; } #section0 p { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-animation: sec0 1s ease-in-out 100ms forwards; animation: sec0 1s ease-in-out 100ms forwards; } @-webkit-keyframes sectitle0 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes sectitle0 { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes sec0 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes sec0 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .hovertreecode{text-align:left;width:400px;margin:5px auto;border:solid green 1px;font-size:16px;} a{color:greenyellow} </style> </head> <body> <div id="container"> <div class="section active" id="section0"> <div class="intro"> <h1 class="title">jQuery简单的全屏滚动翻页</h1> <p> http://hovertree.com <br />请滚动鼠标滚轮。 </p> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等新版浏览器。</p> <p>来源:<a href="http://hovertree.com" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/switchpage.htm">原文</a></p> </div> </div> <div class="section" id="section1"> <div class="intro"> <h1 class="title">Section Two</h1> <p>This is Section Two. keleyi.com</p> <img src="http://hovertree.com/texiao/jquery/68/images/hovertree1.jpg" alt="代码"/> </div> </div> <div class="section" id="section2"> <div class="intro"> <h1 class="title">Section Three</h1> <p>This is Section Three</p> <pre class="hovertreecode"><span style="color: #008000;">/*</span><span style="color: #008000;"> 使用代码 by 何问起 </span><span style="color: #008000;">*/</span><span style="color: #000000;"> $(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){ $(</span>"#container"<span style="color: #000000;">).switchPage({ </span>'loop' : <span style="color: #0000ff;">true</span><span style="color: #000000;">, </span>'keyboard' : <span style="color: #0000ff;">true</span><span style="color: #000000;">, </span>'direction' : 'horizontal'<span style="color: #000000;"> }); });</span></pre> </div> </div> </div> <script src="http://down.hovertree.com/jquery/jquery-2.2.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/switchPage.js"></script> <script type="text/javascript"> $(function(){ $("#container").switchPage({ 'loop' : true, 'keyboard' : true, 'direction' : 'horizontal' }); }); </script> </body> </html>

转自:http://hovertree.com/h/bjaf/switchpage.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120525.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 疫后本地生活踏入拐点,全面升级的饿了么助力身边经济

    疫后本地生活踏入拐点,全面升级的饿了么助力身边经济7月10日饿了么宣布全面升级,从餐饮外卖平台转变为解决用户身边一切即时需求的生活服务平台,并将在未来大力布局“身边经济”,打造应有尽有的生活圈。眼下,整个经济正在迎来疫情后的反弹复苏,以餐饮、生鲜、零售为代表的消费行业加速反弹,饿了么在此时宣布全面升级,可谓顺势而为,在笔者看来,此次全面升级,有两大看点。在后疫情时代,饿了么从餐饮外卖平台转型同城生活服务,也将对整个本地生活服务会产生深刻的影响。看点1:饿了么为什么在此时宣布全面升级?在零售的战场上,时机和火候往往决定一切。饿了么此次..

  • 滴滴全民拼车日背后的运维技术揭秘

    滴滴全民拼车日背后的运维技术揭秘桔妹导读:抗击疫情,桔妹提醒大家出门带好口罩,勤洗手,多通风。武汉加油!中国加油!在大家开工之际,桔妹邀您阅读滴滴全民拼车日背后的运维技术揭秘。滴滴在2019年12月举办了空前盛大的全民…

  • 校验非空的注解@NotNull怎么取得自定义的message[通俗易懂]

    校验非空的注解@NotNull怎么取得自定义的message[通俗易懂]由于项目表单需要校验字段过多,一个一个去判空太麻烦,所以用了@NotNull注解,字段非空会抛出MethodArgumentNotValidException异常。接下来要取得@NotNull(message=“自定义异常”)里的message内容给前端显示直接贴上代码:publicStringgetMessage(MethodArgumentNotValidExceptionexc…

  • python 画图–简单开始及折线图[通俗易懂]

    python 画图–简单开始及折线图[通俗易懂]python画图一、环境准备      linuxubuntu下需安装下面三个包:         Numpy,Scipy,Matplotlib     分别输入下面的代码进行安装:pipinstallnumpypipinstallscipysudoapt-getinstallpython-matpl

  • DHCP Option 60 的理解

    DHCP Option 60 的理解

    2021年11月14日
  • Python缩进规则_python任意代码都可以缩进

    Python缩进规则_python任意代码都可以缩进具有相同缩进的代码被视为代码块。缩进在Python中具有严格的习惯写法:4个空格,不要使用Tabif语句后接表达式,然后用:表示代码块的开始。

    2022年10月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号