
HTML5
文章平均质量分 68
china_skag
这个作者很懒,什么都没留下…
展开
-
CSS3自定义滚动条样式 -webkit-scrollbar
::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webki原创 2017-10-12 20:57:54 · 693 阅读 · 0 评论 -
解决Ajax跨域问题:Origin xx is not allowed by Access-Control-Allow-Origin.
今天一个Ajax跨域问题,代码如下: title $.ajax({ url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228", type:'GET', success: funct原创 2015-01-07 15:14:46 · 16590 阅读 · 1 评论 -
onselectstart与onselect—禁止选择或禁止复制
这两个事件看起来很相似,事实上却非常的不同。onselectstart使用js禁止用户选中网页上的内容,IE及Chrome下的方法一样。使用onselectstart,例如 IE: Firefox:,控制css: body { -moz-user-select: none; } onselectstart几乎可以用于所有对象,其触发时间为目标对象被原创 2014-12-01 16:13:03 · 21927 阅读 · 0 评论 -
设置微信分享的标题 缩略图 连接 描述
var imgUrl = 'http://topic.xcar.com.cn/201403/ad_q3/pic/banner.jpg';var lineLink = 'http://topic.xcar.com.cn/201403/ad_q3/index.php';var descContent = "http://topic.xcar.com.cn/201403/ad_q3/index.ph转载 2014-09-27 13:55:54 · 24138 阅读 · 2 评论 -
HTML5 实现橡皮擦的擦除效果
:转载 2014-09-27 15:12:02 · 12701 阅读 · 2 评论 -
JQuery Ajax Post实例
function test() { $.ajax({ //提交数据的类型 POST GET type: "POST", //提交的网址 url: "testLogin.aspx", //提交的数据 data: { Na原创 2014-08-22 17:27:43 · 827 阅读 · 0 评论 -
视差滚动原理及实现
作为一种优雅酷炫的页面展示的方式,视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱,优设的2014年网页设计趋势中依然能够看到它的影子,所以我们不得不来好好研究下视差滚动的原理和实现方式。1.视差滚动视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术。国内外的设计师们实现了很多原创 2014-06-17 18:41:19 · 1183 阅读 · 0 评论 -
滚动条的监听 与内容随着滚动条动态加载
当滚动条滑到底部时自动加载内容 body{ background-color: #808080; } #main{ margin:0 auto; width: 960px; } #content{ pos原创 2014-06-13 18:14:01 · 28857 阅读 · 3 评论 -
jQuery实现页面滚动时层智能浮动定位
一、应用展示关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下:随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示:类似的效果在新浪微博上也有:当页面滚动,新动态提示原创 2014-05-22 13:10:53 · 2084 阅读 · 0 评论 -
javascript 控制 table tr display block 显示模式时,只对第一个单元格有效
有一个简单的 table:table > tr > th>编号th> th>类型th> th>详细th> th>创建时间th> th>修改时间th> th>操作th> tr> tr> td>5th> td>TECHth> td>测试内容th> td>2014−01−10 16:56:31th> td>−−th> td>修改 删除th> tr>原创 2015-06-02 16:42:15 · 1801 阅读 · 0 评论 -
CSS让整个网页成灰色
html{filter: grayscale(100%);-moz-filter: grayscale(100%);-o-filter: grayscale(100%);-webkit-filter: grayscale(1);}原创 2015-08-14 14:59:34 · 6675 阅读 · 0 评论 -
UEditor不能获取文章内容的解决办法
问题应该处在和两个标签的嵌套问题上。标签在外就没有问题,而标签在外就出问题了。改正后问题解决! var ue = UE.getEditor('container');原创 2017-04-14 11:06:42 · 3157 阅读 · 1 评论 -
HTML+CSS:圆形和圆角图片格式
效果展示 实现代码DOCTYPE html>html>head> title>JcMantitle> style type="text/css"> .image1{ margin-top: 100px; width:200px; height:200px; border原创 2017-04-12 18:18:46 · 4582 阅读 · 0 评论 -
bootstrap3学习:响应式布局layout
1、像素宽度分类在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768pxsm:small 窄屏幕,默认指浏览器像素宽度大于等于768pxmd:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992pxlg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px转载 2016-08-24 16:36:17 · 6425 阅读 · 2 评论 -
移动页面自适应手机屏幕宽度
网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方。1、使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。首先解释该标签的含义:如果你完全不了解这个标签的使用需要先百度一下。解释:content中的原创 2016-01-15 14:55:38 · 736 阅读 · 0 评论 -
HTML5----响应式(自适应)网页设计
第一步:在网页代码的头部,加入一行viewport元标签viewport是网页默认的宽度和高度,上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需原创 2016-01-15 14:51:28 · 1258 阅读 · 0 评论 -
JS解析json数据(如何将json字符串转化为数组)
New Document var t="{'firstName': 'cyra', 'lastName': 'richardson', 'address': { 'streetAddress': '1 Microsoft way', 'city': 'Redmond', 'state': 'WA', 'postalCode': 98052 },'phoneNumbers': [ '原创 2016-01-11 19:46:20 · 4111 阅读 · 0 评论 -
手机浏览器javascript事件及css总结
1. viewport:也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个:width - // viewport 的宽度 (范围从200 到10,0原创 2016-01-18 12:31:30 · 2269 阅读 · 0 评论 -
网页宽度自动适应手机屏幕宽度的方法
在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。其中:width=device-width :表示宽度是设备屏幕的宽度initial-scale=1.0:表示初始的缩放比例minimum-scale=0.5:表示最小的缩放比例maximum-scale=2.0:表示最大的缩放比例user-scalable=yes:表示用户是否可以调整缩放比例 如果原创 2015-08-21 12:44:23 · 698 阅读 · 0 评论 -
玩转html5(二)----用canvas结合脚本在画布上画简单的图
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题,可以在每次重新画一个图时重新开启路径,画完后关闭路径。这些代码是在猎豹浏览器上实现的,有些浏览器转载 2014-06-24 14:17:10 · 1534 阅读 · 0 评论 -
视差滚动教程、实现方法、源代码
最近很流行“视差滚动”效果,抛开设计不说,前端上的实现方法很有意思,国内详细的教程不多,所以自己研究别人网站,实践总结。一、例子SmaShingSparkQQ浏览器二、原理传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,偶尔有一些背景固定的网页。顾名思义“视差滚动”就是通过滚动这个行为实现视觉上的层次错落的错觉,从而形成立体的运动效果。原创 2014-06-23 20:05:23 · 1780 阅读 · 0 评论 -
玩转html5(五)---月球绕着地球转,地球绕着太阳转
关于运动速度的参数与真实速度有点差距,大家可以自行调整 地球绕着太阳转,月球绕着地球转 您的浏览器不支持canvas //获取画布 var canvas=document.getElementById('canvas'); //获取绘图环境 var cxt=ca转载 2014-06-24 14:20:41 · 3827 阅读 · 2 评论 -
30款jQuery常用网页焦点图banner图片切换
1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 4、jQuery iNav插件图片分类导航选项卡切换图片滚动列表原创 2014-02-25 11:20:55 · 36806 阅读 · 0 评论 -
10 个很棒的 jQuery 代码片段
http://www.catswhocode.com/blog/10-awesome-jquery-snippets 1、图片预加载(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() {原创 2014-02-24 19:43:22 · 710 阅读 · 0 评论 -
IE浏览器版本过低iealert提示—Jquery插件
IE浏览器版本过低iealert提示Jquery插件是一款非常实用的功能特效,虽然现在很多网站都已经放弃对IE6的支持,但是也会部分的用户使用的IE6浏览器,在没有友好的提示下用IE6打开网站的话就会看起很乱,用户可能看一次就不想看了,这样会导致公司的一些潜在客户流失,些Jquery插件刚好解决了这个问题......默认情况下是低于IE8浏览器都会弹出提示框,大家想看到效果就用IE6、IE原创 2014-02-24 20:04:30 · 2370 阅读 · 0 评论 -
如何让DIV水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。CSS让DIV水平居中说明,本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后原创 2014-01-20 23:26:51 · 767 阅读 · 0 评论 -
WebApp与Native App有何区别
今天看的一篇关于html5的Web App与Native App的技术分析,真的很棒分享一下!自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebA原创 2013-12-04 12:38:38 · 1286 阅读 · 0 评论 -
HTML5-Canvas标签使用实例一
一、什么是Canvas标签?Canvas标签有什么用途?这里过多的概念性解释我就不多写了的,大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一个API标签。 标签定义图形,比如图表和其他图像。 标签只是图形容器,您必须使用脚本来绘制图形。二、如何使用Canvas API来画一个正方形,并加上对角线?1、首先在HTML内设置一个Canvas标原创 2013-12-02 10:33:48 · 931 阅读 · 0 评论 -
jQuery Fancybox插件使用参数详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的。今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的。Fancybox的项目主页地址:http://fancybox.net/原创 2014-04-16 22:39:25 · 35954 阅读 · 0 评论 -
FancyBox使用
FancyBox使用方法:官网:http://fancybox.net/1、首先引入基本JQuery核心库与FancyBox插件库jquery.easing-1.3.pack.js是fancybox中的一些动画效果可选。2、要引入样式文件3、在页面中使用,只要进行一些简单的配置就可以看到效果了$(function() { $("#content原创 2014-04-16 22:42:00 · 2077 阅读 · 0 评论 -
玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处。今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性。这些代码是在猎豹浏览器下实现的。html5新增的input类型有:email,url,number,range,date pic原创 2014-06-24 14:16:09 · 817 阅读 · 0 评论 -
多终端WEB页面字体处理方法总结
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番。后来了解到的手机系统 ios、android 等是不支持微软雅黑字体,为了满足产品的需要,保证视觉稿的还原度,手机端是如何定义微软转载 2014-06-23 20:39:36 · 1652 阅读 · 0 评论 -
超慢速移动动画使用CSS3实现流畅效果
三角碎片以非常缓慢的速度旋转移动,如果使用JS实现会出现一像素一像素移动的卡顿使用CSS3会获得非常理想的效果transform: translate3d(80px, 150px, 0px) rotate(1220deg);transition: transform 30s linear 0s;上面一个属性表示图像变换translate3d(80px, 150px, 0p原创 2014-06-23 20:26:14 · 2743 阅读 · 0 评论 -
玩转html5(三)---智能表单(form),使排版更加方便
form表单学习笔记 <!-- 在旧版的html中,form表单与input等元素必须嵌套使用,为了排版方便,在html中提出了新方法 表单的多个内容不必非得放到一块,为前台美工提供了很大的方便--> 邮箱 : 用户名:转载 2014-06-24 14:18:29 · 2494 阅读 · 0 评论 -
玩转html5(四)----使用canvas画一个时钟
先给个效果图,我画的比较丑,大家可以自己美化一下,直接上代码: 您的浏览器不支持canvas //获取画布 var clock=document.getElementById('clock'); //设置绘图环境转载 2014-06-24 14:19:39 · 778 阅读 · 0 评论 -
CSS3元素闪烁效果
@-webkit-keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0.1; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ }}@keyframes twinkling{ /*透明度由0到1*/ 0%{ opacity:0.1; /*透明度为0*/ } 100%{ opaci原创 2014-06-23 20:17:28 · 14635 阅读 · 0 评论 -
js根据客户端浏览器类型,判断跳转官网/手机网站
var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone o原创 2014-05-22 18:53:10 · 9215 阅读 · 1 评论 -
jquery slider游标step
div.demo { padding: 110px !important; } $(function() { $( "#slider" ).slider({ range:"min", min:0, max:100, step:10,原创 2014-05-13 18:30:57 · 1878 阅读 · 0 评论 -
暴强:用iOS设备控制的HTML5“小蜜蜂”游戏
摘要:红白机上的经典“小蜜蜂”游戏在HTML5技术下得到了革新:英国伦敦的Webdigi公司运用HTML5结合Node.js进行开发,扫描二维码使得游戏在PC浏览器中显示,玩家通过左右摇晃iPhone/iPad控制飞船,向小蜜蜂发起攻击。近日,英国伦敦一家专注于Web App开发的公司Webdigi针对经典FC游戏“小蜜蜂”进行了一次有趣的翻新:用HTML5结合Node.js技术彻底改变该转载 2013-11-28 12:35:51 · 1113 阅读 · 0 评论