精华内容
下载资源
问答
  • 1. 打开Windows设置页面(控制面板) 2. 进入“轻松使用” 3. 点击左侧的“其他选项” 4. 打开“在Windows中播放动画”

    1. 打开Windows设置页面(控制面板)

    2. 进入“轻松使用”

    3. 点击左侧的“其他选项”

    4. 打开“在Windows中播放动画”

    展开全文
  • 火狐则是window.event.detail代表鼠标滚轮运动情况,且向上滚动window.event.detail的值为-3,向下为3.这是区别的地方  文档也是乱乱的,最终效果也有点理想。滚动起来平滑,但是不用jquery的情况下写...
    <!doctype html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css">
    	</head>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.page{
    			height: 100%;
    			width: 100%;
    			font-size: 126px;
    			display: -webkit-box; /*Safari*/
    			display: -moz-box; /*Firefox*/
    			display: -ms-flexbox; /*IE*/
    			display: -webkit-flex; /*Chrome*/
    			display: flex;
    			-webkit-box-align: center;
    			-moz-box-align: center;
    			-ms-flex-align: center;
    			-webkit-align-items: center;
    			align-items: center;
    			-webkit-box-pack: center;
    			-moz-box-pack: center;
    			-ms-flex-pack: center;
    			-webkit-justify-content: center;
    			justify-content: center;
    		}
    		#mao{
    			position: fixed;
    			right: 0;
    			bottom: 0;
    		}
    	</style>
    
    	<body>
    
    
    
    		<div class="page" id="item-1">Prat 1</div>
    		<div class="page" id="item-2">Prat 2</div>
    		<div class="page" id="item-3">Prat 3</div>
    		<div class="page" id="item-4">Prat 4</div>
    		<div class="page" id="item-5">Prat 5</div>
    		<div class="page" id="item-6">Prat 6</div>
    		<div class="page" id="item-7">Prat 7</div>
    
    		<script type="text/javascript">
    			//			var oldy = 0,tem = 0,fullheight = document.body.clientHeight;
    			//			window.onscroll = function() {
    			//				var y = document.documentElement.scrollTop || document.body.scrollTop;
    			//				console.log('this is y' + y);
    			//				if (y > oldy) {
    			//					location.href = '#item-4';
    			//					console.log('向下翻');
    			//					oldy = y;
    			//				} else if (y < oldy) {
    			//					//		document.body.scrollTop-=fullheight;console.log('向上翻');oldy=y;
    			//				} else {
    			//					console.log('翻你妹啊');
    			//					console.log('xiangdeng');
    			//				}
    			//
    			//				console.log('this is oldy' + oldy);
    			//			}
    					var scrollFunc = function(e) {
    							ee = e || window.event;
    							var t1 = document.getElementById("wheelDelta");
    							var t2 = document.getElementById("detail");
    							var y = document.documentElement.scrollTop || document.body.scrollTop;
    							var fullheight = document.body.offsetHeight;
    							if (e.wheelDelta) { //IE/Opera/Chrome 
    								var a = e.wheelDelta;//向上为120,向下为-120
    								if(a>0){//向上	
    								document.body.scrollTop -= fullheight/2;
    								} 
    								if(a<0){//向下
    									document.body.scrollTop += fullheight/2;
    								}
    							} else if (e.detail) { //Firefox 
    								var a = e.detail;//向上为-3,向下为3
    								if(a<0){//向上	
    								document.documentElement.scrollTop -= fullheight/2;
    								} 
    								if(a>0){//向下
    									document.documentElement.scrollTop += fullheight/2;
    								}
    							}
    							
    							
    							
    							
    						}
    						
    						/*注册事件*/
    					if (document.addEventListener) {
    						document.addEventListener('DOMMouseScroll', scrollFunc, false);
    					} //W3C 
    					window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
    		</script>
    	</body>
    
    </html>


    源码如上。

    一开始希望window.onscroll = function() {}的方法来实时检测滚动栏是否有变化。也实现了翻页的功能,但是直接就是一翻到底。。。也就是因为在实现翻页的时候由于document.body.scrollTop的变化,会自动触发新的window.onscroll函数。所以无奈只能求助百度,最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试,最新版chrome和firefox是支持的。
    希望自己可以慢慢学习,每天练习。
    if (document.addEventListener) {
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
    } //W3C
    window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome
    事件监听的兼容写法
    最后一个需要注意的地方是获取当前页面顶端到body顶端的距离(比如你在第三页距离文档头部的距离为两个屏幕的高度),要这样写
    var y=document.documentElement.scrollTop || document.body.scrollTop;谷歌中
    document.documentElement.scrollTop怎么搞都是0,需要用bodywindow.event.wheelDelta非firefox浏览器获取到滚动条变化的情况,以谷歌为例。

    而且上述代码的关键在于其中firex和其他浏览器的效果不同

    document.body.scrollTop的变化,会自动触发新的window.onscroll函数。所以无奈只能求助百度,最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试,最新版chrome和firefox是支持的。

    如果向上滚动鼠标滚轮,则window.event.wheelDelta为120,向下则为-120.

    火狐则是window.event.detail代表鼠标滚轮运动情况,且向上滚动window.event.detail的值为-3,向下为3.这是区别的地方 


    文档也是乱乱的,最终效果也有点不理想。滚动起来不平滑,但是不用jquery的情况下写动画还是不会写。留待以后回过头复习的时候完善。
    演示地址
    https://github.com/Fucntion/jseveryday/blob/master/207/207.html



    放一个自己最近做的小东西 米单词,公益背单词


    document.body.scrollTop的变化,会自动触发新的window.onscroll函数。所以无奈只能求助百度,最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试,最新版chrome和firefox是支持的。
    展开全文
  •  word-break: break-all;}   .element_head{width: 100%; position: relative; height: 20px;}   .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-...
    1. index.php代码  

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3.     <head>  
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.         <title>滚屏加载--无刷新动态加载数据技术的应用-www.corange.cn</title>  
    6.         <style type="text/css">  
    7.             #container{margin:10px auto;width: 660px; border: 1px solid #999;}   
    8.             .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}  
    9.             .author{position: absolute; left: 0px; font-weight:bold; color:#39f}  
    10.             .date{position: absolute; right: 0px; color:#999}  
    11.             .content{line-height:20px; word-break: break-all;}  
    12.             .element_head{width: 100%; position: relative; height: 20px;}  
    13.             .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#999; font-size:14px}  
    14.         </style>  
    15.         <script type="text/javascript" src="../jquery.js"></script>  
    16.         <script type="text/javascript">  
    17.             $(function() {  
    18.                 var winH = $(window).height(); //页面可视区域高度  
    19.                 var i = 1;  
    20.                 $(window).scroll(function() {  
    21.                     var pageH = $(document.body).height();  
    22.                     var scrollT = $(window).scrollTop(); //滚动条top  
    23.                     var aa = (pageH - winH - scrollT) / winH;  
    24.                     if (aa 0.02) {  
    25.                         $.getJSON("result.php", {page: i}, function(json) {  
    26.                             if (json) {  
    27.                                 var str = "";  
    28.                                 $.each(json, function(index, array) {  
    29.                                     var str = "<div class=\"single_item\"><div class=\"element_head\">";  
    30.                                     var str = str + "<div class=\"date\">" + array['date'] + "</div>";  
    31.                                     var str = str + "<div class=\"author\">" + array['author'] + "</div>";  
    32.                                     var str = str + "</div><div class=\"content\">" + array['content'] + "</div></div>";  
    33.                                     $("#container").append(str);  
    34.                                 });  
    35.                                 i++;  
    36.                             } else {  
    37.                                 $(".nodata").show().html("别滚动了,已经到底了。。。");  
    38.                                 return false;  
    39.                             }  
    40.                         });  
    41.                     }  
    42.                 });  
    43.             });  
    44.         </script>  
    45.     </head>  
    46.     <?php   
    47.     require_once('connect.php');   
    48.     $user = array('demo1','demo2','demo3','demo3','demo4');   
    49.     ?>   
    50.     <div id="container">   
    51.         <?php   
    52.         $query=mysql_query("select * from comments order by id desc limit 0,15");   
    53.         while ($row=mysql_fetch_array($query)) {   
    54.         ?>   
    55.         <div class="single_item">   
    56.             <div class="element_head">   
    57.                 <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>   
    58.                 <div class="author"><?php echo $user[$row['userid']];?></div>   
    59.             </div>   
    60.             <div class="content"><?php echo $row['content'];?></div>   
    61.         </div>   
    62.         <?php } ?>   
    63.     </div>   
    64.     <div class="nodata"></div>   

     

    result.PHP代码

     
    1. <?php  
    2. require_once('connect.php'); //连接数据库   
    3.    
    4. $user = array('demo1','demo2','demo3','demo3','demo4');   
    5. $page = intval($_GET['page']);  //获取请求的页数   
    6. $start = $page*15;   
    7. $query=mysql_query("select * from comments order by id desc limit $start,15");   
    8. while ($row=mysql_fetch_array($query)) {   
    9.     $arr[] = array(   
    10.         'content'=>$row['content'],   
    11.         'author'=>$user[$row['userid']],   
    12.         'date'=>date('m-d H:i',$row['addtime'])   
    13.     );   
    14. }   
    15. echo json_encode($arr);  //转换为json数据输出   
    16. ?>  

    connect.php代码

     
    1. <?php  
    2. $host="localhost";  
    3. $db_user="root";  
    4. $db_pass="";  
    5. $db_name="demo";  
    6. $timezone="Asia/Shanghai";  
    7.   
    8. $link=mysql_connect($host,$db_user,$db_pass);  
    9. mysql_select_db($db_name,$link);  
    10. mysql_query("SET names UTF8");  
    11. ?>  

    转载于:https://www.cnblogs.com/zxz1987/p/6417193.html

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...Document&l...

     实现如下效果:

    你真的会 css的 overflow 属性吗

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html , body {
                height: 100%;
                overflow: hidden;
            }
            body {
                padding: 0;
                margin: 0;
            }
            .one {
                height: 50px;
                line-height: 50px;
                text-align: center;
                margin: 0;
                background-color: aqua;
            }
            .two {
                height: calc(100% - 50px);
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="one">这是一个导航栏</div>
        <div class="two">
            <ul>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
                <li>我是列表</li>
            </ul>
        </div>
    </body>
    </html>

     

    展开全文
  • 弹框后面的页面让他滚动弹窗内容能滚动 <!-- 弹框 --> <div class="popup" ref="popup" v-if="modalInfo"> <div class="popup_con"> <img @click="popdown()" src="../../assets/imgs/...
  • 记录鼠标状态   var width = '100%' , height = '100%' ;   var type = '1' ; //'1': 域、系统; '2': 表 // 格式化数据 function formatData (paramNodes,paramLinks){   var m = 0 ;   var ...
  • 页面滚动 、 视差滚动文字阴影 、 视差滚动文字虚影 兼容: background-attachment 、 transform <li>translateZ(-1px) <li>translateZ(-2px) <li>translateZ(-3px) 内容 <li>translateZ(-1...
  • word技巧

    千次阅读 2018-03-01 21:40:22
    word 高效经典教程(整理版)目录一分钟驾驭word 高效经典教程(整理版)... 6A、基础知识... 61、度量单位... 62、WORD中文字字号与磅的对应关系... 63、字体文件格式... 7B、文本编辑... 71、快速移动文档... 72、...
  • 上次安装完powerdesigner后就出现了Office Word 2007的一个奇怪的问,郁闷得我都想把Word 2007卸载掉了,问题描述如下: 打开word 2007后编辑文件,然后切换到其它窗口,再切换回来,就会出现如下令人郁闷的情况:1....
  • 滚动视差

    2018-08-15 16:56:02
    最近在一个公众号看到滚动视差效果,觉得挺有意思的,相比传统滚动的显示效果让人耳目一新。 ... 主要是运用background-...scroll:背景相对于元素固定,背景随页面滚动滚动,背景和内容绑定 fixed:背景相对于视...
  • WORD经典实用!

    千次阅读 2016-07-21 17:30:31
    WORD经典实用!较全面!
  • 单纯的手写滚动条 这里调试过,没问题,可以...检测鼠标滚动事件,设置容器div的max-height来设定每次最多显示多少px的内容,设置每次滚动滚多少px,也可通过拖动手写滚动条来快速访问; 手写的滚动条是容器div的
  • 1、即时取消 Word 的后台打印当我们刚刚编辑完一篇文档按了打印命令后,后来又想打印当前的文档了,那么怎样才能即时取消后台打印任务呢?一般来说,大家在发出打印任务后,程序会自动将打印任务设置为后台打印,...
  • WORD 编辑

    千次阅读 2011-09-05 14:34:53
    三种方法 利用控件 这种方法是将动画作为一个控件插入到PowerPoint中去,该方式的特点是它的窗口大小在设计时就固定下来,...当鼠标在Flash播放窗口中时,响应Flash的鼠标事件,当鼠标在Flash窗口外时,响应PowerP
  • 通用间断滚动JS封装

    千次阅读 2008-09-10 09:19:00
    /*MSClass (Class Of Marquee Scroll通用间断滚动JS封装类) Ver 1.65*/ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-12-28 (Ver 1.65) 更新说明: + 加入功能 * 修正、完善 ...
  • CCClass Of Marquee Scroll通用间断滚动JS封装类Class Of Marquee Scroll通用间断滚动JS封装类lass Of Marquee Scroll通用间断滚动JS封装类MSClass (Class Of Marquee Scroll通用间断滚动JS封装类) Ver 1.65...
  • 转:... <script language="javascript"> <!.../*MSClass (Class Of Marquee Scroll通用间断滚动JS封装类) Ver 1.65*\  制作时间:2006-08-29...
  • word编辑技巧

    千次阅读 2010-05-10 18:04:00
    答:有,如果要进行“页面设置”,只需用鼠标左键双击标尺上没有刻度的部分就可以打开页面设置窗口。1.2.2 Word中巧选文本内容在Word文件中进行编辑操作时,经常需选定部分文件内容或全部内容进行处理,请问有没有...
  • /*MSClass (Class Of Marquee Scroll通用间断滚动JS封装类) Ver 1.65*\    制作时间:2006-08-29 (Ver 0.5)  发布时间:2006-08-31 (Ver 0.8)  更新时间:2007-12-28 (Ver
  • Word 2010 亮点大搜索

    2017-11-08 02:50:00
    Word 2010亮点大搜索 1.结构清晰的文档导航 ... 在以往的Word各大版本中,我们往往会有这样的发现,在处理一些比较长的文档,想要查看或重新组织文档内容时要用鼠标滚轮来回滚动或频繁拖动滚...
  • word滑动时出现花屏/黑线

    千次阅读 多人点赞 2020-06-28 01:02:35
    我的word是电脑自带的,鼠标上下滑动页面的时候会出现花屏, 也就是页面顶端有一道很粗的黑线一闪而过, 查了一下解决方法 依次点击: 文件——选项(左下角)——高级——找到显示(在靠下面的位置)—— 勾选...
  • 推荐 Word、EXCEL必备工具箱

    千次阅读 2019-09-20 09:41:36
    10、批量工具→批量→批量修改页面设置功能,增加了按文件夹操作方式,可以在页眉、页脚中换行,增加对页眉、页脚中使用图片的支持。 11、汇总工具→数据收集功能,有网友反映功能界面上的说明让人误解,已经改进。...
  • Word操作技巧大全

    2017-02-21 10:20:00
    Word中的“选中”方法知多少? 一、常见的“选中”方法: ü 全选(快捷键Ctrl+A):就是全部选中文档内的所有内容。这所有内容包括:文字、表格、图形、图像等可见的和可见的标记。 ü 按住Shift+Page Down从...
  • 1、即时取消Word的后台打印:当我们刚刚编辑完一篇文档按了打印命令后,后来又想打印当前的文档了,那么怎样才能即时取消后台打印任务呢?一般来说,大家在发出打印任务后,程序会自动将打印任务设置为后台打印,...
  • Word使用技巧

    千次阅读 2007-03-07 20:29:00
    其实,在Word中设计了一个修复程序,只不过它比较隐蔽,你没有注意罢了,巧妙地使用它说不定还能够把你的工作成果给恢复过来呢。请点击“文件”→“打开”,在打开文件对话框中的文件类型下拉框中选择“从任意文件中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,403
精华内容 2,961
关键字:

word鼠标滚动页面不动