焦秋野 | 关注网站设计,前端资讯,用户体验,SEO,网站设计 » Javascript http://www.imjqy.com Wed, 01 Feb 2012 00:17:04 +0000 en hourly 1 http://wordpress.org/?v=3.3 JS延迟加载 http://www.imjqy.com/javascript/jsyanshi http://www.imjqy.com/javascript/jsyanshi#comments Fri, 08 Oct 2010 02:34:02 +0000 admin http://www.imjqy.com/?p=611 Continue reading →]]> 很多企业网站必须要挂上统计代码，客服代码，上午同代码等等js加载项，可是这些js大大影响了网页的性能，甚至很多网页出现半天打不开的现象，分析其原因，正式这节js加载项造成，网上搜集了js延迟加载的方法，做一下记录。可用性慢慢考证。

第一，JS延迟加载

代码如下:

程序代码

<script language=”JavaScript” src=”" id=”my”></script>

<script>

setTimeout(“document.getElementById(‘my’).src=’include/php100.php’; “,3000);//延时3秒

</script>

第二,JS最后加载

在需要插入JS的地方插入以下代码:

程序代码

<SPAN id=L4EVER>LOADING…</SPAN>

当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

然后在页面最底端插入:

程序代码

<SPAN id=AD_L4EVER>

你的JS代码在这里!</SPAN>

<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”";</script>

第三,JS最后加载

想要显示广告的位置

<div id=”guangg1″></div>

想要显示的广告内容

<div id=”ggad1″ style=”display:none”><script language=”javascript”

src=”/frontpage/include/php100.js”></script></div>

判断要显示的广告位置是否存在

<script>

function chkdiv(divid){

var chkid=document.getElementById(divid);

if(chkid != null)

{return true; }

else

{return false; }

}     最后就是显示广告了

if (chkdiv(‘guangg1′)) {

document.getElementById(‘guangg1′).innerHTML= document.getElementById(‘ggad1′).innerHTML;

document.getElementById(‘ggad1′).innerHTML=”";

}

</script>

]]> http://www.imjqy.com/javascript/jsyanshi/feed 0 js鼠标悬停图片渐变 http://www.imjqy.com/javascript/js_img http://www.imjqy.com/javascript/js_img#comments Wed, 18 Aug 2010 03:44:19 +0000 admin http://www.imjqy.com/?p=560 Continue reading →]]> 点击查看 实例效果

代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>www.imjqy.com</title>

<script language=JavaScript1.2>
<!–
function high(which2){
theobject=which2
highlighting=setInterval(“highlightit(theobject)”,40)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
//–>
</script>

<style type=”text/css”>
<!–
h1 {text-align:center;margin-top:50px;}
p#outer {
  margin:0 auto;
  width:202px;
 }
#outer a {
 margin:0px;
 display:block;
 position: relative;
 
}
#outer a:hover {}
#outer img {display:block;border:none;background:#069;}
–>
</style>
</head>
<body>
<h1>将鼠标移至图片，将看到此效果。</h1>
<p id=”outer”><a href=”http://www.imjqy.com/”><img onMouseOut=low(this) onMouseOver=high(this) style=’FILTER: alpha(opacity=20)’ src=”http://www.imjqy.com/wp-content/themes/cavano/images/logo.gif” alt=”www.imjqy.com” width=”200″ height=”90″ /></a>
</p>
</body>
</html>

]]> http://www.imjqy.com/javascript/js_img/feed 2 21个展示jQuery特效 http://www.imjqy.com/javascript/21_jquery http://www.imjqy.com/javascript/21_jquery#comments Mon, 26 Jul 2010 00:28:43 +0000 admin http://www.imjqy.com/?p=532 Continue reading →]]> 就在不久之前, Flash 是被web设计师用来为网站添加交互的重要技术之一！自从Ipad诞生, 并且不支持 Flash Player, 加速了web开发中使用其他技术代替flash，比如 jQuery, Ajax 还有其它。
尽管在很多情况下Flash在仍然是一个非常强大和有用的工具,web设计师习惯于用flash完成一些特效，但这些都能用jQuery轻松实现！下面有21 个在线的演示来显示jQuery在制作高级特效和交互方面的强大能力，可以媲美Flash！

1. Flip! 一个 jQuery 插件

这个演示 模仿流行的卡片翻转的效果，可以360度旋转自身，x或y维度！

2. jQuery Quicksand 插件

这是一个强大的插件用来在页面上排序数组的元素/图标,有酷的渐入 /渐出和动画特效！

3. ImageFlow

这个图像浏览器和苹果的CoverFlow界面很相似，让用户能够很熟悉他们的产品和应用！

4. 用jQuery代替flash建立一个交互性地图

这个演示展示了jQuery用ajax技术创造迷人的界面的强大能力！

5. 用jQuery & CSS3滑出消息

点击+号用漂亮的光滑的动画效果展示附加的信息！

6. Zoomer Gallery

在这个演示中看起来静态的画廊被multi-layer zoom特效变得富有交互性，当移到图像上时会产生缩放！

7. jQuery Circulate

这个演示展示了滚球的粒子效果，所有的特效都是用jQuery

8. Photo Zoom Out Effect

这个也是一个图像伸缩的特效，看起来静止的画面，会随着你的鼠标移过而变得富有生机！

9. Sliding Boxes and Captions with jQuery

这里我们可以看到原本只能被flash开发者创造的过渡特效，现在使用jQuery一样可以办到！

10. CSS3 Lightbox Gallery

这个插件看起来是为媒体展示图片特别制作的，你可以任意拖拽图片达到图片拼接的效果，你还可以单击放大图片！这是一个强大的图片展示特效！你还可以 用API使用ajax技术让人们分享图片到Flickr，twitter，Facebook或者其他网站！当然中国的新浪微博、人人网、开心网也能！

11. 用jQuery和CSS3创造一个拍照效果！

一眼看去这个演示像游戏狙击，乍一看居然是拍照功能！这是一个很强大的工具，当用AJAX或者HTML5本地存储时，用来对付特别大的图像！

12. Awesome Bubble Navigation-可怕的泡沫导航效果

开发者用色彩变换和动画创造出一个非常吸引人的并且富有交互性的菜单！

13. Beautiful Background Image Navigation

酷炫的图片展示特效，用来做导航会有惊人的效果！

14. AviaSlider

AviaSlider采用经典的类似Flash的过渡效果，以强化滑块界面。

15. Background Image Slideshow

动画背景的地方flash用来支配的网页设计之一。这里有一个例子使用jQuery代替。

16. Panning Slideshow

另一个独特采取典型幻灯片界面。在这里，笔者增加了对角线导航的接口，并使其脱颖而出。

17. jqFancyTransitions

这个插件可以用来显示作为一个具有奇特法拉盛般的幻灯片过渡效果的照片。

18. iCarousel – Horizontal images slider

另一个幻灯片，添加了缓和的过渡和真的挺身而出。这也难怪他们选择在此演示，展示性感的Mac产品。

19. Making an Interactive Picture with jQuery

该演示可用于拍摄的网站那里有很多优势的屏幕空间。该网站上发现的第一个模式框点击它显示更多关于点击部分的信息。

20. Cloud Zoom

一个插件，看起来好像是在考虑电子商务设计。云缩放易于实现，能真正提高用户的体验。

21. Apple-like Retina Effect

任何人谁使用了一iPhone，iPod的触摸，或ipad，将扩大在屏幕上时，你碰了长时间的面积小面积熟悉。此演示实现这个桌面效果。

专为WDD编译 Kalim舰队, 。他是一个专业网站设计者和博客与超过6年的经验。这个网站是他的激情,他自己的时间写博客的分裂,软件的发展和社会的媒体。他喜欢使用和开发新的应用网络、移动、桌面。
原文：http://www.webdesignerdepot.com/2010/07/20-demos-showing-advanced-jquery-effects/
翻译：http://fenxiang.me/reproduced-and-translation/20-demos-showing-advanced-jquery-effects.html

]]> http://www.imjqy.com/javascript/21_jquery/feed 0 页面引入JS文件IE6报错 http://www.imjqy.com/javascript/js_ie6 http://www.imjqy.com/javascript/js_ie6#comments Tue, 02 Mar 2010 00:11:07 +0000 admin http://www.imjqy.com/?p=174 昨天在调用一段外部js时候IEtester的IE6模式报错。说某函数is undefined。可是其他的浏览器均正常，最后终于发现是编码问题，使用文本文档令存为的时候选择一下与网页相符的编码就解决问题了。这个以后要注意了~

下面是网上搜集的一些相关资料。

解决“引入JS文件IE6报错”的问题

问题描述：页面引入一个js文件，其中定义了函数或对象，然后在页面中调用函数或对象时，在IE6会报“语法错误”或“缺少对象”。在IE6+或者IE7却运行正常。

问题分析：这个对象在引入的JS文件中是存在的，因为在IE6+以上的浏览器都可以正常运行。这个问题在于文件编码上，如果JS文件编码与当前页面的编码不一致，就可能导致在IE6中页面不能正常获取和解析JS文件中的内容，在IE6中，默认引入的文件和页面的编码是一致的。在IE6+以上的浏览器中，一般浏览器会自动识别每个外部文件的编码并进行解析；

问题解决：
   一：引入js文件时加charset属性，保持与页面编码一致；
   二：修改引入文件编码格式；
   三：新建一个文件格式同页面编码格式一致，复制粘贴内容；
（个人建议第三种方法,但建议在导入js时加上charset属性！）

]]> http://www.imjqy.com/javascript/js_ie6/feed 1 div设置float后,高度问题 http://www.imjqy.com/javascript/div_float_hight http://www.imjqy.com/javascript/div_float_hight#comments Sat, 13 Feb 2010 02:17:03 +0000 admin http://www.imjqy.com/?p=103 如果一个div没有闭合(清除)浮动元素，它将造成的后果是—–div的高度不能自动增加。

目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：

1. 额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。
我个人不喜欢这种方法，但是它确实是W3C推荐的方法

程序代码
<div style=”clear:both;”></div>
或者使用
程序代码
<br style=”clear:both;” />

2. 使用after伪类

这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。
这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

程序代码

#outer:after{
content:”.”;
height:0;
visibility:hidden;
display:block;
clear:both;
}

3. 设置overflow为hidden或者auto

这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面

4. 浮动外部元素，float-in-float

这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。
个人不是很赞成这种做法，但是从dudo最后的总结总可以看出，他好像很赞成这种做法

]]> http://www.imjqy.com/javascript/div_float_hight/feed 0 让IE6更快的走向灭亡 http://www.imjqy.com/javascript/hello-world http://www.imjqy.com/javascript/hello-world#comments Fri, 05 Feb 2010 02:32:58 +0000 admin http://www.imjqy.com/?p=1 Continue reading →]]> 最近关于浏览器的最重要的事情就是IE的极光0day漏洞了，这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击，当然也有很多色情网站被黑客利用，从而使用户受到严重的攻击，而IE6用户首当其冲，成为该漏洞的最大受害者。

其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。

  1. 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？
  2. 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6；
  3. 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。
  4. 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！
  5. 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？
  6. IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。
  7. 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。
  8. IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。
  9. 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。

(部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/)

如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ：

当然在国内，坚持使用IE6的用户可能还是因为另外两个原因：

  1. 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。
  2. IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。

前端开发人员可以争取放弃兼容IE6

如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去：

  1. 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？
  2. 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。
  3. 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。

浏览器厂商应该负更多的责任

想起的一句话：此地钱多人傻，速来！这当然只是笑话。

不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。

所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。

对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。

但是我认为国内的浏览器厂商应该负起更多的责任。

你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～

对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。

总结

让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。

]]> http://www.imjqy.com/javascript/hello-world/feed 2