大家通过手机自带浏览器打开百度、淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App。实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片。如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scroll...
项目结构:运行效果:========================================================= 代码部分: ========================================================= /Clock/WebContent/index.jsp 代码如下: String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> " /> Insert title here js/clock/clock.js" cha...
测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 代码如下: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> waterfall flow </ script> <BR><style type="text/css" > <BR>body{margin:0px;} <BR>#main{width:840px;margin:0 auto;} <BR>.flow{float:left;width:200px;margin:5px;background:#ABC;} <...
代码如下: /********************************可配置选项********************************/ // 被选中的相似关键字背景颜色 var selectedBgColor = "#CCCCCC"; // 未被选中的相似关键字背景颜色 var unselectedBgColor = "#FFFFFF"; // 相似关键字列表框的边框 var listBorder = "1 solid #000000"; /***************************************************************************/ /********************************不可配置...
如果你想你的博客页面某些部分引起读者的注意,你可以使这些部分震动,如广告,今天这篇文章将介绍怎样使你的页面中的元素震动起来。要达到这个目的我们需要使用到Jquery和Jquery UI。 首先让我创建一个震动块,可以是图片,也可以是普通的dom元素,如div、span等,把元素的id命名为shake,这里可以任意命名。我们用图片如下: 代码如下: Jquery UI没有现成的使元素震动的方法,我们需要借助于effect方法来实现,语法如下: 代...
分别针对ie和火狐分别作了对xml文档和xml字符串的解析,所有代码都注释掉了,想看哪部分功能,去掉注释就可以了。至于在ajax环境下解析xml,其实原理是一样的,只不过放在了ajax里,还是要对返回的xml进行解析。 代码如下: New Document 用js解析xml文档和xml字符串 //解析xml文档///////////////////////////////////////////////////// var xmlDoc=null; //支持IE浏览器 if(window.ActiveXObject){ xmlDoc=new Activ...
代码如下: var hkey_root = "HKEY_CURRENT_USER"; var hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; var hkey_key; function printPage() { try { var RegWsh = new ActiveXObject("WScript.Shell"); hkey_key = "header" RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&w&b页码,&p/&P") hkey_key = "footer" RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "") //去掉了&u 因为我不想显示...
元素的src属性能设置URL并发起HTTP GET请求, 使用元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行脚本时候, JavaScript解析器能够自动将其解码. 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做"JSONP". 所以使用jsonp技术, 只需要设置的src属性, 并且插入到document中, 然后浏览器就会发送一个http请求以下载src属性所执行的url. 当使用元素...
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 代码如下: 原生Js页面滚动延迟加载图片 *{margin: 0;padding: 0} img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;} var _CalF = { $ : function(object){//选择器 if(object === und...
代码如下: 简单拖曵原理实例 #drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;} h2{color:#fff;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40px;line-height:40px;margin:0;} $(function(){ /*--------------拖曳效果----------------...
在动态站点上经常需要上传自己的图片,而这些图片的大小是未知的,在显示成缩略图的时候必须进行按比例的缩放才能美观地显示。以最近做的golf网站(http://www.changligolfsales.com)做例子。 该网站需要上传高尔夫产品图片,并以缩略图显示在列表上,站点服务器支持Asp,但不支持aspjpeg之类的生成缩略图组件,所以将上传的图片直接显示成缩略图,就需要按比例缩放了,前提是要获取图片的长宽,第一个想到的方法是在上传的时候通...
背景:项目中需要做个对两位小数点的正负浮点数的处理, 要求:非数字或者.字符自动清除,并对.12自动修补.前的0 原理:在输入框中加入两个事件,keyup与blur,keyup处理字符串中非要求的字符,blur中对最终字符串处理成理想的格式111.11 实现:通过七个正则处理掉主功能 val代表输入的字符串 /^\d*\.?\d{0,2}$/ 验证val是否是ddd.dd的格式,是则不处理,否才处理 /[^.0-9]+/ 处理掉val中所有的非数字与.的字符 /(?:\d*\.\d{0,2}|\...
对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览。以下是代码: 代码如下: jQuery图片预览 body{font-size:12px; padding:50px;} .clsImg{padding-top:300px;} .imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;} $(function () { var x = 0; var y =...
代码演示: http://www.imqing.com/demo/movediv.html 大概原理: 使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup。 在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置。即: left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始...
其实原理很简单,我们点击的时候我们给元素加上一个自定义的attr,加上后便会有有一个匹配的样式去自动适配背景,几秒后去掉该样式恢复原状 首先在自己的js中拓展一个方法hoverEl 代码如下: $.extend($.fn, { hoverEl:function(){ var _this = $(this); var _t = setTimeout(function(){ _this.attr("hover", "on"); }, 10); _this.attr("hoverTimeout", _t); setTimeout(function(){ clearTimeout( _this.attr("hoverTimeout") )...