使用jQuery获得CSS位置百分比 - 腾讯云开发者社区

文章/答案/技术大牛

发布

页面滚动，元素跳动；附带jquery.scrollex.js插件

滚动到要实现动画的元素时(is-inactive)：其实和上面的意思一样：在未滚动到该元素时，显示假位置。...当滚动到该元素时，去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件二、使用方法要使用这个...$(this).css('background-color', ''); } });}); 事件 jquery.scrollex.js插件支持以下一些事件。...$(this).css('opacity', Math.max(0, Math.min(1, progress))); } });}); · mode, top和bottom 元素在视口中的位置可以通过...top和bottom 通过top和bottom参数可以移动元素和视口的接触面积，可以使用像素值，百分比值，或视口的百分比值(如20vh)。正值向视口内部移动，负值向视口外部移动。

6.5K1 0

【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

一、需求分析及核心开发要点 ---- 要实现如下功能 , 下图粉色部分是整体父容器 , 紫色元素是中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ; 首先分析父容器元素.../* 最外层父容器盒子 */ .box { /* 子元素设置绝对定位父元素需要设置相对定位 */ position: relative; /* 内容尺寸通过测量图片获得..., 浮动可以在标准流上方浮动显示 , 但是不能覆盖到内边距范围 ; 也不能使用相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ; 因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中..., 可以使用绝对定位在父容器的任意位置显示任何元素 ; /* 绝对定位元素 - 左上角 */ .top { /* 子元素设置绝对定位父元素需要设置相对定位 */ position.../* 最外层父容器盒子 */ .box { /* 子元素设置绝对定位父元素需要设置相对定位 */ position: relative; /* 内容尺寸通过测量图片获得

1.7K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端实战Demo：一张图片搞定一页布局

当然，不止是省了一些切图的花费，也是一种很有效的前端开发方法，尤其是针对那些设计花哨，使用HTML和Css还原度较难，并且实际上也并没有那么多可操作元素的设计。 ...当然要使用Javascript设置，当input和按钮区域获得焦点时，显示input和button了。...其实操作方法也是一样的，只要注意调整好空的div的位置和宽高度与图片中的设计相吻合即可。　　可能有人要问了，为什么要使用百分比来作为位置和宽高度的大小度量呢？这当然是一种响应式的设计。...如果使用像素的话，那么只能适用于一种屏幕宽高比和分辨率之下，使用百分比的话就可以在较多种类的屏幕特点之下仍然保持与设计的高还原度。　　...上述是使用了HTML元素的onfocus属性，其实也可以使用jQuery，代码如下： $("input#tel").focus(function(){ $("input#tel").css("display

8863 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等...jquery.mCustomScrollbar.css：这个 CSS 文件是让我们来定义边栏用的。...这个位置可以使用字符串（例如 “#element-id”，“bottom” 等）描述或者是一个数值（像素单位）。...原理就是这样的：首先获取要修改滚动条样式的内容区块，然后使用 CSS 隐藏掉默认滚动条，然后使用 Javascript 添加很多 HTML 结构，再配合 CSS 做出一个滚动条的效果。...然后再使用 CSS 定义滚动条的样式，使用 Javascript 相应鼠标的滚动事件，产生滚动下滑的效果。明白了这点，下面我们就可以看一下滚动条的结构，然后使用 CSS 对其进行定义了。

15.1K3 0

waypoint_使用jQuery Waypoint创建粘性导航标题

这些也可以是元素宽度的百分比，这非常方便-这种方法允许边界半径自动适应框尺寸的变化。使用::after伪元素创建完成导航栏功能区外观的小“阴影”。...它们的宽度和高度以及边界半径也使用百分比设置。...offset的值可以是数字（代表固定数量的像素），包含百分比的字符串（解释为视口高度的百分比）或返回多个像素的函数。最后一个可以提供一些严重的灵活性，稍后我们将使用它。...所有这些都是标准的jQuery票价：在nav添加或删除sticky类后，我们便会使用.css()覆盖元素的垂直位置，然后使用.animate()其设置为应有的水平。...但是，这样做有一点副作用-由于代码在固定后有效地取代了导航元素的垂直位置，因此您top:15px从CSS中删除top:15px声明。

4.4K3 0

CSS-精灵图片的使用（从一张图片中截图指定位置图标）

目录一、名词解释二、使用难点三、使用步骤四、程序源码 ---- 一、名词解释在网页中，我们可以看到有很多的小图标，比如微博上的登录位置有很多这样的小图标。...二、使用难点精灵图片的使用难点在于如何在这一张图片中定位到我们需要的部分，首先我们需要理解三个坐标：浏览器坐标、组件坐标、图片坐标，每个组件都有自己的坐标点，左上角为原点，往上y值为负数，...减小了100px（假设值），此时y坐标为-100px；往左移动24px，此时x坐标为-24px，所以如果我们需要获取vip6图标，图片相对于组件坐标往左移动24px和往上移动100px就能取到三、使用步骤...1.我们需要用到CSS中两个与背景图片有关的属性 background-image: url(“图片地址”); background-position: x坐标 y坐标; 2...以及微博认证为例 3.创建三个div，宽高分别等于vip3和4以及微博认证大小，如vip3和4宽高都为16px，微博认证x及y坐标分别为95px 35px 创建三个div 指定宽高、背景图片、图标所在位置

1.7K1 0

第135天：移动端开发经验总结

一、移动端三种布局　　1、有最大、最小宽度的百分比自适应布局　　适用场景：门户网站首页，图片较多的首页。　　2、百分比自适应布局　　适用场景：信息文字较多的网页，内容较多网页。　　...二、Box-sizing在移动端的使用　　在百分比定宽的页面经常使用。...那么，前端的应对方案是：　　设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2 　　//例如图片宽高为：200px*200px，那么写法如下 .css{width...:100px;height:100px;background-size:100px 100px;} 　　其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px 　.css{font-size...几乎一样，会jquery基本会zepto；搭配 backbone underscore http://daneden.github.io/animate.css/ 动画css

1.8K3 0

jQuery 一个简单基于文档高度百分比的进度条 | 2BROEAR 笔记栈

jQuery 一个简单基于文档高度百分比的进度条笔记点 scrollTop 的最大值+(window).height()=(“html”).height(); 也就是滑到底部后，这个scrollTop...pagePercentage(){ $(window).scroll(function(e){ var curSt = $(this).scrollTop(), //滚动进行时当前滚动位置...height(), //滚动时动态获取窗口高度，防止窗口高度发生变化 winPer = ((curWinH/curDocH)*100), //滚动时当前窗口高度相对于当前文档高度的百分比...WTF = curDocH-curWinH, //滚动进行时当前文档高度 - 当前窗口高度 = 真实滚动y轴位置......p_bar.css("opacity","") } };addition(); }) };pagePercentage(); 进度条 CSS 样式 .top-bar-tips

2261 0

简单实用的Canvas进度环返回按钮

大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用data储存并使用css的 content属性实现。...Canvas进度环返回按钮实现方法：确保引入了jquery,下面的代码加入到你的js文件中： var bigfa_scroll = { drawCircle: function(id, percentage..., color) { var width = jQuery(id).width(); var height = jQuery(id).height();...() - jQuery(window).height()), $windowObj = $this, $per = jQuery(".per"),...("#backtoTop")); T.scrollHook(jQuery(window), "#cc0000"); }); css代码可以参考： #backtoTop{background-color

6921 0

简单实用的纯CSS百分比圆形进度条代码解析源码下载

简要教程 percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置，只需要按该圆形进度条插件提供的标准HTML结构来编写代码，就可以生成一个漂亮的百分比圆形进度条。 ?...使用方法使用该幻灯片插件需要在页面中引入jQuery和percircle.css以及percircle.js文件。...css/percircle.css" /> jquery.min.js"> HTML结构使用该圆形进度条插件需要注意的是每一个圆形进度条容器元素的ID都以circle结尾。

2.3K5 0

分享一个基于jQuery的锁定表格行列的js脚本。

网上也有很多锁定行列的方法，一个是使用css，另一个就是专门的控件附带有锁定的功能。css的大多数锁定行，而不能锁定列。...好像看过园子里的司徒正美，写过一个用css锁定行列的，当时css比较烂看不懂，也没有保存那个网址（很后悔），现在想要找却又找不到了。　　...于是呢，就要jQuery动态创建div和需要的table，然后调整他们的宽度、高度和位置，这样在滚动的时候效率就高了很多，不过也有个问题，那就是精确获取、设置td的高度和宽度，要能够支持被撑高的td。...说了这么多，可能大家都烦了，说一下使用方法。　　...2、table的width不能设置百分比的形式，比如100%，这样很可能造成table被挤在div里面，没有横向的滚动。　　对了，还要说一下缺点：　　1、代码比较烂。

3.6K6 0

简单实用的Canvas进度环返回按钮

大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布，百分比数字是用data储存并使用css的 content属性实现。...Canvas进度环返回按钮实现方法：确保引入了jquery,下面的代码加入到你的js文件中： var bigfa_scroll = { drawCircle: function(id,...percentage, color) { var width = jQuery(id).width(); var height = jQuery(id).height()...() - jQuery(window).height()), $windowObj = $this, $per = jQuery(".per"),...("#backtoTop")); T.scrollHook(jQuery(window), "#cc0000"); }); css代码可以参考： #backtoTop{background-color

1.3K6 0

JavaWeb04-jQuery(Java真正的全栈开发)

它是轻量级的js库，它兼容CSS3，还兼容各种浏览器。 jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...获得jQuery对象，底层使用数组进行维护的，可以存放多个对象。 //然后通过get()可以从jquery对象转换成 dom对象。参数：数组的下标，可以省略。如果省略下标获得dom 数组。...：disabled 不可使用：checked 选中的元素(单选框和多选框) ：selected 选中的元素(下拉选) 四.属性和样式属性,类class,html代码/文本/值,css,位置,尺寸..."> css(name) 获得样式 css(name,value) 设置样式 css(pro) 使用json设置一组样式 5.位置 offset() 获得位置，返回json数据。...格式：{"top": xx , "left" : yy} offset(坐标) 设置位置 position() 获得相对父元素偏移 scrollTop([val]) 获得或设置垂直滚动条的位置 scrollLeft

2.7K9 0

【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用方位词百分比值像素值设置旋转中心点 )

; x y 坐标的默认值是中心点 , 也就是 ( 50% , 50% ) ; x y 坐标的值 , 可以设置的类型如下 : 百分比 : 50% 像素 : 10px 方位名词 : 可以是 top...- 使用 transfrom-origin 设置旋转中心点 ---- 1、代码示例 - 使用方位词设置旋转中心点使用方位词设置旋转中心点 , 设置左下角为旋转中心点 ; 设置左下角为旋转中心点...> 执行结果 : 鼠标移动上去后的效果 : 绕左下角逆时针旋转 45 度 ; 2、代码示例 - 使用百分比设置旋转中心点...使用方位词设置旋转中心点 , 设置 25% 25% 为旋转中心点 ; 设置 25% 25% 位置为旋转中心点 ; /* 设置旋转中心点 */ transform-origin...逆时针旋转 45 度 ; 3、代码示例 - 使用像素值设置旋转中心点使用方位词设置旋转中心点 , 设置 0px 0px 位置为旋转中心点 ; 设置 0px 0px 位置为旋转中心点 ;

1.4K2 0

JavaScript进阶内容——jQuery

$(选择器).action() jQuery使用顺序 jQuery是开源的JS文件代码，我们需要先获得其JS文件，才能够使用在官网中下载jQuery的JS文件，或者复制其代码，自定义一个jQuery代码...入口函数 jQuery的使用位置和JavaScript的使用位置一样，都是在script中进行，同样存放在body底部 $(function(){ ......jQuery对象和DOM对象是两种完全不同的对象：用原生JS获得来的对象就是DOM对象用jQuery获得来的对象就是jQuery对象 jQuery对象的本质是：利用$对DOM对象包装后产生的对象（...jQuery并没有封装，所以如果想使用这些属性和方法就需要把jQuer对象转换为DOM对象才能使用代码展示： <!...(''); // 这里获得值 $('').html(); // 这里设置值 $('').html(''); CSS操作： $('').css(''，''); $('').css({'':'','':''

5.8K1 0

CSS3动画，为你带来极致的视觉体验！

但CSS3中的Animation只应用在页面上已存在的DOM元素上，而且跟Flash和JavaScript以及jQuery制作出来的动画效果又不一样，因为使用CSS3的Animation制作动画可以省去复杂的...js、jQuery代码。...，比如说移动、改变元素颜色、位置、大小、形状等。...因为keyframes的单位只接受百分比值。 Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。...Percentage是百分比值，可以添加许多个这样的百分比。Prop为CSS的属性名，比如说left、background等，Prop value就是相对应属性的属性值。

1.5K7 0

WEB入门之十五属性和样式

本章将学习如何使用jQuery进行标签属性和CSS样式操作，jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。...这是因为在使用attr函数获得checked属性的值时，如果复选框处于选中状态，则获得true；如果复选框处于未选中状态，则获得undefined，并非false。...offset函数获得了含有广告图片的div的具体位置，并通过scrollTop和scrollLeft函数获得了滚动条的偏移位置，通过简单计算即可实现跟随滚动条滚动的广告图片如果需要通过offset函数设置元素的具体位置...> 上述代码使用height和width函数分别获取到了页面的尺寸和广告div的尺寸，通过简单的计算可以得到居中位置 6.1 jQuery工具函数 jQuery提供了很多有用的工具函数来处理一些业务，这些函数都非常实用...本章将学习如何使用jQuery进行标签属性和CSS样式操作，jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。

3221 0

NProgress - 实现和 Youtube 一样的细长进度条

不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！ ?...安装依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。...使用方法 NProgress.start() — 显示进度条 <button onclick...把它绑定到 (document).ready 和 (window).load 配置插件通过 minimum 来修改最小百分比。...NProgress.configure({ template: "..." }); 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。

1.2K4 0

WEB入门之十五属性和样式

本章将学习如何使用jQuery进行标签属性和CSS样式操作，jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。 ...这是因为在使用attr函数获得checked属性的值时，如果复选框处于选中状态，则获得true；如果复选框处于未选中状态，则获得undefined，并非false。...offset函数获得了含有广告图片的div的具体位置，并通过scrollTop和scrollLeft函数获得了滚动条的偏移位置，通过简单计算即可实现跟随滚动条滚动的广告图片如果需要通过offset函数设置元素的具体位置...} ) 上述代码使用height和width函数分别获取到了页面的尺寸和广告div的尺寸，通过简单的计算可以得到居中位置 6.1 jQuery工具函数 jQuery提供了很多有用的工具函数来处理一些业务...本章将学习如何使用jQuery进行标签属性和CSS样式操作，jQuery提供了大量的函数来帮助开发人员简化对标签属性和CSS样式的操作。

3501 0

由重构进阶前端开发入门 (二) 事件与事件对象

常用 jQuery API 选择元素和创建元素使用 $(), find, filter 处理事件使用 on, off, trigger 操作元素内容使用 text, html 操作元素位置和尺寸使用 offset..., width, height 操作元素属性/特性使用 prop, attr, removeProp, removeAttr 操作元素样式/className 时使用 css, addClass, removeClass...例子：幻灯片切换效果（点击位置判断）过去对于用户点击图片区域判断，需要通过 img 元素的 usemap 属性实现，使用方式较为复杂，且限制较多，可复用性低。...点击坐标 - 列表坐标，再除以列表宽度，即可得到点击相对列表的横向位置百分比 var px = (clickPos.left - listPos.left) / listWidth;...有兴趣的同学课余可以尝试一下，使用原生 JS 兼容 IE8 和现代浏览器后，再对比上述代码，就能明白 jQuery 的强大之处了~ 附：可用的跨浏览器兼容的 jQuery 标准化事件属性 jQuery

1.7K1 0

点击加载更多

页面滚动，元素跳动；附带jquery.scrollex.js插件

【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

前端实战Demo：一张图片搞定一页布局

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

waypoint_使用jQuery Waypoint创建粘性导航标题

CSS-精灵图片的使用（从一张图片中截图指定位置图标）

第135天：移动端开发经验总结

jQuery 一个简单基于文档高度百分比的进度条 | 2BROEAR 笔记栈

简单实用的Canvas进度环返回按钮

简单实用的纯CSS百分比圆形进度条代码解析源码下载

分享一个基于jQuery的锁定表格行列的js脚本。

简单实用的Canvas进度环返回按钮

JavaWeb04-jQuery(Java真正的全栈开发)

【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用方位词百分比值像素值设置旋转中心点 )

JavaScript进阶内容——jQuery

CSS3动画，为你带来极致的视觉体验！

WEB入门之十五属性和样式

NProgress - 实现和 Youtube 一样的细长进度条

WEB入门之十五属性和样式

由重构进阶前端开发入门 (二) 事件与事件对象

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐