jQuery鼠标换轮滚动事件
1、鼠标混轮滚动事件
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery整屏滚动事件</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
// 鼠标滑轮滚动事件
var i=0;
$(window).mousewheel(function (event,dat) {
console.log(dat)
})
</script>
</head>
<body>
</body>
</html>
显示效果如下所示：
2、添加class属性
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery整屏滚动事件</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: yellow;
margin: 50px auto 0;
transition: all 1s ease;
}
.moving{
transform: rotate(135deg);
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.box').click(function () {
$(this).addClass('moving')
})
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
显示效果如下：
3、实现屏幕滚动效果
css代码部分
body{
margin: 0;
padding: 0;
}
ul{list-style: none}
.pages_con{
position: fixed;
left: 0;
top: 0;
width: 100%;
overflow-y: scroll;
}
.pagees{
height: 600px;
position: relative;
background-color: pink;
}
.page1{ background-color:orange;}
.page2{ background-color:lightgreen;}
.page3{ background-color:cyan;}
.page4{ background-color:pink;}
.page5{ background-color:lightblue;}
.points{
width: 16px;
height: 176px;
position: fixed;
top: 50%;
right:20px;
margin-top: -88px;
}
.points li{
width: 13px;
height: 13px;
margin: 16px 0;
border-radius: 50%;
border: 1px solid #666;
cursor: pointer;
}
.points li.activate {
background-color: #666;
}
.main_con{
width: 900px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -450px;
margin-top: -200px;
}
.main_con .left_img{
width: 363px;
height: 400px;
float: left;
left: -50px;
opacity: 0;
filter:alpha(opacity=0); /*兼容ie浏览器*/
transition: all 1000ms ease 300ms;
}
.main_con .right_info{
width: 500px;
height: 300px;
margin-top:50px;
float:right;
font-family:'Microsoft Yahei';
font-size: 20px;
line-height: 50px;
color: #666;
text-indent:2em;
text-align: justify;
position:relative;
bottom:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .left_img{
left:0;
opacity:1;
filter:alpha(opacity=100);
}
.moving .main_con .right_info{
right:0;
opacity:1;
filter:alpha(opacity=100);
}
.main_con .right_img{
width:522px;
height:400px;
float:right;
position:relative;
top:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.main_con .left_info{
width:350px;
height:300px;
margin-top:50px;
float:left;
font-family:'Microsoft Yahei';
font-size:20px;
line-height:50px;
color:#666;
text-indent:2em;
text-align:justify; /*实现两端对齐文本效果。*/
position:relative;
bottom:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .right_img{
top:0;
opacity:1;
filter:alpha(opacity=100);
}
.moving .main_con .left_info{
bottom:0;
opacity:1;
filter:alpha(opacity=100);
}
.main_con .center_img{
width:611px;
height:337px;
position:absolute;
left:50%;
margin-left:-305px;
bottom:-50px;
opacity:0;
filter:alpha(opacity=0);
transition:all 1000ms ease 300ms;
}
.moving .main_con .center_img
{
bottom:0;
opacity:1;
filter:alpha(opacity=100);
}
html与javascript部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>jquery整屏滚动具体实现</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="css/gqr.css">
<script type="text/javascript">
$(function () {
var $pagees = $('.pagees');
var $screen = $('.pages_con');
var $points = $('.points li'); // 获取页面中小黑点对象
var $len=$pagees.length;
var timer=null; // 设置定时器全局变量
$pagees.eq(0).addClass('moving') // 默认显示第一个页面
// 获取浏览器的高度，并将高度设置成 .pagees元素的高度
var $h = $(window).height();
$pagees.css({'height':$h});
var $nowscreen=0; // 记录当前屏幕的高度
// 点击某个小圆点，屏幕放在对应的页面上
$points.click(function () {
var index = $(this).index(); // 获取当前li对应的索引
$screen.animate({'top':-index*$h}); /*实现滚动动画*/
$pagees.eq(index).addClass('moving').siblings().removeClass('moving') /*在当前屏上加上moving属性*/
$points.eq(index).addClass('activate').siblings().removeClass('activate') /*给当前页小圆点添加激活效果*/
})
$(window).mousewheel(function (event,dat) {
// 清空定时器全局常量，使用保持最后一次（还用定时器来实现函数节流，防止触发多次）
clearTimeout(timer)
timer=setTimeout(function () {
if(dat==-1){
$nowscreen++;
}else {
$nowscreen--;
}
// 限制滚轮滑动的页数
if($nowscreen<0){
$nowscreen=0
}
if ($nowscreen>($len-1)){
$nowscreen=$len-1
}
$screen.animate({'top':-$nowscreen*$h}); /*实现滚动动画*/
$pagees.eq($nowscreen).addClass('moving').siblings().removeClass('moving') /*在当前屏上加上moving属性*/
$points.eq($nowscreen).addClass('activate').siblings().removeClass('activate') /*给当前页小圆点添加激活效果*/
document.title=$nowscreen
},300)
})
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pagees page1">
<div class="main_con">
<div class="left_img"><img src="./images/001.png" alt=""></div>
<div class="right_info">
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，
网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
</div>
</div>
</div>
<div class="pagees page2">
<div class="main_con">
<div class="right_img"><img src="./images/002.png" alt=""></div>
<div class="left_info">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。
网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
</div>
</div>
</div>
<div class="pagees page3">
<div class="main_con">
<div class="left_img"><img src="./images/003.png" alt=""></div>
<div class="right_info">
以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，
还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
</div>
</div>
</div>
<div class="pagees page4">
<div class="main_con">
<div class="left_img"><img src="./images/004.png" alt=""></div>
<div class="right_info">
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。
Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
</div>
</div>
</div>
<div class="pagees page5">
<div class="main_con">
<div class="center_img"><img src="./images/005.png" alt=""></div>
</div>
</div>
</div>
<ul class="points">
<li class="activate"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
显示效果如下所示：
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
