下次实践想做一个淡入淡出的相册切换效果. 切换倒是没问题. 但在淡入淡出的效果上出现问题了.
现在没思路.
原理我先说下我的想法.
1.首先遍历所有图片.除了第一张外.将其余图片的opacity都设置为0.
2.当切换开始的时候,同时控制两个图片的opacity.前一张不断减小到0.当为0时候隐藏
后一张不断增加图片的opacity.从0一直到1.但现在遇到问题就是.如果一张图片渐隐到一半的时候 我就开始切换了. 那么opacity应该怎么处理?顺便急需一位师傅. 虽然不太可能.但如果有意愿 愿意帮帮小弟的. 可以留个QQ 或者 Email.
不然实在有太多问题不理解了.谢谢
解决方案 »
- 关于jquery操作iframe的小问题
- 如何在FF下实现这个鼠标移动显示层 跟随鼠标移动的效果
- 你见过的JS常见框架有哪些?
- 哪位大侠帮俺看看页面弹出菜单为啥不稳定呢?
- 关于frameSet 的问题
- 如果把函数的值赋值给Select下拉框的Value............在线
- 怎么在JS里面用ASP的数组?
- 一个倒计时问题,请高手解决
- 小弟急需一本CHM格式的比较全面系统的javascript的教程!!急!!
- jqgrid如何通过select修改行内其他单元格的数据
- 解释下document.write("<option value=\"",arr[i],"\" ",SELECTED,">",arr[i]); 的语
- ......................关于ie6内存泄漏问题 .....................................
http://dl.dropbox.com/u/3362522/UI/Slider.rar
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Slide </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{ margin: 0;padding: 0;}
#container {position: relative;width: 515px;height: 221px;overflow: hidden;border:1px solid #D3D2D2;padding: 1px;}
#container .stage {height: 221px;width: 405px;}
#container .stage div {position: absolute;top: 0;left: 0;border-right: 1px solid #D3D2D2;padding: 1px;}
#container img {border: none;}
#container .nav {position: absolute;top:0;right:0;list-style: none;font-size: 14px;padding-top: 1px;padding-right: 1px;}
#container .nav li {border-bottom: 1px solid #EDEDED; overflow:hidden; width:106px;height:36px;}
#container .nav li a {display: block;text-indent: 10px;padding: 10px 15px;color: #666;text-decoration: none; }
#container .nav li a:hover {text-decoration:underline;}
#container .nav li.selected {background-color: #C8282B;}
#container .nav li.selected a:hover {text-decoration: none;}
#container .nav li.selected a {background-color: #C8282B;color: #fff;border-left: 4px solid #B30024;}
.first {opacity: .99;filter: alpha(opacity=99);}
</style>
<script>
var Class = function(properties) {
var klass = function() {
return (arguments[0] !== null && this.initialize && typeof this.initialize == 'function') ?
this.initialize.apply(this, arguments) : this;
}
klass.prototype = properties;
klass.constructor = Class;
return klass;
};
var $extend = function(a, b) { for(var c in (b || {})) {a[c] = b[c];} return a; };
var $ = function(id) { return document.getElementById(id); };
var $$ = function(tag, p) { return (p || document).getElementsByTagName(tag); };
var isIE = navigator.userAgent.indexOf('MSIE') != -1 ? true : false;
var forEach = function(array, callback, thisp) {
if(array.forEach){
array.forEach(callback, thisp);
}else {
for(var i = 0, len = array.length; i < len; i++) {
if(i in array) callback.call(thisp, array[i], i, array);
}
}
}; var Slide = new Class({
options: {
'auto': true
},
initialize: function(cId, nId, options) {
this.container = $(cId);
this.navi = $(nId);
this.nextIndex = 0;
this.currIndex = 0;
this.nextOpac = 0;
this.currOpac = 0;
this.curnav = $$('li', this.navi)[0];
this.curcontext = $$('div', this.container)[0];
$extend(this, $extend(this.options, options || {}));
this.bindEvents();
},
bindEvents: function() {
var _navs = $$('li', this.navi),_context = $$('div', this.container); _this = this, _timer = null;
forEach(_context, function(O, index) {
index > 0 && (O.style.display = 'none');
});
// 首先遍历所有导航 并加标识--除第一张图片的opacity为0.99 其余都为0;
forEach(_navs, function(O, index){
O._index = index;
O._opac = 0;
O.onmouseover = function() {
var _me = this;
clearTimeout(_timer);
_timer = setTimeout(function(){
_this.onStart(_me); // 准备淡入淡出
}, 300);
};
});
_navs[0]._opac = .99;
},
setOpacity: function(O, opacity) {
if(opacity > .99) {
opacity = .99;
}
if(!!isIE) {
O.style.filter = 'alpha(opacity = ' + (opacity * 100) + ')';
}else {
O.style.opacity = opacity;
}
},
// 准备淡入淡出
onStart: function(O) {
this.currIndex = this.curnav._index; // 当前索引
this.nextIndex = O._index; // 下一个索引
this.currOpac = this.curnav._opac; // 当前透明度
this.nextOpac = O._opac; // 下一个透明度
this.currContext = $$('div', this.container)[this.currIndex];
this.nextContext = $$('div', this.container)[this.nextIndex];
this.currNav = $$('li', this.navi)[this.currIndex];
this.nextNav = $$('li', this.navi)[this.nextIndex];
this.nextContext.style.display = 'block';
this.curnav.className = '';
this.nextNav.className = 'selected';
/**
* 思路: 先获得当前图片 和下一张图片的 索引和透明度.
* 然后进入slideImg函数进行opacity控制.
* 当前图片opacity不断减小一直到0的时候隐藏
* 下一张图片的opacity不断增大 一直到1.
* 疑问: 如果渐隐到一半的时候进行切换 那么opacity该怎么设置?
*/
this.slideImg();
},
slideImg: function() {
var _this = this;
this.currOpac -= .1;
this.nextOpac += .1;
var _currOpac = this.currOpac;
var _nextOpac = this.nextOpac;
//console.log(' -----' + this.currOpac);
if(_currOpac <= 0) {
this.currContext.style.display = 'none';
this.curnav = this.nextNav;
this.curnav._opac = this.nextOpac;
this.nextOpac = .99;
this.currOpac = 0;
//console.log(this.nextOpac + ' ' + this.currOpac);
}else {
this.setOpacity(this.currContext.getElementsByTagName('img')[0], _currOpac);
this.setOpacity(this.nextContext.getElementsByTagName('img')[0], _nextOpac);
setTimeout(function(){
_this.slideImg.call(_this);
}, 50)
}
} });
</script>
</head> <body>
<div id="container">
<div id="context" class="stage">
<div><a href="#"><img width="405" height="221" alt="年终风暴" src="6.jpg" class="first"/></a></div>
<div><a href="#"><img width="405" height="221" alt="终极秒杀" src="1.jpg"/></a></div>
<div><a href="#"><img width="405" height="221" alt="9折话费" src="2.gif"/></a></div>
<div><a href="#"><img width="405" height="221" alt="彩票派送" src="3.jpg"/></a></div>
<div><a href="#"><img width="405" height="221" alt="限量抢购" src="4.jpg"/></a></div>
<div><a href="#"><img width="405" height="221" alt="周末购" src="5.jpg"/></a></div> </div>
<ul class="nav" id="nav">
<li class="selected"><a href="#">年终风暴</a></li>
<li><a href="#">终极秒杀</a></li>
<li><a href="#">9折话费</a></li>
<li><a href="#">彩票派送</a></li>
<li><a href="#">限量抢购</a></li>
<li><a href="#">周末购</a></li>
</ul>
</div>
<script>
var slide = new Slide('context', 'nav', {'auto': false});
</script>
</body>
</html>