原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

经常看到网页里图片渐变显示，自己写一个。
原理很简单就是修改元素的css透明度。
在线预览效果：http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/


代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生Js元素渐隐/渐显方法</title>
</head>
<body>
<button id="show">渐显</button>
<button id="hiden">渐隐</button>
<img src="http://images.cnitblog.com/blog/150659/201306/20171658-303d375a1ec740e29a567b269d6297f1.jpg" id="img">
<script type="text/javascript">
function alphaPlay(obj,method){ //method有两个值show或hiden
var n = (method == "show") ? 0 : 100,
ie = (window.ActiveXObject) ? true : false;
var time = setInterval(function(){
if(method == "show"){
if(n < 100){
n+=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
(n==100) ? obj.style.opacity = 1 : obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}else{
if(n > 0){
n-=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}
},30);
}
var img = document.getElementById("img");
document.getElementById("show").onclick = function(){
alphaPlay(img,"show");
}
document.getElementById("hiden").onclick = function(){
alphaPlay(img,"hiden");
}
</script>
</body>
</html>

赞 (0)

相关推荐

  • 原生JS实现图片轮播与淡入效果的简单实例

    最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会

  • JS实现的简单轮播图运动效果示例

    本文实例讲述了JS实现的简单轮播图运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title&

  • js学习总结_轮播图之渐隐渐现版(实例讲解)

    具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im

  • 原生JS实现图片网格式渐显、渐隐效果

    原生JS实现图片网格式渐显、渐隐效果

    先给出效果图: 写的小组件支持图片的渐显.渐隐,并且可以是有序.随机两种方式. 我采用的原型是属性写在构造函数内,方法写在原型对象内.方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子: 实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域.接下来就是按照设定的顺序实现渐显或渐隐.渐显

  • js淡入淡出的图片轮播效果代码分享

    js淡入淡出的图片轮播效果代码分享

    本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • Js+CSS 文字渐隐渐现显示

    这段代码实现的淡入淡出还算可以吧,比较平滑,同样出自JavaScript+CSS两者的配合. JavaScript文字渐隐渐现显示 0) && (parseInt(navigator.appVersion) >= 4)); var count = 0, count2 = 0, add1 = 3, add2 = 10, timerID; function show() { if (ie4) { count += add1; count2 += add2; delay = 30; if(

  • Vue实现Header渐隐渐现效果的实例代码

    新建header.vue组件 引入到父组件Detail.vue中 header.vue 通过router-link标签设置to属性为地址,实现点击返回首页 tag标签设为div,就有了div的属性 <template> <div class="header"> <router-link tag="div" to="/" class="header-abs"> <div class=&q

  • Android使用自定义View绘制渐隐渐现动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: 在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. 在onDraw中绘制线段. 变换LineE

  • Android实现listview滑动时渐隐渐现顶部栏实例代码

    Android实现listview滑动时渐隐渐现顶部栏实例代码

    我在开发的时候遇到了这样的需求,就是在listview的滑动中,需要对顶部的栏目由透明慢慢的变为不透明的状态,就是以下的效果 最先开始的时候想的很简单,无非就是监听listview的滑动距离,然后根据距离算出透明度的比值,就可以了,但是事实上呢也的确是这样做的 只是在获取listview的滑动距离上可能没法直接获取,需要动态的去计算 下面贴出全部代码吧,不想码字了,最近感冒了,脑袋晕乎乎的,还疼,代码更直观一些 private void initListener() { lvList.setOn

  • Android开启动画之渐隐渐现效果

    启动某项程序时我们往往都能看到不同的"开机动画",千变万化的动画也只不过是四种基本动画衍变美化而成的. 四种android动画效果: alpha        渐变透明度动画效果 scale        渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate        画面转移旋转动画效果 最简单的莫过于渐变透明效果,单单这一种就可完成渐隐渐现的动画效果(用于渐现渐隐的可以是整个欢迎页面也可以是欢迎页面里的一部分): 1). 在res里新建anim文件夹

  • 原生Js页面滚动延迟加载图片实现原理及过程

    原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

  • 精彩图片推荐 渐隐渐现

    精彩图片推荐 BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0px; BACKGROUND-COLOR: #f0f8f8 } TD { FONT-SIZE: 12px } A { FONT-SIZE: 12px; LINE-HEIGHT: 18px; TEXT-DECORATION: none } A:hover

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

随机推荐