先给大家展示下效果图：向下滑动网页的时候能够自动加载图片并显示。盛放图片的盒子模型如下：设置img-width为150px，然后box_img添加内边距和阴影效果，box的外边距为0，添加内边距。盒子的宽度是由img-width和边距撑开的。也就是说盒子之间是没有间距的，但是盒子内部有一些边距的效果。这样在js设置位置的时候就不用考虑边距问题，直接调用box的宽度就可以了。设置盛放所有box的div的position为relative，这样在设置top值或是le...
本文实例讲述了动态加载js文件的方法。分享给大家供大家参考，具体如下：function loadScript(url){ var hd = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.src = url; js.type = "text/JavaScript"; if(js.addEventListener){ js.addEventListener("load", function(){alert('loaded');}, false); }else if(js.attachEvent){ js.attachEvent("onreadystatechange", function(){ if(js.r...
由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了 html:*{padding: 0;margin:0;}#main{position: relative;}.pin{padding: 15px 0 0 15px;float:left;}.box{padding: 10px;border:1px solid #ccc;box-shadow: 0 0 6px #ccc;border-radius: 5px;}.box img{width:162px;height:auto;}JSWallper.js:window.onload=function(){waterfall('main','pin');var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src'...
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法，感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式，把script文件代码从背景加载到前台，而后对加载到的内容经过eval()实施代码。第二种是，动静创建一个script标签，配置其src属性，经过把script标签插入到页面head来加载js，相当于正在head中写了一个,只可是这个script标签是用js动静创建的 比喻说是我们要动静地加载一个callbakc.js，我们就必要多么一个sc...
以下是实现代码(基于jquery): 代码如下: function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img"); var pageTop=function(){ return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,doc...
网站开发中的javasript部分，现在的开发人员很少有再去手工写document.getElementById()的了吧，那还不得累死，你还真别说，getElementById还真不好写，字母还挺多又区分大小写，一不留神就写错了。因此一下诸如用$来实现document.getElemetnById()就常见了。 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == string) el...
代码如下： 代码如下: try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 注：这个BUG以前就已经发现了，这里只是再次提出来。 更详细的说明可以参考下面的文章：IE6下默认不缓存背景图片，CSS里每次更改图片的位置时都会重新发起请求，用这个方法告诉IE6缓存背景图片 解决IE下图片作为背景时，有鼠标操作时的抖动问题 方法一、css(不推荐) 代码如下: html { filter: expression(document.exe...
第一 JS延迟加载 代码如下: setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 一般情况下都是利用setTimeout来实现 第二 JS最后加载 在需要插入JS的地方插入以下代码: 代码如下: LOADING... 当然，那个LOADING…你可以换成自己喜欢的小图片。看起来很有AJAX效果呢。 然后在页面最底端插入: 代码如下: js代码 代码如下: L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=""; ...
先描述一下出现这种匪夷所思bug的背景： 我在页面加载的时候加载一堆小缩略图， 这么多小的缩略图标签循环平铺下来，当单击小的图片时，动态加载大的图片显示，就类似于淘宝的商品查看图片。页面上有一个标签： 为了节省流量，加快页面载入速度，先不加载大图，当用户单击小图时，动态加载一张大图显示。 代码如下: function switch_image(im) { document.getElementById('big-image').src=im; } 这种方式在IE6,7外所有的浏览...
虽然本效果与马赛克有些差别，但可从思路上为你提供一份参考。 图片逐渐出现杂色效果 image1.filters.item(0).apply() image1.filters.item(0).transition = 12 image1.Style.visibility = "" image1.filters(0).play(2.0) [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
当时考虑有三种方法： 1.直接把路径写在js文件里，但如果引用页面路径层级改变就没辙了。 2.写个class，放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要，单独建立相应css文档似乎小题大做。 3.把以上两个方法排除后，自然要采用动态加载图片路径的方法咯。 关键代码如下： 代码如下: //创建一个全局变量保存路径 var imgRootUrl = ""; //获取图片路径所在目录 var strP...
步骤： 1、引用Jquery 2、如果是IE，实例ActiveXObject；Firefox，实例DOMParser。 3、处理 代码如下: //得到XML Dom function LoadXML(XmlString) { var xmlDoc; //firefox等 if (!window.ActiveXObject) { var parser = new DOMParser(); xmlDoc = parser.parseFromString(XmlString, "text/xml"); } else { //IE xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.loadXML(...
一为使网站整洁，二来提升网页体验，不至于让别人觉得你这网站有问题。其实实现起来也是非常简单的，具体请看看代码。 图片加载失败时用默认图片替代 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
采用的方法很类似： 代码如下: var iframe = document.createElement("iframe"); iframe.src = "http://www.gxlcms.com"; if (!/*@cc_on!@*/0) { //if not IE iframe.onload = function(){ alert("Local iframe is now loaded."); }; } else { iframe.onreadystatechange = function(){ if (iframe.readyState == "complete"){ alert("Local iframe is now loaded."); } }; } document.body.appendChild(iframe); 最近， Nichola...
分析代码也可以知道。 最主要的原因是 写在页面上的 一经加载，就去向服务器申请图片地址，加载大图片。 如果想实现原定的效果，则 写在页面上的待加载地址 必须不能是大图片的地址，而我们可以将真正的图片地址数据 存储在alt属性中。 正确的例子如下： 代码如下: 对原来的 jquery.lazyload.js我们也需要做一点改动： 代码如下: //初始化代码 $(document).ready(function(){ $("#lazy1 img,#lazy2 img").lazyload({ place...