fadein、fadeout可以实现对某个元素的淡入淡出操作,但是加载大大的jquery库,感觉到有些浪费资源。所以从原生的角度,去重写一个fadeIn_Out()函数使他满足淡入淡出的基本功能。 |
先来看看jQuery提供的fadeIn()和fadeOut()方法 |
- fadeIn()
定义和用法
fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。
语法
$(selector).fadeIn(speed,[callback])
- fadeOut
定义和用法
fadeOut() 方法用于淡出可见元素。
语法
$(selector).fadeOut(speed,[callback]);
- html片段
<div class="news" id="news" >
<ul class="news_image" id="news_image">
<li ><img src="images/3.jpg" alt=""></li>
<li ><img src="images/1.jpg" alt=""></li>
<li ><img src="images/0.jpg" alt=""></li>
</ul>
</div>
- css片段
.news {
width: 398px;
height: 420px;
margin: 100px 0 0 106px;
}
.news img {
width: 398px;
height: 420px;
float: left;
position: absolute;
}
说明:position:absolute配合float浮动来形成三张图片的叠加效果,默认情况下,叠放顺序依次为3.jpg、1.jpg、0.jpg。
- js片段
One
首先写个“空壳”函数。
function fadeIn_Out(obj){
//curIndex当前图片索引
//timer计时器
}
Two
往“肚子”里塞东西。
function fadeIn_Out(obj){
var num = 0;//num 计数
var elems = document.getElementById("news").getElementsByTagName("li");// 获取待会要操作的元素
}
Three
“消化”食物:obj是Number类型,遍历取出li中的元素,假设当前elems[i].index与obj相等,则该元素opacity置为1,其余元素opacity置为0。setInterval(fn,time)中的time为100,一秒钟完成透明度的转换的意思,具体视觉体验可以自己更改数值。
function fadeIn_Out(obj){
var num = 0;
timer = setInterval(function(){
num++;
var elems = document.getElementById("news").getElementsByTagName("li");
for(var i = 0; i < elems.length ; i++){
if(i == obj){
elems[i].style.opacity = num/10;
} else{
elems[i].style.opacity = 0;
}
}
if(num>=10){
clearInterval(timer);
}
},100);
}
Four
吃饱了没事干,女神在召唤
var niLen = $(".news_image li").length ;
var fadeTimer = setInterval(function() {
if (curIndex < niLen-1) {
curIndex++;
} else {
curIndex = 0
}
fadeIn_Out(curIndex);
}, 3000);
Five
写着写着功能实现了,fadeOut()假装是opacity=0实现的,fadeIn()假装是opacity=1实现的,就这么说~假装~~
IE浏览器玩家自行百度filter:alpha(opacity)设置透明度。
Six
知识大放送环节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.news {
width: 398px;
height: 420px;
margin: 72px 0 0 106px;
}
.news img {
width: 398px;
height: 420px;
float: left;
position: absolute;
}
</style>
</head>
<body>
<div class="news" id="news" >
<ul class="news_image " id="news_image">
<li ><img class="img1" src="images/3.jpg" alt=""></li>
<li ><img class="img2" src="images/1.jpg" alt=""></li>
<li ><img class="img3" src="images/0.jpg" alt=""></li>
</ul>
</div>
</body>
<script>
var curIndex = 0;
var timer;
var elems = document.getElementById("news").getElementsByTagName("li");
function fadeIn_Out(obj){
clearInterval(timer);
var num = 0;
timer = setInterval(function(){
num++;
for(var i = 0; i < elems.length ; i++){
i == obj?elems[i].style.opacity = num/10: elems[i].style.opacity = 0;
}
if(num>=10){
clearInterval(timer);
}
},100);
}
setInterval(function() {
var niLen = elems.length ;
if (curIndex < niLen - 1) {
curIndex++;
} else {
curIndex = 0
}
fadeIn_Out(curIndex);
}, 3000);
</script>
</html>
结束语:小白初来乍到,写的不对的地方,拜托拜托大家予以批评指正。附上另外一种思路,完成淡入淡出的效果—-通过添加className给其添加类选择器,在css中使其opacity为0/1。
var liList = $(".news_image").find("li");
var num = 0;
var timer;
function play(num) {
for (i = 0; i < liList.length; i++) {
liList[i].className = "";
}
liList[num].className = "on";
}
timer = setInterval(function() {
play(num);
num++;
if (num == liList.length) {
num = 0;
}
}, 1500);
最后的最后,灰常感谢提供思路的帖子,以上每个字母都是自己敲的,如有吻合,英雄所见略同~~
附上提供思路参考的链接:猪大大的传送门