原生js和jquery中有关透明度设置的相关问题_javascript技巧

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月31日08:30:57 评论 34 views

在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果。下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点:

1 透明度样式设置

透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%:

IE:filter: alpha(opacity:30);

firefox:opacity(0.3);

2 原生js设置透明度

为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置;

复制代码 代码如下:

var alpha = 30; //透明度值变量

var oDiv = document.getElementById('div1'); //获取DOM元素对象

oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE的透明度

oDiv.style.opacity = alpha / 100; //设置fierfox等透明度,注意透明度值是小数

3 jQuery设置透明度

jQuery中对透明度的设置进行了整合,兼容IE和其他浏览器,修改opactiy属性值即可,值为小数,因此只需要设置一次即可;

复制代码 代码如下:

$(function(){

$("#div1").css("opacity","0.3"); //设置透明度

});

4 一个示例

示例使用原生js实现一个div的淡入淡出效果;鼠标移入div区域,透明度为100%,鼠标移出div区域透明度为30%,同时用时间控制透明度转换效果;

复制代码 代码如下:

window.onload=function()

{

var oDiv = document.getElementById('div1');//获取div的DOM对象

oDiv.onmouseover = function() //鼠标移入方法

{

startMove(100);

};

oDiv.onmouseout = function() //鼠标移出方法

{

startMove(30);

};

}

var timer = null;//时间对象

var alpha = 30;//透明度初始值

function startMove(iTarget)

{

var oDiv = document.getElementById('div1');

clearInterval(timer);//清空时间对象

timer = setInterval(function(){

var speed = 0;

if(alpha < iTarget)

{

speed =5;

}

else

{

speed = -5;

}

if(alpha == iTarget)

{

clearInterval(timer);

}

else

{

alpha +=speed; //透明度值增加效果

oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE透明度

oDiv.style.opacity = alpha / 100; //设置其他浏览器

}

},30);

}

继续阅读
企鹅博客
  • 本文由 发表于 2020年8月31日08:30:57
  • 转载请务必保留本文链接:https://www.qieseo.com/419743.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: