博客阅读 >>
废话不多说,先往下看!
用css布局略过了，我们直接看用
javascript优化布局引用:
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。
提示：也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
把模块放大肯定是为了保证残障人士或者一些特殊群体，同时也给普通用户群带来良好的体验。那放大，肯定是模块里面所有东西都得放大了包括图片等!在蓝色理想论坛已经有人写好了
http://bbs.blueidea.com/thread-2824913-1-5.html，但完美主义是挑剔的。帖子写的很好，但如果放大模块上出现图片，他又要在js里面加上图片的放大效果，如果需求有更改，又给加上别的元素，那又要改？那岂不是变的很不灵活？下面我们做一个相对比较灵活的！怎么实现给卖个关子，请往下看
我们先写出布局复制内容到剪贴板
代码:
<style type="text/css" media="all">
/* <![CDATA[ */
body{margin:100px; font-size:62.5%}
.box1{
float:left;
width:200px;
font-size:1.2em;
background:#f30
}
.box2{
clear:left;
float:left;
width:200px;
margin-top:10px;
font-size:1.2em;
background:#f60
}
.box3{
width:200px;
margin-left:210px;
_margin-left:207px; /* ie6 */
font-size:1.2em;
background:#f90
}
p{margin:0; padding:1em; line-height:180%}
img{width:10em; height:2em; display:block}
/* ]]> */
</style>
<!--这里给出html-->
<div class="box1" id="container">
<p>这是第一个可放大内容的区域,里面可能有N多元素和图片等!<img src="http://www.macji.com/wp-content/themes/macji/img/logo.png" /></p>
</div>
<div class="box2" id="container2">
<p>这是第一个可放大内容的区域,里面可能有N多元素和图片等!<img src="http://www.macji.com/wp-content/themes/macji/img/logo.png" /></p>
</div>
<div class="box3">
<p>这是第三个区域</p><p>这是第三个区域</p><p>这是第三个区域</p><p>这是第三个区域</p>
</div>你看到这里时候,没觉得不一样吧,是的,就是CSS单位都是em(除了布局用px,保证结构不乱),对,这是另一个思路,采用css可变单位em进行子元素控制.也许你就有了头绪吧?
我们把JavaScript封装一下复制内容到剪贴板
代码:
function zoom (contianer, config){
this.config = config || {x: 1.25, y: 1.25};
this.contianer = document.getElementById(contianer);
var _this = this;
this.__construct = function (){ //构造函数
_this.contianer.onmouseover = function (){_this.over();};
_this.contianer.onmouseout = function (){_this.out();};
}();
this.over = function (){ //鼠标经过
var obj = _this.contianer;
var width = obj.offsetWidth;
var height = obj.offsetHeight;
obj.style.position = 'relative';
obj.style.zIndex = '100000';
obj.style.fontSize = 1.2 * _this.config.x + 'em';
obj.style.width = width * _this.config.x + 'px';
obj.style.height = height * _this.config.y + 'px';
obj.style.marginRight = (width - width * _this.config.x) + 'px';
obj.style.marginBottom = (height - height * _this.config.y) + 'px';
};
this.out = function (){ //鼠标离开
var obj = _this.contianer;
obj.style.position = '';
obj.style.fontSize = '';
obj.style.zIndex = '';
obj.style.width = '';
obj.style.height = '';
obj.style.marginRight = '';
obj.style.marginBottom = '';
};
}是不是很简单啊?调用方法,只需要把要放大的id和放大倍数传进去就可以了!
var container = new zoom(’container’, {x: 1.25, y: 1.25});
var container2 = new zoom(’container2′, {x: 1.25, y: 1.25});
给出演示地址
http://www.macji.com/lab/ali_job.html
[
本帖最后由 caiying2007 于 2008-2-2 11:50 编辑 ]
