zhugao Archive - 朱高的今天

Archives for :

第1067天：css强制不换行，3d标签云放在iframe里好控制，能撑30个了

2011年4月22日星期五

标签:友吧今天

星期五小雨转阴转多云 11～20℃

css强制不换行

white-space:nowrap;

3d标签云放在iframe里好控制

在 zcool 下载的 js 3D球面标签云效果，昨天下午折腾了好长时间，不好控制，昨晚本来准备收工第二天再研究时，灵光一现，想到 iframe。试一下，果然是要放在iframe里。

灵感不是设计的专利，技术有时也需要。

注：

var radius = 120;

这个是设置圆球大小的值，不像是半径，因为 210px 的 div 宽度，只要设置成 80px 左右就可以了。

能撑 30 个了

俯卧撑第一次撑到 30 个。从 20 进阶到 30 花了好几个月。

友吧今天

开始嵌套运动 v2 首页。
Ryan 昨晚加入了场馆排序，有一些问题，还在处理中。
把 v2 首页发给老张看，回复说导航没有运动气息。结合这个建议在 banner 上加了青春活力的人物元素，导航要改的话要等到 v3 了。
去掉导航拱桥上的圆弧栏杆。

第1066天：一个简单的div蒙层效果（原生js，兼容 IE、FF、Opera、chrome）

2011年4月21日星期四

标签:友吧今天

星期四阴转小雨 14～25℃

一个简单的div蒙层效果（原生js，兼容 IE、FF、Opera、chrome）

昨天找到的那个虽然效果不错，可是在一些低配置机器会比较卡，今天费了很大劲又找到一个，比较简单。测试时在chrome下发现一个问题，Y方向不居中，发现原来是chrome对scrollTop的识别问题。

原代码：

document.documentElement.scrollTop

修改为：

document.documentElement.scrollTop+document.body.scrollTop

2012-2-23 更新：

改变窗口大小时蒙层始终居中；

避免在页面无滚动条时，显示蒙层后出现纵向流动条；

显示蒙层时隐藏横向滚动条。

2012-2-27 更新：

拖动滚动条时蒙层始终居中。

全文例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<style type="text/css">
.pop { border:3px solid skyblue;width:400px; background:#fff; padding:5px; display:none;}
</style>
<script type="text/javascript">
function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}
function BtPopload(showId){
// 高度减去 4px，避免在页面无滚动条时显示遮罩后出现流动条
var h = (Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) – 4) + ‘px’;
var w = document.documentElement.scrollWidth + ‘px’;
var popCss = "background:#fefefe;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;border:0"
var rePosition_mask = function() {
  pop_Box.style.height = h;
  pop_Box.style.width = w;
  pop_Iframe.style.height = h;
  pop_Iframe.style.width = w;
  if (document.documentElement.offsetWidth < 950) {
   //防止正常宽度下点击时在 ff 下出现页面滚动到顶部
   document.documentElement.style.overflowX = "hidden";
  }
}
var exsit = document.getElementById("popBox");
if (!exsit) {
  var pop_Box = document.createElement("div");
  pop_Box.id = "popBox";
  document.getElementsByTagName("body")[0].appendChild(pop_Box);
  pop_Box.style.cssText = popCss;
  pop_Box.style.zIndex = "10";
  var pop_Iframe = document.createElement("iframe"); // 这里如果用 div 的话，在 ie6 不能把 <select> 遮住
  pop_Iframe.id = "popIframe";
  document.getElementsByTagName("body")[0].appendChild(pop_Iframe);
  pop_Iframe.style.cssText = popCss;
  pop_Iframe.style.zIndex = "9";
  rePosition_mask();
}
BtShow("popIframe");
BtShow("popBox");
BtShow(showId);
var pop_Win = document.getElementById(showId);
pop_Win.style.position = "absolute";
pop_Win.style.zIndex = "11";
var rePosition_pop = function() {
  pop_Win.style.top = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight/2 – pop_Win.offsetHeight/2 + ‘px’;
  pop_Win.style.left = document.documentElement.scrollLeft + document.body.scrollLeft + document.documentElement.clientWidth/2 – pop_Win.offsetWidth/2 + ‘px’;
}
rePosition_pop();
window.onresize = function(){
  w = document.documentElement.offsetWidth + ‘px’; // 使用 scrollWidth 不能改变宽度
  rePosition_mask();
  rePosition_pop();
}
window.onscroll = function(){
  rePosition_pop();
}
}
function BtPopShow(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}
}
function BtPopHide(Bid,Did) {
var UploadBtn = document.getElementById(Bid);
if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}
}
</script>
</head>
<body>
<a href="#@" id="open_1">测试一</a>
<a href="#@" id="open_2">测试二</a>
<div class="pop" id="tinybox_1"><a href="#" id="close_1">关闭一</a></div>
<div class="pop" id="tinybox_2"><a href="#" id="close_2">关闭二</a></div>
<script type="text/javascript">
BtPopShow("open_1","tinybox_1");
BtPopHide("close_1","tinybox_1")
BtPopShow("open_2","tinybox_2");
BtPopHide("close_2","tinybox_2")
</script>
</body>
</html>