您的位置：首页 > Web前端 > JavaScript

文字与图片互相切换js效果

2013-03-28 16:48 253 查看

<!DOCTYPE html>
<html>
<head>
<style>
a.blockA{display:block;width:200px;height:20px;overflow:hidden;white-space: nowrap;position: relative;}
a.blockA div{display:block;width:100%;height:100%;background-color:white;position: absolute;top:0px;left:0px;}
a.blockA img.bizLogo{width:10%;height:100%;}
a.blockA img.bizTel{width:89%;height:100%;}
</style>
</head>
<body>
<script src="http://icon.chinahrd.net/js/common.js"></script>
<a class="blockA" name="test">
<img src="http://icon.chinahrd.net/image/guanliren.jpg" class="bizLogo"/>
<img src="http://icon.chinahrd.net/image/mag_1.jpg" class="bizTel"/>
<div>标题标题标题标题标题</div>
</a>

<a class="blockA" name="test">
<img src="http://icon.chinahrd.net/image/guanliren.jpg" class="bizLogo"/>
<img src="http://icon.chinahrd.net/image/mag_1.jpg" class="bizTel"/>
<div>标题标题标题标题标题</div>
</a>

<a class="blockA" name="test">
<img src="http://icon.chinahrd.net/image/guanliren.jpg" class="bizLogo"/>
<img src="http://icon.chinahrd.net/image/mag_1.jpg" class="bizTel"/>
<div>标题标题标题标题标题</div>
</a>
<script>
(function() {
var taner, prer;
var setTran = function(per, obj) {
if (_.isIe) {
obj.style.filter = 'alpha(opacity=' + per + ')';
} else {
obj.style.opacity = per / 100;
}
};
var clear = function() {
clearInterval(taner);
}
_.each(_('&test'), function(_this) {
_this.onmouseover = function () {
clear();
var per = 100;
var obj = _.lastHtml(this);
prer && setTran(100, prer);
prer = obj;
setTran(per, obj);
taner = setInterval(function(){
if (per-- < 0) {
clear();
return;
} else {
setTran(per, obj);
}
}, 10);
}

_this.onmouseout = function () {
clear();
var per = 0;
var obj = _.lastHtml(this);
setTran(per, obj);
taner = setInterval(function(){
if (per++ > 100) {
clear();
return;
} else {
setTran(per, obj);
}
}, 10);
}
});
})();
</script>
</body>
</html>

效果是透明成0显示图片,移开恢复不透明

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航