鼠标滚轮事件实现整屏滚动

最新推荐文章于 2024-07-03 16:16:57 发布

weixin_30396699

最新推荐文章于 2024-07-03 16:16:57 发布

阅读量643

点赞数

文章标签： javascript c/c++ 移动开发 ViewUI

原文链接：http://www.cnblogs.com/lzxb/p/5923547.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
　　*{
　　　　margin:0;
　　　　padding:0;
　　}
　　html,body{
　　　　width:100%;
　　　　height:100%;
　　　　position:relative;
　　　　overflow:hidden;

　　}
　　.box{
　　　　width:100%;
　　　　height:100%;
　　　　position:absolute;
　　　　top:0;
　　　　left:0;
　　}
　　.box .ul-star{
　　　　width:100%;
　　　　height:100%;
　　}
</style>
</head>
<body>
　　<div id="box" class="box" index ='0'>
　　　　<div class="ul-star" style="background:red"></div>
　　　　<div class="ul-star" style="background:green"></div>
　　　　<div class="ul-star" style="background:grey"></div>
　　　　<div class="ul-star" style="background:blue"></div>
　　</div>
</body>
<script src="js/jquery.js"></script>
<script>
　　$("#box").on("mousewheel",function(ev){
　　　　var hhs = ev.originalEvent.wheelDelta;
　　　　var fangx = hhs >0?1:0;//向下为负值
　　　　var index = $("#box").attr("index");
　　　　var maxpage = $("#box div").size()-1;
　　　　if(fangx){//1,top为负值往下
　　　　　　if(--index<0){
　　　　　　　　return
　　　　　　}
　　　　}
　　　　else{
　　　　　　if(++index > maxpage){
　　　　　　　　return
　　　　　　}
　　　　}
　　　　if(!$(this).is(":animated")){
　　　　　　$("#box").animate({top:"-"+index+"00%"},300)
　　　　　　$("#box").attr("index",index)
　　　　}
　　})
</script>
</html>

转载于:https://www.cnblogs.com/lzxb/p/5923547.html

weixin_30396699

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮事件实现整屏滚动

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> 　　*{ 　　　　margin:0; 　　　　padding:0; 　　} 　　html,body{ 　　　　width:100%;...
复制链接

扫一扫