position | 易学教程

jquery 动画

阅读更多关于 jquery 动画

jquery动画有意思的地方见效果图：思想：将图片设置分割div的背景图片，控制div的属性，可以现实有趣的滤镜效果，本例中展示了一种，感兴趣的朋友可以尝试其他滤镜的实现。本例其余动画部分，主要是利用jquery中提供animate和 delay实现。 animate：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。 delay ：设置一个延时来推迟执行队列中之后的项目。实例效果： <!DOCTYPE html> <html> <head> <title>jquery 动画</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} #test{width:300px; height: 300px; position: relative; margin: 20px auto 0px;} </style> </head> <body> <div id=

h5页面在安卓手机端软键盘弹出会顶起页面布局的解决方法

阅读更多关于 h5页面在安卓手机端软键盘弹出会顶起页面布局的解决方法

调出软键盘时，页面底部被顶起导致页面混乱；解决： <script type="text/javascript"> window.onload = function () { var pageHeight= $(document).height(); $(window).resize(function () { //ios软键盘弹出不会触发resize事件 if ($(document).height() < pageHeight) { $(".footerContainer").css("position", "static"); } else { $(".footerContainer").css("position", "fixed"); //adsolute或fixed，看你布局 } }); } </script> 来源： CSDN 作者： ℡鞋子～特大号链接： https://blog.csdn.net/weixin_43599212/article/details/103715406

CSS Positioning(定位)

阅读更多关于 CSS Positioning(定位)

Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法. 有四种不同的定位方法。 Static 定位 HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。 Fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：实例 p.pos_fixed { position:fixed; top:30px; right:5px; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持. Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 Relative 定位相对定位元素的定位是相对其正常位置。实例 h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } 尝试一下 » 可以移动的相对定位元素的内容和相互重叠的元素

乌鸦与树（crow）

阅读更多关于乌鸦与树（crow）

乌鸦crow 示例 HTML CSS JS 示例 HTML < script src = " https://code.jquery.com/jquery-1.12.4.min.js " > </ script > < script src = " https://d3js.org/d3.v4.min.js " > </ script > < script src = " https://threejs.org/build/three.min.js " > </ script > < script src = " http://baronwatts.com/scripts/LegacyJSONLoader.js " > </ script > < script src = " https://threejs.org/examples/js/controls/DeviceOrientationControls.js " > </ script > < script src = " https://threejs.org/examples/js/effects/StereoEffect.js " > </ script > < script src = " https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min

用css改变默认的checkbox样式

阅读更多关于用css改变默认的checkbox样式

自己常用的改变checkbox样式的两个方法：一.利用background用图片代替checkbox效果缺点：你首先得有一张好看的图片优点：浏览器兼容性好 <!doctype html> <html> <head> <meta charset="utf-8"> <title>chec</title> <style> #wrapper {margin: 20px auto;} #wrapper .input_check {position: absolute;width: 20px;height: 20px;visibility: hidden;} #wrapper span {position: relative;} #wrapper .input_check+label {display: inline-block;width: 20px;height: 20px;background: url(checkbox2.png) no-repeat;background-position: -31px -3px;} #wrapper .input_check:checked+label {background-position: -5px -3px;} </style> </head> <body> <h3>利用background用图片代替checkbox效果</h3>

DIV vs NAV tag with CSS Positioning

阅读更多关于 DIV vs NAV tag with CSS Positioning

问题 Quick question - hopefully easy answer. I know the <nav> tag is a block level element. Now I know whatever you put inside this tag can also be put inside a <div> in the sense of content and styling. Now when I set the position of this element to fixed ( position: fixed ) it works when I use a <div> with an id tag but not when I do it inside a <nav> tag. As long as I am using one <nav> tag, I could just style it using nav { style here } right? I don't necessarily need to use an id for it.

DIV vs NAV tag with CSS Positioning

阅读更多关于 DIV vs NAV tag with CSS Positioning

03JavaScript程序设计修炼之道_2019-07-02_21-47-36_ 鼠标弹起拖拽、放大镜、mouseenter&mouseleave、

阅读更多关于 03JavaScript程序设计修炼之道_2019-07-02_21-47-36_ 鼠标弹起拖拽、放大镜、mouseenter&mouseleave、

26drag.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; border: 20px solid gray; border-top-width: 30px; padding: 12px; background-color: blue; cursor: move; position: absolute; } </style> </head> <body> <div class="box" id="box"></div> <script> var box = document.querySelector("#box"); box.onmousedown = function(e) { var e = e || event; // 记住点击div的内部偏移量

模拟《意尔康》网站加载动画效果

阅读更多关于模拟《意尔康》网站加载动画效果

效果（纯css实现）：根本原理： css:animation: loader-fill 1s steps(19) forwards; html： <script src="http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/vendors/jquery/jq-1.11.2.min.js"></script> <script src="http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/vendors/jquery-cacheimage/jquery.cacheimage.js"></script> <div class="loader-wrapper fullscreen-extra" style="margin-top:50px; width: 1647px; min-height: 350px; "> <div class="abs loader valign-middle-by-top animate" style="background-image: url("http://yearcon-cn-asset-1.oss-cn-shanghai.aliyuncs.com/images/common/loader-sprite.png"); margin-top

CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）

阅读更多关于 CSS进阶（13）—— position:absolute如此高深，我当真不懂（中）

在上文中，我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性，本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。 1.absolute的流体特性在前面一文中，我们测试了很多“无依赖绝对定位”的特殊表现，事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性，这也是absolute被设计出来的本职工作。为了做好自己的本职工作，absolute还需要left，top，right，bottom四个属性的配合，通常，我们会根据阅读顺序(从左到右，从上到下)的需要，设置absolute元素的left和top值，来达到元素定位的效果，那么，如果仅设置一个方向上的值，会发生什么呢？这里我们不深入探讨这种情形，你只需要知道元素在被设置的方向上保持“绝对定位”的特性，而在另一个（水平或垂直）方向上保持相对定位特性即可。本节要深入探讨的是absolute的流体特性。说到流体特性，我们应该能很快想到之类的普通块级元素，实际上，绝对定位元素也具有类似的流体特性，而且在某些情况下比普通块级元素更强大！当然，absolute要实现自身的流体特性是有条件的，给元素直接设置 style="position:absolute;margin:auto;" 外边距的auto属性是不会有任何计算值的。那么，absolute元素才能拥有流体特性呢

订阅 position