随鼠标轮动翻动层————jquery小练习
闲来无事在网站上看见一个网页制作的不错,就仿照做来看看。特此记录下来。
亮点:随鼠标上下滚动,展示页面随之不同,翻动效果。
功能点:鼠标向上,向下判断事件。
css 代码
html {
overflow-y: hidden;
} .hide {
display: none;
} .show {
display: block;
} .box {
height: 650px;
width: 100%;
} .foot {
position: fixed;
height: 100px;
top: 150px;
right: 0px;
} ul li a:link {
text-decoration: none;
color:gold; } .foot ul li {
display: block;
width: 50px;
height: 30px;
border: solid 1px white;
padding: 5px;
text-align: center;
vertical-align: middle;
line-height: 30px;
cursor: pointer;
} .active {
color: white;
} #red {
background-color: brown;
} #orange {
background-color: burlywood;
} #yellow {
background-color: yellow;
} #green {
background-color: green;
} #blueness {
background-color: chartreuse;
} #blue {
background-color: blue;
} #purple {
background-color: darkmagenta;
}
js 代码
var index1 = 0;
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
//alert("滑轮向上滚动");
index1 = $("ul li a[class=active]").parent().index(); console.log(index1);
sliderIndex(index1, 0);
}
else { //当滑轮向下滚动时
//alert("滑轮向下滚动");
index1 = $("ul li a[class=active]").parent().index();
console.log(index1);
sliderIndex(index1, 1);
}
}
//} else if (e.detail) { //Firefox滑轮事件
// if (e.detail > 0) { //当滑轮向上滚动时
// alert("滑轮向上滚动");
// }
// if (e.detail < 0) { //当滑轮向下滚动时
// alert("滑轮向下滚动");
// }
//}
}
//给页面绑定滑轮滚动事件
//if (document.addEventListener) {//firefox
// document.addEventListener('DOMMouseScroll', scrollFunc, false);
//}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = scrollFunc; function sliderIndex(index, type) {
if (index == 0 && type == 0) {
alert("到顶了!");
}
else if (index >= 0) { var num = 0;
if (type == 0) {
num = index - 1;
}
else {
num = index + 1;
}
if (num == 7)
num = 0; $(".foot ul li a").removeClass("active");
$(".foot ul li a:eq(" + num + ")").addClass("active"); if (type==0)
{
$("#main div:eq(" + num + ")").slideDown("slow");
}
else
$("#main div:eq(" + index + ")").slideUp("slow"); }
}
$(function () {
$(".foot ul li a").click(function () {
$(".foot ul li a").removeClass("active");
$(this).addClass("active");
var box = $(this).attr("data-id");
console.log(box);
$("#" + box).slideUp("slow"); }) })
html 代码
<div id="main">
<div id="red" class="box"></div>
<div id="orange" class="box"> </div>
<div id="yellow" class="box"></div>
<div id="green" class="box"> </div>
<div id="blueness" class="box"></div>
<div id="blue" class="box"> </div>
<div id="purple" class="box"></div>
</div>
<div class="foot">
<ul>
<li data-id="red"> <a href="#red" class="active">赤</a> </li>
<li data-id="orange"> <a href="#orange">橙 </a></li>
<li data-id="yellow"> <a href="#yellow">黄</a> </li>
<li data-id="green"> <a href="#green">绿</a> </li>
<li data-id="blueness"> <a href="#blueness">青</a> </li>
<li data-id="blue"> <a href="#blue">蓝</a> </li>
<li data-id="purple"> <a href="#purple">紫</a></li>
</ul>
</div>
随鼠标轮动翻动层————jquery小练习的更多相关文章
- Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
- jquery鼠标经过弹出层写法
jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...
- jQuery小例
jQuery小例子 使用前,请先引用jquery 1,map遍历数组 2,jQuery对象与DOM对象才做元素和互转 3,prevall与nextall 4,jquery版的星星评分控件 5,jq ...
- 10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...
- 人人必知的10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...
- 程序员都会的 35 个 jQuery 小技巧
收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("cont ...
- 几个 jQuery 小提示和技巧
几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...
- 必知的 15 个jQuery小技巧(干货)
jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...
- 黑色半透明镂空遮罩指引效果实现jQuery小插件
/*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...
随机推荐
- KEGG数据库的使用方法与介绍
KEGG数据库的使用方法与介绍 KEGG的数据 KEGG中的pathway是根据相关知识手绘的,这里的手绘的意思可能是指人工以特定的语言格式来确定通路各组件的联系:基因组信息主要是从NCBI等数据库中 ...
- centos 安装redis(一台机器可以安装多个redis)
我在运行时redis版本是2.8 操作前设置以管理员身份: 打开终端输入 su - 安装redis需要确保系统已经安装了(gcc gcc-c++)# yum -y install gcc gcc-c+ ...
- ACM/ICPC 之 伞兵-最小割转最大流(POJ3308)
//以行列建点,伞兵位置为单向边-利用对数将乘积转加法 //最小割转最大流 //Time:63Ms Memory:792K #include<iostream> #include<c ...
- PHP日期与时间
时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp).Unix时间戳(Unix timestamp),或称Uni ...
- Android Telephony —— 手机信号实时变化源码分析过程记录
源码版本:4.4 跳过InCallActivity等UI实现.先看service以及底层. 1, 在frameworks/opt下面会发现如下文件列表: ./telephony/src/java/co ...
- userdel 连同家目录一起删除
userdel -r xxx 连同家目录一起删除
- Linux常用命令学习3---(文件的压缩和解压缩命令zip unzip tar、关机和重启命令shutdown reboot……)
1.压缩和解压缩命令 常用压缩格式:.zip..gz..bz2..tar.gz..tar.bz2..rar .zip格式压缩和解压缩命令 zip 压缩文件名 源文件:压缩文件 ...
- Pyqt SpVoice朗读功能
用Pyqt 做一个读取系统剪贴板内容,然后通过语音合成(TTS)朗读出剪贴板的内容 知识要点 SpVoice SpVoice类是支持语音合成(TTS)的核心类.通过SpVoice对象调用TTS引擎,从 ...
- Python 元组
#不可变序列-----元组 tuple #元组和列表十分相似,元组和字符串一样都是不可变的. #元组由不同的元素组成,每个元素可以存储不同类型的数据,例如 #字符串.数字和元组 #元组通常代表一行数据 ...
- Quartz 之Quartz Cron表达式
说到这个Quartz了,必不可少的就要说到我们的Triggger触发器,相信大家也都知道,我们在之前也说过了,Trigger又有两个子类,也就是两种方式,分别是:SimpleTrigger和CronT ...