仿QQ广告栏

最新推荐文章于 2023-02-21 13:27:25 发布

Mr-Jee

最新推荐文章于 2023-02-21 13:27:25 发布

阅读量4.5k

点赞数

分类专栏： web技术文章标签： qq function javascript delay ie xhtml

本文链接：https://blog.youkuaiyun.com/cj205/article/details/6093496

版权

web技术专栏收录该内容

12 篇文章

订阅专栏

都说一个问题不想永远重复的回答下去的最好办法是写在博客里。

那我就遵从下呗

其实这个仿QQ右下角的广告框没什么特色。不过还是说说实现原理吧。

如果你是个新手，那么请顺序看下去，如果你是个熟练的js使用者，那么仅仅看加重段就可以了。高手嘛。。。是不会来的。

1、定位使用了fixed定位，但是弱点是ie6下不支持这个定位，所以需要采取一些hack手段。这里使用了比较流行的IE6下绝对定位取代fixed定位的方法。通过window.XMLHttpRequest来判断是否是IE6（因为IE下没有这个对象嘛）。

2、在滚动条移动的时候用到了reflow的技巧。该技巧网络上使用的人众多，但是推广的不够，所以我也就传下道咯 。具体的方法有：

dom.className=dom.className 其实方法很多，这只是其中一个，有兴趣的可以去 google下。

3、动画方面我借用了arguments属性调整的一个方法，该方法是是参考Andrew Tetlaw 的arguments arugments:a javascript oddity 一文的 。具体的原理是通过arguments.callee属性来调用传入函数的。以达到重复执行某一函数的作用。但不知道大家看到没有，这个方法重复多少次都是没问题的，问题在于setTimeout上面。如果你希望间隔要求的话这种方法并不合适，当然可以通过变形的方式来做到。这里我对此要求不高。另外一个关于arguments的常用应用是格式化字符串。 具体的方法如下

function format(string) { var args = arguments; var reg = new RegExp("%([1-" + args.length + "])","g"); return string.replace(reg,function(m,i) { return args[i]; }); }

当你调用format("Hello %1,Welcome to %2 world","Jee","JavaScript")的话，自动返回了你想要的格式化字符串了。 不错吧，再次推荐看下上面那篇文章，如果觉得英文的看的费劲，这里有中文的译本，来自明城的译作

4、这个里面还有一个值得大家注意的问题，如果你把doctype去掉，那么在IE7、ie8下将无法得到你要的效果，因为他会默认为怪异模式显示。 所以请大家以后写html的时候务必加上doctype。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> function repeat(fn,times,delay) { return function() { if(times-- > 0) { fn.apply(null,arguments); var args = Array.prototype.slice.call(arguments); var self = arguments.callee; setTimeout(function() { self.apply(self.apply(null,args)); },delay); } }; } window.onload = function() { if(!window.XMLHttpRequest) { var qqbar = document.getElementById("qqBar"); qqbar.style.position = "absolute"; window.onscroll = function() { qqbar.className = qqbar.className; }; } var i = -142; repeat(function(){ document.getElementById("qqBar").style.bottom = i++ + "px"; },142,50)(); document.getElementById("qqBarClose").onclick = function(){ repeat(function(){ document.getElementById("qqBar").style.bottom = --i + "px"; },142,50)(); setTimeout(function(){ document.getElementById("qqBar").style.display = "none"; },500); }; }; <script> <style type="text/css"> #qqBar { border:#ddd 2px solid; height:140px; width:260px; position:fixed; bottom:-142px; right:0px; background:#eee; } #qqBarTitle { width:100%; height:14px; text-align:right; } #qqBarClose { font-size:12px; cursor:pointer; } <style> </head> <body style="height:2000px;width:1000px;"> <div id="qqBar"> <div id="qqBarTitle"><span id="qqBarClose">关闭</span></div> </div> </body> </html>

PS：最近一直在试着封装一些效果。但如果完全剥离css效率太低，不剥离的话需要至少2个文件。头疼的很，不知道大家有什么好的办法解决的没有~~另外我不想把多个功能的css或js写到一个文件里，你们明白的，实际应用中这样做并不好