一 实现原理 根据当前页面滚动条的高度判断当前页面应当与导航栏中哪个导航相关联，并对相应的导航设置高亮样式。 二 代码解析 先简单写一个页面顶端的导航栏：<nav> <ul> <li><a class="nav active" href="#nav1">导航1</a></li> <li><a cla ...
分类：
Web程序 时间：
2018-03-07 23:56:27
阅读次数：
301
$(window).scroll(function() { var swipeHeight = 200;//完全变色高度 var scrollTop = $(document).scrollTop();//页面滚动高度 var x = scrollTop/swipeHeight; $(".head.... ...
分类：
其他好文 时间：
2018-03-07 13:21:31
阅读次数：
131
网页中用到克隆的地方有很多，例如页面滚动到底部时内容动态加载，都可以用克隆来实现。 克隆时一般先把模板单独放出来，并给样式设置为display:none，用jQuery的clone()实现 接下来就是重头戏，jQuery的clone()方法： clone()方法里的true代表克隆的时候连事件也一起 ...
分类：
Web程序 时间：
2018-03-01 14:56:10
阅读次数：
2556
模块回顾 1.背景图片的设置 2.超链接伪类 一、背景图片的设置 1.整个页面的背景图片插入 在类标签body中直接插入，例如：body{background-image:url(../Day02-HTML/html/海贼王02.jpg);} 还可以调试它的效果，是否重复，是否随页面滚动，调动位置。 ...
分类：
Web程序 时间：
2018-02-06 18:04:30
阅读次数：
160
弹窗后允许页面滚动 这种方式通常使用 position: absolute; ，可以看看我做的这个 Demo。主要用来应对弹窗内容很大很多的情况，超过了屏幕的宽高需要产生滚动条来方便浏览者查看。有一些图片弹窗插件使用这种方式，使用 JS 动态计算弹窗内容块的位置，这样即便是内容块很大，也不会造成信息 ...
分类：
其他好文 时间：
2018-02-02 14:20:44
阅读次数：
145
问题 在移动端页面进行优化时，一般使用touch事件替代鼠标相关事件，用的较多的是使用touchend事件替代PC端的click和mouseup事件。 但是，touchend事件在页面滚动时有个问题。在滚动完成后，如果当前触点的位置所指的元素绑定了touchend事件，这时便会触发该元素的touch ...
分类：
其他好文 时间：
2018-02-02 14:15:20
阅读次数：
163
.scrollbar { background: #fff; overflow: auto; overflow-x: auto; overflow-y: auto; } .scrollbar-primary::-webkit-scrollbar { width: 12px;/*滚动条宽度*/ bac ...
分类：
数据库 时间：
2018-01-30 16:22:26
阅读次数：
212
文档内链接作用:在同一个网页界面实现不同位置的跳转 实现效果：当我浏览一个页面滚动到不同位置需要返回某个特定的位置时可以一键返回 如下：当我下滑到文档二处需要快速返回到文档一处时，只要点击文档二就会自动返回到文档一处的位置 实现代码： ...
分类：
Web程序 时间：
2018-01-27 17:20:42
阅读次数：
161
1--减少http请求，可以把不必要的js放在onload事件之后加载，把小图标整理成图片精灵，加载一张图片减少请求。也可使用图片懒加载，原理是将页面里所有img属性src属性用data-xx代替，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。2--使用aja ...
分类：
其他好文 时间：
2018-01-22 11:07:16
阅读次数：
165
