background | 易学教程

活动页和题来了（滚动抖动）

阅读更多关于活动页和题来了（滚动抖动）

伴随着html5和css3的成熟，页面展现的越来越绚丽越吸引人，尤其体现在各大网站的专题活动上。现在写了一个简略的框框。实现思想：当滚动条滚动时，滚动到底部切换到下一屏，滚动到顶部时切换到上一屏。点击按钮时滚动到对应的屏。代码简略： 1、滚动条滚动方向，-1向下，1向上，注意：如用ie，请用ie9以上的浏览器看效果。 document.addEventListener(mousewheel,function(e){ e = e || window.event; if(!isFirefox){ direct = e.wheelDelta>0?-1:1; } else{ direct = e.detail<0?-1:1; } },false); 2、滚动到那一屏 $(document).scroll(function(){ rollH = $(this).scrollTop(); if(islock){ if((rollH===docH-winH) && (direct === 1 )){ num++; if(num>5){ num = 5; return; } if(!((num===5)||(num===0))){ islock = false; } running(num); } else if((rollH ===0)&&(direct === -1)){ num--

Web前端基础——jQuery（二）

阅读更多关于 Web前端基础——jQuery（二）

一、jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中 var arr=[1,3,5,7,9]; arr=$.map(arr,function(item){ return item*10; }); alert(arr); [10,30,50,70,90]; //上例是将数组中的每个元素乘10,然后返回新的数组 2) $.each(Array,fn); 对数组中的每个元素,调用fn这个函数进行处理,但是,没有返回值,比上例更常用 //例一 var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"]; $.each(nameList,function(key,value){ //对于上面的数组来说,key就是索引,value就是元素值 alert(key+":"+value); }); //例二 var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"}; $.each(nameList,function(key,value){ alert(key+":"+value); }); /

How to ignore SwiftUI modal background, or make modal background clear/transparent?

阅读更多关于 How to ignore SwiftUI modal background, or make modal background clear/transparent?

问题 Currently we get a free opaque white/black background for swiftUI modal. Is there anyway to remove the free opaque color and make the modal view transparent? In the image below, the end result should be able to see the image even with modal presented. 回答1: based on this code snippet you can create viewcontroller extension and modify your presentation. here is modified code: struct ViewControllerHolder { weak var value: UIViewController? init(_ value: UIViewController?) { self.value = value }

jQuery 入门

阅读更多关于 jQuery 入门

不能正常引用jQuery-2.2.4.min.js所以代码没生效 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 官网: 点击中文文档: 点击书写规范 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> //代码不能写在引用文件这个容器里 <script> $somecode //$符号就表示jQuery jQuery.somecode //等同 </script> PS:由于编辑器的JS编码问题中文在js编码过程中没有使用utf-8.显示乱码.实际代码和注释源码有区别选择器和筛选器类似JS有#id(id选择器),element(元素选择器即标签),class(class选择器),组合选择器(selector多种选择器组合),层级选择器,*(选择全部)... 基本选择器在js基础上稍微修改了一下,是用#代表id, .class代表class,标签直接使用标签名 PS:id选择器,使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[]^`{|}~）作为名称的文本部分，

css布局知识点汇总

阅读更多关于 css布局知识点汇总

　　　　昨天早上看到了一篇很棒的文章，这篇文章将布局的一些知识点整理的很不错。我也想整理一下，这样在以后的项目中可以活学活用，避免只用一种方式。参考文章：https://segmentfault.com/a/1190000013565024；https://segmentfault.com/a/1190000008789039#articleHeader4 　　　　前端布局是页面构建过程中很基础，很重要的一环。这里介绍一些我了解的，不足的地方大家可以补充。　　　一、常用的居中方法　　　　　1、水平居中　　　　　　　　　①如果子元素是行内元素，可以直接设置父元素使用:text-align:center的方式，使子元素水平居中；　　　　　　　　　<div class="container"> 　　　　　　<span>css布局整理</span>　　　　　　　　　</div> 　　　　　　　　　　.container{ 　　　　　　 text-align: center; 　　　　　　　　　　} 　 ②将子元素变为行内块元素，然后设置　父元素text-align:center的方式; 　　　　　　　　　　　优点：兼容性好，可兼容IE6/IE7 　　　　　　　　　　缺点：子元素的文字也是自动水平居中的，如果不需要文字水平居中，需要设置text-align:left/right

jQuery学习(三)——选择器总结

阅读更多关于 jQuery学习(三)——选择器总结

1、基本选择器 id选择器：$(“#id名称”); 元素选择器：$(“元素名称”); 类选择器：$(“.类名”); 通配符：* 多个选择器共用(并集) 案例代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本选择器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("#one").css("background-color","pink"); 12 }); 13 14 $("#btn2").click(function(){ 15 $(".mini").css("background-color","pink"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("div").css("background-color","pink"); 20 }); 21 22 $("#btn4")

前端学习（530）：等分布局得间距方案第二种方式

阅读更多关于前端学习（530）：等分布局得间距方案第二种方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>等分布局</title> <style> .parent{ width: 100%; display: table; margin-left: -10px; } .col1,.col2,.col3,.col4{ height: 300px; display: table-cell; padding-left: 10px; box-sizing: border-box; } .col1 .inner{ background-color: black; } .col2 .inner{ background-color: lightblue; } .col3 .inner{ background-color: red; } .col4 .inner{ background-color:yellow; } .inner{ height: 300px; } </style> </head> <body> <div class="fix"> <div class="parent"> <div class="col1"

轮播图

阅读更多关于轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 ul{ 12 list-style: none; 13 overflow: hidden; 14 } 15 ul li{ 16 float: left; 17 width: 200px; 18 height: 50px; 19 border:3px solid black; 20 text-align: center; 21 line-height: 50px; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>1</li> 28 <li>2</li> 29 <li>3</li> 30 <li>4</li> 31 <li>5</li> 32 </ul> 33 <script> 34 // 除了通过ID名获取标签,还有通过标签名获取标签 35 var lis=document.getElementsByTagName('li'); 36 for(var i=0;i<lis.length;i++){ 37 console.log(lis[i]); 38 //

CSS 样式的优先级小结

阅读更多关于 CSS 样式的优先级小结

1. 同一元素引用了多个样式时，排在后面的样式属性的优先级高例如，下面的 div，同时引用了 [.default] 和 [.user] 中的样式，其中 [.user] 样式中的 width 属性会替换 [.default] 样式中的 width 属性。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .default{ width: 100px; /* 定义 width 属性 */ height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } .user{ width: 150px; /* 这里 width 的值替换了前面 width 的值 */ } </style> </head> <body> <div class="default user"></div> </body> </html> 2. 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器例如，下面的 div 即获取 id

jQuery插件开发精品教程，让你的jQuery提升一个台阶

阅读更多关于 jQuery插件开发精品教程，让你的jQuery提升一个台阶

在园子里有很多关于jQuery插件的文章，尤其以下2篇文章: 不定义JQuery插件，不要说会JQuery jQuery插件开发精品教程，让你的jQuery提升一个台阶这2位大神基础讲的很清楚，在这里就不多说了，主要那个小需求来练练：需求说明：一个标题插件，可以通过后端取数，自定义标题，自定义样式讨论：插件通常不都是加载一下就不操作了，比如表格插件，加载数据，刷新等等。今天练习的控件就简单给大家理理写控件的思路，（有问题，有意见大家指出。） ; (function ($) { $.fn.cyTitle = function (options) { //一些操作 return new cyTitle(options); } function cyTitle(Options) { //这里定义插件属性 $.extend(this, Options); this.init(Options); } cyTitle.prototype = { init: function () { //这里构建插件内容 } } })(jQuery) 每个插件都应该包含以上部分，这个就不多说了(上面2为大神的文章说的很清楚)，从实际编写出发。 ( demo ) 点击加载控件列出标题(未定义标题)，点击刷新更改标题（ajax取数）。下面一步步看代码:

订阅 background