xia 发布的文章
-
整理国外分享和登录方式
facebook分享代码(直接拼接分享地址的方式) var fbHref = '分享地址'; $("#Jfacebook").on("click", function() { var _uri = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(fbHref) +"&display=popup&ref=plugin&src=share_button"; window.op......
-
canvas学习案例之简单的物理运动
这次主要写2种简单的运动效果，包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理，其核心思想是先定义一个初始状态，然后定义一个定时器，定时器内执行一个方法，在这个方法中要清除当前的画面，然后重新绘制需要变化的效果。由于人眼存在残影，所以短时间内的中断的变化可以看成是连续的变化。 以下代码都是基于下面的html结构 <canvas id="canvas" width="728" height="400"> 你的浏览器不支持canvas，请跟换其他浏览器试一试 </c......
-
简单的canvas绘图demo
最近在看canvas基础知识，刚学完绘制路径、矩形，设置线条、颜色、样式和阴影等，就想码下demo巩固下基础知识。于是网上搜了，找到了绘制XP壁纸的例子，里面用到了前面说到的各个知识点。好了，进入主题了。 html代码： <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">浏览器居然不支持Canvas?赶快换一个吧！！</canvas> js代码： window.onload = fu......
-
关于数据整理和海外分享的总结
制作页面经常遇到编辑丢一份表格或者word文档过来，这时就需要我们整理数据，为了方便后续的修改，整理成以下数据： var arr = { 'my': { 'name':'【回合】', 'example':'我的回合，我的回合，时间是一条不能倒流的河。', 'from':'《梦幻西游》手游' }, 'dtws':{ 'name':'【PK】', 'example':'物资pk:为团而生，为团而死。, 'from':'《大唐无双零》' }, 'dty......
-
阴阳师日本官网总结
1、最近做阴阳师日本官网，其中有个功能是获取预约人数，设计稿上的人数是这样151,567,000，想了想自己写还有点麻烦，于是网上copy了代码，再修改了下。 其中，有一点需要注意的是：函数中的str是字符串，所以需要把数字进行转成字符串，再传值。 function formatNum(str) { var newStr = "", count = 0; if (str.indexOf(".") == -1) { for (var i = str.length - 1; i >= 0; ......
-
大话西游手游官网改版总结
最近做大话西游官网改版，从先前的版本中学到了不少知识，总结了分享下 1、加载背景图片,把背景图放在showBg样式里 function loadBg(ele) { ele.each(function() { var $this = $(this); if ($this.hasClass('showBg')) { return } $this.addClass('showBg'); }) } 2、加载图片，把图片地址放在data-src属性里，如果存在data-src就放在sr......
-
Bug汇总
又有一段时间没整理了，在这汇总下最近遇到的bug和解决方法 1、去除inline-block元素间间距的两种方法 <div class="abc"> <a href="">a</a> <a href="">b</a> </div> /*方法一*/ .abc{ display: inline-table; //chrome word-spacing: -6px; } a{ word-spacing: 0; ......
-
深入了解DOM对象
DOM是文档对象模型(Document Object Model)是基于浏览器编程的一套API接口，W3C出台的标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器与标准最接近。 通过 DOM，您可访问 HTML 文档中的每个节点。 查找元素 1、直接查找 getElementById(id) //获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) //获取带有指定标签名的对象的集合 getElementsByClassName //获取所有指定类名的元素 getA......
-
使用jQuery快速解决IE9以下浏览器无法支持input的placeholder属性的问题
placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。然而PC端页面也常常需要用到这个属性，效果表现为当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。 要如何解决ie9以下浏览器无法支持的问题呢，可参考天下手游官网： http://tx.163.com/index.html 大概的代码如下： <form method="post" cl......
-
window.location.hash使用总结
最近做项目经常与window.location.hash打交道，在这总结梳理下。 location.hash可以用来获取或设置页面的标签值，比如http://space.163.com/m/#about的location.hash="#about"。通过window.location.hash = hash 这个语句可以调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用，然后根据hash值的不同来显示不同的模块。 var hash; hash = (!window.location.hash) ? "#about" : win......
-
即时监听输入框值的变化
最近做项目涉及到textarea限制输入长度的问题，搜集整理下跟大家分享: 如果需要即时监听输入框值的变化，建议使用onpropertychange事件! onpropertychange事件，顾名思义，就是property(属性)change(改变)的时候，触发事件。这是IE专有的！如果想兼容其它浏览器，有个类似的事件，oninput！ JS写法： function immediately() { var element = document.getElementById("mytext"); if (/msie/i.test(naviga......
-
index总结和移动兼容问题
做项目经常要用到index，关于index的几种用法，常常感到困惑。总结了一下，在这里列出来分享下。 1、index索引问题 <div id="nav"> <a href="#">建站素材</a> <p>建站素材</p> <a href="#">jquery特效</a> <a href="#">懒人主机</a> <a href="#&qu......
-
常用js汇总
这里收集了一些常用的js代码，拿出来跟大家分享 判断图片是否加载完 有时候你可能需要检查图像是否已经加载完成，以便继续执行相应的js代码 function loadImage1(url,callback){ var img = new Image(); img.onload = function(){ //图片加载完成后执行的操作 } img.src = url; } 图片按某个尺寸等比缩放 function img1(picW,picH,maxWidth,maxHeight){ var Ratio, wRat......
