![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
葡萄干是个程序员
我是一个菜鸟~~~
展开
-
使用CSS将图片转换成黑白(灰色、置灰)
转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]http://www.zhangxinxu.com/wordpress/?p=2547可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实转载 2015-07-29 17:22:02 · 18972 阅读 · 0 评论 -
CSS中常用的四种选择器
Css中常用的四种选择器1、类选择器(class选择器) 基本使用: .类选择器{ 属性名: 属性值; ... } 案例:/*类选择器*/.s1{ background-color: pink; font-weight: bold; font-size: 16px;原创 2015-07-30 15:34:12 · 2666 阅读 · 0 评论 -
JS动画框架及案例
JS动画效果:综合——运动框架 move.js1、简单动画 1-1、速度动画 D01_share.html 1-2、透明度动画 D02_opacity.html2、缓冲动画 2-1、缓冲动画 D03_speed.html3、多物体动画 3-1、多物体动画 D04_morespart01.html D04_morespart02.html 3-原创 2016-01-23 19:14:10 · 2059 阅读 · 0 评论 -
CSS中的选择器优先级考虑
先来看个例子:css02.html CSS id选择器 Hello CSS 百度 Hello HTML5 这是div这是p标签 样式表 css02.css#pid span{ color: red;}#divid{ color:b原创 2016-01-07 11:01:35 · 2029 阅读 · 0 评论 -
Javascript异步编程之setTimeout与setInterval
转载自: http://www.cnblogs.com/tugenhua0707/p/4083475.html?utm_source=tuicool&utm_medium=referralJavascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的转载 2016-01-25 15:33:36 · 633 阅读 · 0 评论 -
javascript下的瀑布流效果
以下瀑布流效果增加了本地加载数据的功能,实际上加载更多的图片应该通过网络进行获取,这里只是进行了本地图片传送的模拟。 目录结构如下:index.html JS瀑布流效果——布局原创 2016-01-27 12:15:09 · 486 阅读 · 0 评论 -
CSS中父div与子div——子div有内容,父div高度却为0?
我们可能在审查网页元素时,会发现这样的一种情况:案例 HTMLAndCSS.html HTML与CSS简单页面效果实例 --> 从上面的代码来看,包含一个父div和两个子div。而子div又有高度,但是审查元素时,却发现该父div却没有高度(所以此时父div的背景色#c原创 2016-01-10 22:32:40 · 20701 阅读 · 1 评论 -
jQuery下的瀑布流效果(改)
使用$(window).on("resize",waterfall); 使得瀑布流列数可以动态变化。包含加载数据的模拟。useJQ.html 瀑布流布局原创 2016-02-05 16:15:15 · 714 阅读 · 1 评论 -
带有分散效果的瀑布流(jQuery实现)
初始数据集中在窗口底部,通过动画移动摆动到正确的位置,同样模拟网络加载数据时,图片也从窗口底部“动画”摆放到正确的位置。如下图所示,这是初始数据移动的过程。移动结束后,初始数据摆放在正确的位置:加载数据——数据从窗口底部分散到正确的摆放位置:exec.html 带有分散效果的瀑布流原创 2016-02-05 16:57:58 · 1541 阅读 · 5 评论 -
CSS中的定位——position属性
CSS定位指的是 改变元素在页面中的位置。CSS定位机制:普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布)浮动绝对布局CSS定位包含的属性有:属性描述position把元素放在一个静态的、相对的、绝对的、或固定的位置中top元素向上的偏移量left元素向左的偏移量原创 2016-01-07 15:19:39 · 5840 阅读 · 0 评论 -
jQuery下的瀑布流效果
使用jQuery制作瀑布流效果原创 2016-01-29 10:33:20 · 534 阅读 · 0 评论 -
使用js实现tab选项卡效果
这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构,元素如何摆放,此外通过这样的摆放,通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听,当进行选项卡切换时,我们可以对所有内容进行隐藏,之后再对选中的内容进行显示以达到切换的效果。 效果如下: 点击“家居“可进行切换: 程序如下: 实践题 - 选原创 2016-01-29 10:42:49 · 9305 阅读 · 0 评论 -
使用js实现“别踩白块儿”游戏
界面如下: 点击”开始游戏“,”白格“将开始向下移动,此后再每一行上开始出现一个“黑格”,对应列上按下对应的键即可消除黑格,但不可跨行消除(即必须先消除”最近“一行上的”黑格“)(如第1列对应“D”键,第2列对应"F“键,第3列对应”J“键,第4列对应”K“键)。当然,除了可以使用键盘按键消除”黑格“外,可以使用鼠标点击除去“黑格”,这时可以跨行。当按错”键“或点击到”白原创 2016-01-29 11:07:01 · 5680 阅读 · 0 评论 -
使用jQuery、js实现必应搜索制作
实现过程参考自 慕课网,有关具体详情可参考视频。实现必应搜索制作,结果如下:点击提示框中的选项进行对应的跳转(在当前页面):使用Ajax提交http请求,从必应获取提示数据。在使用Ajax请求时,需要注意:Ajax发送请求的url地址与服务器地址必须是同一域名下。为了处理这里出现的跨域问题,采用jsonp方式(jsonp可用于解决主流浏览器的跨域数据原创 2016-02-09 19:55:21 · 1741 阅读 · 0 评论 -
网页在IE6下可能出现的小问题
我们制作网页过程中,需要对网页进行调试以兼容不同浏览器。这里使用IETester 针对网页在IE6进行调试,解决一些可能出现的问题。1、在IE6可能会出现双边距双边距出现的条件是当浮动元素的浮动方向和margin的方向一致时才会出现,包括左浮动并设置了margin-left 和 右浮动并设置了margin-right,这两种情况。这个使用IE6会把margin-right解析为原来的2倍。原创 2016-02-13 20:34:46 · 427 阅读 · 0 评论 -
简单新闻发布系统前台界面(html+css)
运行效果如下: 图片素材:bg.jpgheader_shadow.pngnews-icon.png index.html 新闻发布系统 首页 关于我们原创 2016-03-03 13:05:38 · 30890 阅读 · 0 评论 -
AJAX 跨域请求 - JSONP获取JSON数据
转载自:点击打开链接Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器转载 2016-02-03 15:20:38 · 617 阅读 · 0 评论 -
Ajax的实现和jQuery下的Ajax
什么是Ajax呢?AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。原创 2016-02-03 16:16:07 · 1445 阅读 · 0 评论 -
雅虎WEB前端网站优化 -- 34条军规
转载自:点击打开链接雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像)。1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,转载 2016-02-17 18:07:37 · 610 阅读 · 0 评论 -
html自定义复选框
自定义复选框的素材:icon-check-circle.pngicon-checked.pngcheckbox.html(为了方便起见,这里使用到了jQuery) 自定义复选框checkbox .checkbox { cursor: pointer; padding-left: 25px; color原创 2016-04-02 14:14:44 · 4506 阅读 · 0 评论 -
CSS3的基本介绍
知识点记录: 1、圆角效果 border-radius 如:border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 2、阴影 box-shadow 如:box-shad原创 2016-04-07 16:19:09 · 542 阅读 · 0 评论 -
CSS3的过渡 transition
这里只考虑 chrome 的兼容。transition.html Transition #block { width: 400px; height: 300px; background-color: #69C; margin: 0 auto;原创 2016-03-26 16:08:57 · 681 阅读 · 0 评论 -
CSS3让登陆面板旋转起来
这里只考虑chrome的兼容。LoginRotate.html 登陆面板旋转 body { font-family: "Microsoft YaHei", "微软雅黑"; } .container { /*创建3D场景*/ -webkit原创 2016-03-26 16:20:19 · 848 阅读 · 0 评论 -
CSS3选择器(上)
1、属性选择器 E[att^=val] 选择匹配元素E,且E元素定义了属性att,其属性值以val开头的任何字符串。 E[att$=val] 选择匹配元素E,且E元素定义了属性att,其属性值以val结尾的任何字符串。 E[att*=val] 选择匹配元素E,且E元素定义了属性att,其属性值任意位置包含了val。 换句话说,字符串与属性值的原创 2016-04-08 09:28:32 · 370 阅读 · 0 评论 -
CSS3中的3D旋转 rotate、3D位移 translate
这里只考虑 chrome 的兼容。3DrotateDemo.html 3D旋转的Demo #experiment { -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; -webkit-transf原创 2016-03-26 16:15:25 · 6896 阅读 · 0 评论 -
CSS3 卡片翻转(transform)
这里只考虑chrome的兼容。card1.html 卡片翻转——以下边为轴 #my3dspace { -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; overflow: hidden;原创 2016-03-26 20:45:32 · 3805 阅读 · 1 评论 -
他们的CSS3 3D正方体
摘自:程旭元 所分享的程序效果图如下:cube.html 3D正方体 1 2 3 4 5 6 html5shiv.js/* HTML原创 2016-03-26 22:00:57 · 1235 阅读 · 0 评论 -
CSS3实现曲线阴影和翘边阴影
效果图如下:index.html CSS3实现曲线阴影和翘边阴影 /*源于imooc的学习*/ body { font-family: "微软雅黑", "Microsoft YaHei"; font-size: 20px; } body,原创 2016-04-08 13:38:12 · 688 阅读 · 0 评论 -
【精心推荐】几款极好的 JavaScript 文件上传插件
转载自:点击打开链接 文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传、拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能。这篇文章向大家推荐几款很棒的JavaScript 文件上传功能增强插件。jQuery File Uploader这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示转载 2016-04-13 22:51:17 · 1183 阅读 · 0 评论 -
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
注意这里要求使用到Bootstrap框架的输入框组,如: Demo案例的效果图: 点击添加按钮,添加多行输入框组: 点击第3个原创 2016-04-30 00:20:36 · 13296 阅读 · 1 评论 -
网页中时光轴的简单实现
时光轴效果如下: index.html 时光轴 .container { width: 800px; margin: 50px auto; } .vertical-timeline { color: #FFF;原创 2016-04-30 14:17:16 · 7561 阅读 · 0 评论 -
伸缩自如的时光轴实现
上回说到简单时间轴的实现,这一次针对上回的实现的时光轴,增加时光轴收起的功能。为了方便重用,我分离css样式和js。使用过程中主要注意一下尽量使用css定义的时光轴样式即可。 时光轴收起功能的实现过程可以查看 timeline.js 中的注释。注意timeline.js是基于jQuery的。 效果图如下:时光轴展开:收起第一个时光轴上的内容:原创 2016-05-01 11:18:10 · 2339 阅读 · 0 评论 -
伸缩自如的时光轴实现——改进版
上回讲到的是时光轴“伸缩自如”的实现,如果基于响应式制作的话,可能存在着许多潜在的BUG。如:窗口变化时,时光轴的”收起“和”展开“,都发生了一些变形。为此,对原来的 timeline.js 进行了改进,Demo的效果仍与此前一致,没有多大的区别。 但是却了基于响应式进行操作,而不发生一些 奇葩 的结果。 改进版 timeline.js/** * Create原创 2016-05-01 20:12:19 · 738 阅读 · 0 评论 -
伸缩自如的时光轴实现_样式改版
针对前几篇文章中实现的”伸缩自如“的时光轴,对时光轴的样式进行又一次修改,效果如下: 点击”收起“后: 修改后的 timeline.css,如下:.vertical-timeline { color: #FFF; font-family: "微软雅黑", "Microsoft YaHei"; position: relat原创 2016-05-01 23:37:19 · 1815 阅读 · 0 评论 -
20个很有用的CSS技巧
转载自:20个很有用的CSS技巧导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看。1. 黑白图像这段代码会让你的彩色照片显示为黑白照片,是不是很酷?img.desaturate { filter: grayscale(100%); -webkit-转载 2016-05-26 09:56:50 · 574 阅读 · 0 评论 -
jQuery UI的简单使用,轻松实现二级菜单
jQuery UI 的API手册地址:http://api.jqueryui.com/ jQuery UI 实现百叶窗效果、菜单、Tab导航;最后组合 百叶窗效果 + 菜单,实现二级菜单。案例如下: 实验10-3 jQuery UI html { -moz-osx-font-smoothing: grayscale; -webkit-f原创 2016-05-26 10:21:23 · 4648 阅读 · 0 评论 -
基于Bootstrap使用jQuery实现简单可编辑表格
editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作,其中可以设置参数,如:operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列;(这里的操作包括 编辑当前行、在当前行下添加一行、删除当前行)handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假;edit、save、cancel、add、conf原创 2016-04-19 23:32:08 · 18757 阅读 · 5 评论 -
bootstrap-table的入门使用——从服务器获取数据
参考: Bootstrap Table 查询(服务器端)、刷新数据这里需要使用 bootstrap-table 插件。使用了CSS3loader显示加载过程。效果如下:index.html Refresh from url after use data option原创 2016-06-01 10:45:27 · 20096 阅读 · 0 评论 -
打造 Bootstrap Tags Input 同 Modal 结合的利器
Boostrap Tags Input 插件基于Bootstrap实现了如:打Tag 和 删除Tag等功能,如:原创 2016-06-23 22:10:32 · 3850 阅读 · 0 评论 -
打造 Bootstrap Tags Input 同 Modal 结合的利器(改)
对上文 打造 Bootstrap Tags Input 同 Modal 结合的利器 中的 js 进行整合,如下:bootstrap-tagsinput-demo.js/** * Created by DreamBoy on 2016/6/23. */$.fn.initTagsInput = function(arg1, arg2) { // bootstrap-tagsin原创 2016-06-23 22:15:52 · 2618 阅读 · 0 评论