常见的前端技术汇总

1 fix问题：

我们都知道IE6下不支持position:fixed问题!但是我做浮动菜单固定某个位置时也是经常用这个属性去解决但是考虑到一个问题就是IE6下不支持这个属性！那怎么办呢在网上google了下发现可以有一种方法可以解决上面的问题就是用hack技术及表达式我们都知道IE6下有很多bug没有修复当然微软现在也不可能是修复IE6 所以网上很多高手研究了hack出来当然hack也是一门技术千万不要认为hack会怎么样会怎么样！！！当然能不用hack尽量不用！！！fix解决方案如下：

*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-101))

其中代码中101指那个浮动菜单的高度！这样的话IE6虽然支持fix属性但是当我们移动滚动条测试时候还是会发现IE6，7会有抖动的bug 修复IE6 7抖动的方法如下：

html,html body {background-p_w_picpath:url(about:blank);background-p_w_upload:fixed;}

以前我是用个很少的1px×1px透明图片去解决这个问题但是发现用个空图片放哪里也可以现在到目前为止 bug就没有啊兼容IE 火狐谷歌等等游览器！！！

2 实现半透明问题只需要在css中加入一句代码就ok了

background-color:#000; opacity:0.5;filter:alpha(opacity=50);

3 解决因透明flash覆盖到元素上面在IE6 7 下元素无法点击问题只需要在元素上面加入如下代码即可解决：

filter:alpha(opacity=0);*background-color:#000; position:relative; z-index:1000;

4 解决浮动菜单随滚动条滚动在IE6下的hack

width:100%!important; width:auto; /*nav IE6下保持居中*/_position:absolute;_top:expression(eval(documentElement.scrollTop+130)); /*左右两侧*/ _position:absolute;bottom:0px;_top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-58)); overflow:hidden;left:0.1%;margin-left:10px;}/*位于底部*/

5 ul li的问题正常情况下是这样的不好意思好像这里不能截个图放不进来描述下吧正常情况下就是每一行一行的但是在IE6 7 下回偏斜点所以解决的方法一定要用display:inline；这个属性就可以解决问题了！！！

6 height问题想要某个元素高度背景随内容的增加而增加时千万不要设置height：100%；这样的话会出现背景不会随的内容的增加而增加在中间会脱节一般情况下不设置height 但是当有的时候需要height：100%时候为了解决上面背景会脱节问题用下面的代码就可以解决啊！！

body,html{height:100%;}

这样的话最外层的高度就会随的body及文档的高度而变化！就可以解决上面的问题了！

7 淘宝旺旺点击旺旺时候就弹出某某旺旺对话框进行聊天只要加个链接就可以了

<a href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E8%8B%BB%E8%8B%8F&site=cntaobao&s=1&charset=utf-8" target="_blank">在线旺旺</a> 这样的 uid=%E8%8B%BB%E8%8B%8F uid后面的就是某个旺旺名称只要用encodeURI进行编码转换就可以了

8 新浪微博分享代码 <iframe src="http://v.t.sina.com.cn/widget/widget_topic_publish.php?tags=%E8%AF%9D%E9%A2%98%EF%BC%9A%E8%AF%B4%E5%87%BA%E4%BD%A0%E7%9A%84%E6%96%87%E5%85%B7%E6%9C%80%E7%88%B1%EF%BC%9F&skin=4&isShowPic=1&width=448&height=103&wordLength=&mblogNum=20" class="iframe2"></iframe>

其中tags后面的到&skin前面的也是把话题经过编码转换后的

9 淘宝微博插件线上转换地址 http://t.taobao.com/topic/admin/topicWidgetAdmin.htm 不过这个要装思科的×××才能打开！

10 新浪微博分享代码：

淘江湖
<a href="javascript:(function(){window.open('http://share.jianghu.taobao.com/share/addShare.htm?url='+encodeURIComponent(location.href),'_blank');})()"></a>

人人网
<a href="javascript:(function(){window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(location.href)+'&title='+encodeURIComponent('【名师讲堂】品质课程，精品讲堂'),'_blank');})()"></a>

豆瓣网
<a href="javascript:(function(){window.open('http://shuo.douban.com/!service/share?p_w_picpath=&href='+encodeURIComponent(location.href),'_blank');})()"></a>

开心网
<a href="javascript:(function(){window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent('【名师讲堂】品质课程，精品讲堂')+'&rurl'+encodeURIComponent(location.href),'_blank');})()"></a>

QQ微博
<a href="javascript:(function(){window.open('http://s.jiathis.com/?webid=tqq&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent('【名师讲堂】品质课程，精品讲堂'),'_blank');})()"></a>

QQ空间
<a href="javascript:(function(){window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(location.href),'_blank');})()"></a>

MSN
<a href="javascript:(function(){window.open('http://mail.live.com/secure/start?action=compose&subject='+encodeURIComponent('【名师讲堂】品质课程，精品讲堂'))+'&body='+encodeURIComponent(location.href),'_blank');})()"></a>

谷歌buzz
<a href="javascript:(function(){window.open('http://www.google.com/buzz/post?hl=zh-CN&url='+encodeURIComponent(location.href),'_blank');})()"></a>

10 优酷网视频地址转换：有时候需求方给我们一个优库网视频地址但是那个视频地址有广告不过需求方说我不想要广告那么我们这边转换的方法可以先把优酷网视频打开点击"更多"按钮然后先复制flash地址比如说这个：

http://player.youku.com/player.php/sid/XMzMyNTQ2MjA4/v.swf 我们只需要这样转换下就ok了 http://player.youku.com/player.php/partnerid/XMTcxMg==/sid/XMzMyNTQ2MjA4/v.swf 把 partnerid/XMTcxMg== 加上

11.有时候我们要用锚点链接但是有时候锚点链接不能用我们可以用javascript 写个javascript就可以了

12 如何做网页中加入天气预报：

效果如下：

如果想要换成其他的城市那么只要改下"101210101"这个数字即可那么具体不同的城市对应的数字可以通过http://ah.weather.com.cn/?里的点击查询，则地址栏中的URL：http://www.weather.com.cn/weather/101011000.shtml里的数字即是。

13 腾讯QQ 点击qq按钮后直接可以和淘宝旺旺一样进行聊天只需要这样加代码即可：

<a href="tencent://message/?uin=807287699&Site=www.xnzjpc.com.cn&Menu=yes" title="点击给他发QQ消息">有事您Q我</a> 其中uin是qq号当然你可以改成自己想要的QQ号！

14 给某人发邮件：

<a href="mailto:[email protected]" target="_parent" title="给我发邮件吧">Email <span>
[email protected]</span> </a>

15 请编写一个javascript函数 parseQueryString,它的用途是把url解析为一个对象，如url="http://www.baidu.com/index.php?key0=0&key1=1&key2=2";

16 IE8和IE9的hack 1. background-color:red\0;IE8和IE9都支持；

background-color:#000; opacity:0.5;filter:alpha(opacity=50); 前端学习培训、视频教程、学习路线，添加威信 kaixin666haoyun

2 . background-color:blue\9\0; 仅IE9支持；

常见的前端技术汇总

猜你喜欢