废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title> <style type="text/css"> body{padding:30px;margin-left:450px;margin-top:200px;width:350px;border: 1px solid #98AFB7; } .progressBar{width:280px;height:20px;border: 1px solid #98AFB...
一、原生js： /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.type == "js") { document.writeln("<script type=text/javascript src="+ jsonData.path + jsonData.url+"></script>"); } else if...
弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终...
js函数，可以放到单独的js文件中也可以放到当前页的<head>标记之内代码如下:function getCSS(){ datetoday = new Date(); timenow=datetoday.getTime(); datetoday.setTime(timenow); thehour = datetoday.getHours(); if (thehour<12) display = "1.css"; else if (thehour>12) //样式表的名称，或者你可以加上路径 display = "1.css"; else ...
一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码，涉及到的模块比较多，(水平有限)代码比较难看懂；自己结合了一些书籍内容，总结一下。先说一下ready函数的实现思路：变量ready通过表达式赋值，右侧为一个自执行匿名函数，在这个匿名函数中，首先为各个浏览器的事件绑定处理函数，并为isReady赋值(根据事件异步处理程序来确定)，然后返回一个传参闭包，...
一开始少写了个分号(红色的),怎么搞都不对. var style = document.createElement("STYLE"); document.body.appendChild(style); style.onerror = function(){ alert("here1") } style.onreadystatechange = function(){ alert("here2"); } var sheet = style.styleSheet || style.sheet; if(sheet.addImport) sheet.addImport("aa.css"); else sheet.insertRule("@import url('aa.css');",sheet.cssRules.length);
css3实现动态波纹特效，由于css3里面有过渡和动画效果，现在利用css3实现动态波浪效果就很简单了，直接使用transform来实现就ok， 使得translateX 产生偏移就可以不断实现循环动态效果，这样就比传统的flash来实现更为简单。而且对页面也比较友好的。本文主要和大家介绍css3实现波纹特效、H5实现动态波浪效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下，希望能帮助到大家。比如实现以下的背景波纹特效：html5结构：<p cla...
1 /*css 初始化 */ 2 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 3 fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } 4 ul, ol { list-style:none; } 5 input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";} 6 select, input { vertical-align:middle; } 7 select, input, textarea { font...
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#content{width: 500px;height: 300px;margin: 40px auto;position: relative;transform-style: preserve-3d;}#content>div{width: 100%;height: 100%;position: absolute;transform-origin: center bottom;}#content img{width: 100%;height: 100%;}#next{position: absolute;top:190px;left: calc(33% - 60px...
实现div内容水平居中实现方案一：margin:0 auto;div{height:100px;width:100px;background:red;margin:0 auto;} <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>div水平居中</title></head><body><div></div></body> </html> 实现div水平居中方案二：position：absolute;绝对定位div{height:100px;width:100px;background:red;position:absolute;left:50%;right:50%;margin: auto; }实现div水平垂直居中实现方案...
链接是指在电子计算机程序的各模块之间传递参数和控制命令，并把它们组成一个可执行的整体的过程。链接也称超级链接，是指从一个网页指向一个目标的连接关系，所指向的目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮件地址、文件、甚至是应用程序。本篇为大家总结了8个关于html、css链接的实例代码，如下：1. 教你如何在html中插入链接每个网页都已一个地址，用URL()标识，通常在网站内部创建链接时，...
用html画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下：最终效果图PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！首先，先把HTML结构搭建好：<p class="wrapper"><!--叮当猫整体--><p class="doraemon"><!--头部--><p cl...
最终效果如下图-2，有bug：就是整数后点击%号结果正确，如果小数后面点击%的话结果就错误！其他都正常，求指点：input的value是string类型的，在JS中改如何正确处理下图-1中的if部分？？图-1图-2HTML代码如下<body><p id="calculator"><p class="LOGO"><span class="name">简单的计算器</span><span class="verson">@walker</span></p><p id="shuRu"><!--screen输入栏--><p class="screen"><input type="text" id="screenName" nam...
CSS3绘图实例代码*{ margin:0; padding:0;}body { background: #fff;}.color1{ background: #ffb400;}.color2{ background: #e78500;}.color3{ background: #bd5d00;}.color4{ background: #9e3300;}.color5{ background: #772400;}div{ overflow: hidden;}.wrapper{ width:450px; height:450px; left:50%; top:50%; margin:-225px 0 0 -225px; position: absolute;}.top{ width:48px; height:62px; top:9px; left:232px; position...
CSS实现的多行文本垂直居中实例代码: 将一行文本在容器中垂直居中是非常简单的，只需要两句代码就好了，例如: div{ width:100px; height:100px; line-height:100px;} 以上代码可以实现单行文本在div中垂直居中效果，只要将div的height属性值和line-height设置为相同就可以了。 但是以上代码并不能实现多行文本垂直居中下过，下面再看一段代码实例: 蚂蚁部落.wrapper { width:200px; height:200px; back...