scrolltop

js上拉分页

由 ╄→尐↘猪︶ㄣ 提交于 2020-04-07 14:45:19
js实现上拉加载，页面分页的代码。 $(function () { var all = 10; //后台返回总页面 var pageNum = 1;//定义初始页面 var pageSize = 10; // 每页显示的个数 var close = true; // 因为ajax是异步请求，所以设置一个boolean类型，将ajax控制为同步请求 $(window).scroll(function() { var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var windowHeight = $(this).height(); //当前window也就是浏览器的高度 if(parseInt(scrollTop) + parseInt(windowHeight) == parseInt(scrollHeight)) { // 如果class为true 并且当前页数小于或等于总页数 if (close && pageNum <= all) { pageNum += 1; //将close改为false，无法在请求后台 close = false; $.ajax({ url:'', // 请求地址 data:{ pageNum

javascript的offsetLeft、scrollLeft、offsetTop、scro...

由 笑着哭i 提交于 2020-04-06 22:29:54
avascript的offsetLeft、scrollLeft、offsetTop、scrollTop属性尤其在做幻灯片，位置判断，图片无缝滚动，返回顶部功能等等经常用到 下面总结了一些常用的和位置有关的知识点 1，scrollHeight: 获取对象的滚动高度，对象的实际高度 2，scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 3，scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 4，scrollWidth:获取对象的滚动宽度 5，offsetHeight:获取对象相对由父坐标 offsetParent 属性指定的父坐标的高度 6，offsetLeft:获取当前对象到其上级层左边的距离 7，offsetTop:获取当前对象到其上级层顶部的距离. 8，event.clientX 相对文档的水平座标 9，event.clientY 相对文档的垂直座标 10，event.offsetX 相对容器的水平坐标 11，event.offsetY 相对容器的垂直坐标 12，document.documentElement.scrollTop 垂直方向滚动的值 13，event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 14，clientLeft

无缝滚动

由 て烟熏妆下的殇ゞ 提交于 2020-04-04 22:31:19
无缝滚动好像是互联网广告最大的一个载体，可以用“无处不在”来形容它。不过它比起早期的闪光字体，浮动广告算进步了。由于需求巨大，做前台迟早会遇到它。我先给出结构层部分，再慢慢讲解其实现原理。 01. < dl id = "marquee" > 02. < dt > 03. < img src = " http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg " alt = "无缝滚动" /> 04. < img src = " http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg " alt = "无缝滚动" /> 05. < img src = " http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg " alt = "无缝滚动" /> 06. < img src = " http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg " alt = "无缝滚动" /> 07. < img src = " http://images.cnblogs.com/cnblogs_com

jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效

由 馋奶兔 提交于 2020-03-30 08:06:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery制作顶部与左侧锚点板块定位功能带动画跳转特效 - xw素材网</title> <script src="js/jquery.min.js" type="text/javascript"></script> <link href="css/christmas.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body"

类似淘宝侧边栏jq代码编写

由 不想你离开。 提交于 2020-03-29 21:18:54
　　 $(function() { var recommend_offTop = $('.recommend').offset().top; var flag = true; // 当页面卷相关位置的时候，固定栏显示 ifdisplay() function ifdisplay() { $(document).on("scroll", function() { if ($(this).scrollTop() >= recommend_offTop) { $(".fixedtool").fadeIn(); } else { $(".fixedtool").fadeOut(); } if (flag) { // 当滚轮滑动到相应位置，固定栏的位置发生相应变化 $(".floor .w").each(function(i, e) { if ($(document).scrollTop() >= $(e).offset().top) { // console.log(11) // 滚轮滚到一定位置，固定栏小li发生相应变化 $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current"); } }) } }) } // 当点击某个小li的时候，对应的颜色变了，跳转到相应的位置 $("

jQuery工具和方法（二）

由 喜你入骨 提交于 2020-03-27 08:03:30
offset相对于页面来说 position相对于上层的父元素 获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标 1. scrollTop(): 读取/设置滚动条的Y坐标 2. $(document.body).scrollTop()+$(document.documentElement).scrollTop() 读取页面滚动条的Y坐标(兼容chrome和IE) 3. $('body,html').scrollTop(60); 滚动到指定位置(兼容chrome和IE) //////////////// scrollTop():实现回到顶部功能 $ ( '#to_top' ).click( function () { // 瞬间滚到顶部 //$('html,body').scrollTop(0) //循环定时器实现缓慢移动; var distance = $ ( 'html' ).scrollTop()+ $ ( 'body' ).scrollTop() // 滚动条移动的长度 var times=500 // 总时间500 var smalltime=50 // 间隔时间 var samlldis=distance/(times/ smalltime) // 设置定时器循环调用； var tim=

javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

由 杀马特。学长 韩版系。学妹 提交于 2020-03-24 07:47:23
界面如图所示： 要求：在“信息注册”栏，按下鼠标，然后鼠标在页面移动，在鼠标移动过程中，该窗口跟着鼠标移动，当鼠标松开的时候，窗口停止移动。点击“关闭”，该窗口隐藏。 实现思路： 1.页面结构分析：一个大盒子d-box来确定位置，里面放一个小盒子drop（存放“注册信息（可以拖拽”文字和span标签，span存放“关闭”，id为box_close），鼠标在drop中按下，移动时候d-box跟着移动。 2.实现分析： 2.1 获取鼠标在盒子中的位置。通过鼠标在页面中的位置-盒子在页面的位置实现 ①鼠标在页面的位置实现代码： var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); 　　②盒子在页面中位置实现代码： 　 var box_x=box.offsetLeft; 　 var box_y=box.offsetTop; 　　③鼠标在盒子中的位置实现代码： 　 var mouse_in_box_x=x-box_x; 　 var mouse_in_box_y=y-box

javascript——BOM窗口的大小

由 假如想象 提交于 2020-03-24 06:08:06
可视区的宽、高：clientWidth 、clientHeight 滚动距离：scrollTop 内容的实际高度：scrollHeight HTML代码： <body style="height:2000px;"> <div id="div1" style="width:100px; height:100px; border:1px solid red; padding:10px; margin:10px;"> <div style="width:100px; height:600px; background:#ccc;"></div> </div> </body> JS代码： // 可视区的宽、高 // alert(document.documentElement.clientWidth); // alert(document.documentElement.clientHeight); //滚动距离 document.onclick = function(){ // alert(document.documentElement.scrollTop); //IE/火狐支持 // alert(document.body.scrollTop); //仅Chrome支持 var scrollTop = document.documentElement.scrollTop ||

JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

由 泪湿孤枕 提交于 2020-03-16 11:01:09
基本介绍 $(obj).width()与 $(obj).height() $(obj).width()与 $(obj).height() ：jquery方式获取元素的宽高，不包括滚动条与工具条 $(obj).width() = width $(obj).height() = height $(window).width() 与 $(window).height() ：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $(window).width() = width + padding $(window).height() = height + padding document.documentElement.clientWidth与document.documentElement.clientHeight document.documentElement.clientWidth 与 document.documentElement.clientHeight ： 获得的是屏幕可视区域的宽高，不包括滚动条与工具条，跟jquery的(window).width()与(window).height()获得的结果是一样的。 document.documentElement.clientWidth = width + padding document.documentElement

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

由 左心房为你撑大大i 提交于 2020-03-15 22:00:54
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 以上主要指IE之中，FireFox差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding
订阅 scrolltop