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)


相关推荐

  • 史上最全的中高级JAVA工程师-面试题汇总

    史上最全的中高级JAVA工程师-面试题汇总史上最全的java工程师面试题汇总,纯个人总结,精准无误。适合中高级JAVA工程师。

  • 数据库优化 – SQL优化[通俗易懂]

    数据库优化 – SQL优化[通俗易懂]以实际SQL入手,带你一步一步走上SQL优化之路!

  • 电驴怎么显示服务器列表,(转)如何更新电驴服务器列表(eMule Server List)

    电驴怎么显示服务器列表,(转)如何更新电驴服务器列表(eMule Server List)电驴上的丰富资源让我们眼馋,尤其是一些国外的大片资源。但是往往出现不能下载的情况。其实原因就是出在电驴服务器列表上,我们常用的电驴服务器列表都是www.emule.org.cn提供的他并不包含一些国外的服务器列表,所以就引起了某些国外资源下载不了。其实只要大家更新一下电驴服务器列表就可以解决这个小问题。上哪去找电驴服务器列表呢?当然有网站为我们做好了服务,ed2k.2x4u.de就是这样的一个网站…

  • NVIC和EXTI

    NVIC和EXTINVIC:NestVectorInterruptController,嵌套中断向量控制器,是用来管理中断嵌套的,核心任务在于其优先级的管理。NVIC给每个中断赋予先占优先级(抢占优先级)和次占优先级(响应优先级)。CM3内核支持256个中断,其中包含了16个内核中断和240个外部中断,并且具有256级的可编程中断设置。但STM32并没有使用CM3内核的全部东西,而是只用了它的一部分,STM

  • python 安装CV2

    通常一个指令pipintsallopencv-python大多数的情况下,是可以的安装成功CV2,可是有时,这个指令安装的pip会出现CV2版本与python安装的版本,不匹配导致,你安装的opencv不成功,个人示例:1.先更新pippython-mpipinstall–upgradepip 2.从清华的镜像 `https://pypi.tuna.tsingh…

  • 硬盘安装Linux(ubuntu,centos)[通俗易懂]

    硬盘安装Linux(ubuntu,centos)[通俗易懂]硬盘安装Linux(ubuntu,centos) 硬盘安装Linux使用硬盘安装Linux最大的好处不只是方便,是快速。之前使用U盘安装,很慢,没有记录具体时间。Ubuntu区别不大,本身比较小,安装介质只有2G(ubuntu18.10);CentOS区别明显,最大的安装ISO文件9G(CentOS7.5);说明:系统对文件系统的支持:Ubunt…

发表回复

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

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