4yu2JdefgeRW
一、功能简述 正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接： 不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神，痛彻心扉，穿越前世今生。但是，如果有更加方便快捷的分享方式，这种冷淡得让人结冰的场面或许就不会经常出现。 一般翻译软件都有划词翻译功能，例如有道桌面词典的桌面划词翻译功能： 启用后，随便选中那个软件的一段文字，就会出现类似这样子的浮动提示框： 在web页面上，我们也是可以实现类似的效果的：划词→显示提示→分享。这就是本文要展示的内容...
1.地图版： <!DOCTYPEhtml> <html> <head> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <title>demo</title> <scripttype='text/javascript'src='//code.jquery.com/jquery-1.8.3.js'></script> <scriptsrc="http://maps.google.com/maps/api/js...
1.通过经纬度，计算直线距离 <scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> <script> varp1=newgoogle.maps.LatLng(45.463688,9.18814); varp2=newgoogle.maps.LatLng(46.0438317,9.75936230000002); //calculatesdistancebetweentwopo...
Javascript版: //: // //Thisroutinecalculatesthedistancebetweentwopoints(giventhe //latitude/longitudeofthosepoints).Itisbeingusedtocalculate //thedistancebetweentwolocationsusingGeoDataSource(TM)prodducts // //Definitions: //Southlatitudesarenegative,eastlongitudesarepositive // //Passedtofunction:...
ajax.php代码： $address=$_GET['address']; $xml=file_get_contents('https://maps-api-ssl.google.com/maps/api/geocode/xml?address='.urlencode($address).'&sensor=false'); $arr=xml2array($xml); $output=$arr['GeocodeResponse']['status']; 主要是利用了谷歌接口：https://maps-api-ssl.google.com/maps/api/geoc...
在上一篇文章中，我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果。手机摇一摇可以应用到很多场景中，如摇一摇换抽奖，摇一摇搜歌等。本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手机摇一摇换衣效果。 注意，这是一篇WEB知识综合应用的文章，阅读本文前提是，您需要有HTML5，jQuery，PHP，MySQL等相关方面的基础知识。 HTML 我页面中默认展示产品信息（某品牌连衣裙产品图片和文字说明），当然实际应用中可以从数据库中获取产品信息。 <divid="pro"rel="1"> <p>使劲晃动您的手机<...
HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。 查看演示下载源码 DeviceOrientation包括两个事件： 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。 2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。 HTML 页面上有一个divh...
我们浏览有些网页的时候，当拉动浏览器的滚动条时到页底时，页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术，必应图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 滚屏加载技术，就是使用Javascript监视滚动条的位置，每次当滚动条到达浏览器窗口底部时，触发一个Ajax请求后台PHP程序，返回相应的数据，并将返回的数据追加到页面底部，从而实现了动态加载，其实就是一个典型的Ajax应用。本文将使用jQuery，结合PHP，mysql以及JSON，为您讲解如何应用滚屏加载技术到您的项目中去。当然，阅读本文的前提是...
我们在一些微博网站上可以碰到这样的应用，微博内容列表没有使用分页条，而是一次加载一定数量的记录显示在列表页，当用户浏览到列表页底部时，可以通过单击“查看更多”来加载更多记录。本文我将结合jQuery和PHP给大家讲述如何实现这种应用。 基本原理：页面载入时，jQuery向后台请求数据，PHP通过查询数据库将最新的几条记录显示在列表页，在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到列表页。其实就是Ajax分页效果...
ViewportResizer的开发背景 现在开发人员如果要开发一个同时支持PC端与手机端的网站的话，由于电脑和手机显示屏肯定不一样大小的，所以要跟对手机等移动设备进行单独地测试，而对于电脑上的浏览器来说，其视角一般比电脑的分辨率稍微小一点，但是肯定比手机设备要大得多了，如果我们每次测试的时候手动地调整浏览器进行缩放的效果和手机中显示的效果并一定是一样的，因为电脑上的浏览器缩放到一定程度就会出现滚动条，无法达到逼真的测试效果，所以我们需要一款能够改变PC机中浏览器的视角的谷歌浏览器插件。 ViewportResizer的简介 ViewportResizer是一款可以自由调整当前浏览器视角大...
jquery.qrcode.js是一个纯浏览器生成QRcode的jQuery插件，它使用非常简单，生成的QRcode无需下载图片，并且不依赖第三方服务，比如最近Google服务在国内访问不稳就造成我好几个网站的QRcode不能使用，并且压缩之后大小小于4K。 jquery.qrcode.js使用 1.加载jQuery和jquery.qrcode.js： <scripttype='text/javascript'src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> <script...
二维码是桌面和移动端快速分享的高效手段之一，这里介绍两个不错的快速开发二维码的方法，和大家分享一下 方法1：使用新浪提供的服务 这种方式简单快速，在服务端生成一个二维码的图片，兼容性比较好，你无需自己处理任何相关二维码的生成，只需要提供一端文字或者url即可，方法如下： <imgsrc="http://qrcoder.sinaapp.com?t=http://www.gbtags.com"> 生成效果如下： 大家扫一扫就可以访问极客标签主站了 方法2：使用jQuery插件qrcode QRcode是一个jQuery插件，可以使用javascript快速帮助你生成...
HTML5中，除了其他强大的功能外，同时还增加了audio标签，利用audio标签就可以播放音乐。下面是9个不错的HTML5音乐播放器。 MediaElement MediaElement音频视频播放器是纯HTML5和CSS编写的。同时为很多不同的开源系统提供插件，如WordPress，Drupal，Joomla等网址：http://mediaelementjs.com/ ScottAndrew’sHTML5audioplayer 这个播放器是非常简约，但效果很好。 网址：http://www.scottandrew.com/pub/html5audioplay...
代码： <?php $timezones[]=array("abbr"=>"ACDT","name"=>"AustralianCentralDaylightTime","offset"=>"+10:30"); $timezones[]=array("abbr"=>"ACST","name"=>"AustralianCentralStandardTime","offset"=>"+9:30"); $timezones[]=array("abbr"=>"ACT","name"=>"ASEANCommonTime","offset"=>...
1.方法一 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <...
本来这篇文章想叫《挺起你的HTML5》或者《让HTML5飞》或者神马其他的，但是为了更好的体现主题，我就用这个直白点的题目吧 随着各种智能手机(iPhone、Android)大行其道，App模式的应用开发变得热火朝天，反观Web领域则黯然失色。然而即将（或者说已经）到来的HTML5，又为Web注入了新鲜的鸡血，让我等Web码农再次激动不已——我们可以用HTML、CSS、JavaScript开发手机应用了！可以实现绝大部分NativeApp的功能，跨平台，自动更新，即需即取……亲，只需要有浏览器哟！而且没有恶心的IE6 做任何一个应用都离不开两种东西：文件和数据。下面我就以一个简...
一分钟解决“仅限中国大陆地区播放” 来了这就没看上美剧了，主要是没有勇气看不带字幕的直播。。。难得这个周末有空，想起搜狐高清视频，结果“仅限中国大陆地区播放”。折腾了一个小时，终于找到一个高效的方法！ InternetExplorer、Firefox、GoogleChrome等三种常用浏览器的Proxy代理设定方法。 InternetExplorer浏览器代理设定方法与教程1：首先打开IE浏览器，找到工具→点击“选项”。2：在上方的标签栏中找到连接→局域网设置。3：选择代理服务器的的复选框（在您的局域网使用Proxy服务器），然后打开上面的免费代理网站。将ip位址和端口号（Por...
一、众所周知的 众所周知，文本域(textarea)在FireFox或Chrome浏览器下，右下角有个可以拖拽的标志。 有人保留，有人嫌碍事，直接resize:none;掉，但是，估计没人利用整个儿做交互效果。 二、纯CSS的交互展示 您可以狠狠地点击这里：textarearesize下的纯CSS交互demo 例如，在FireFox浏览器下，拖动（往右→）下图圈中的图标： 一个半透明遮罩层随着拖动把张含韵给覆盖了，达到了半遮面的交互效果。 效果没什么，但是却完全CSS实现的，...
1.PlayOnLinux InstallingfromtheUbunturepository: PlayOnLinuxisavailableintheSoftwareCenteronUbuntuversionsfrom12.04andup. However,ifyouwantthelatestversion,youwillneedtoaddthePlayOnLinuxrepository. InstallingfromthePlayOnLinuxrepository: ThefollowingexampleisforUbuntu12.04LTS wget-q...
今天我想对一个Greenfield项目上可以采用的各种性能优化策略作个对比。换言之，该项目没有之前决策强加给它的各种约束限制，也还没有被优化过。 具体来说，我想比较的两种优化策略是优化MySQL和缓存。提前指出，这些优化是正交的，唯一让你选择其中一者而不是另一者的原因是他们都耗费了资源，即开发时间。 优化MySQL 优化MySQL时，一般会先查看发送给mysql的查询语句，然后运行explain命令。稍加审查后很常见的做法是增加索引或者对模式做一些调整。 优点 1、一个经过优化的查询对于所有使用应用的用户来说都是快速的。因为索引通过对数复杂度的速度来检索数据（又名分制，正如你...