js实现透明度渐变效果的方法
作者：jingangel 发布时间：2024-07-09 18:31:42
标签：js,透明度,渐变
本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下：
这里可实现一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30的效果。
要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个变量，让变量变化，最后把变量的值再赋给元素的透明值。
var alpha=30;
要点二：判断目标值和目前透明值，来判定是正向速度还是负向速度。
if(target > alpha){
speed = 2;
}else{
speed = -2;
}
要点三：如果透明值达到目标值，关掉定时器，否则透明值继续变化。最后把值赋给元素，因为透明度有兼容问题,所以要写上两个写法。
if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}
最后，上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function(){
var run = document.getElementById("run");
var btn = document.getElementById("btn");
var speed = 1;
var timer = null;
var alpha=30;
run.onmouseover = function(){
startrun(100);
}
run.onmouseout = function(){
startrun(30);
}
function startrun(target){
clearInterval(timer);
timer = setInterval(function(){
if(target > alpha){
speed = 2;
}else{
speed = -2;
}
if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}
},30)
}
}
</script>
</head>
<body>
<div id="run"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿猜你喜欢
- 网站改版，如何改?如果只是设计、功能和栏目等的稍微变动，这些很简单，从技术 上说并没有多少难度。只是对于网站本身的发展来说，没有多大的作用，
- 如下所示：# coding:utf-8import shapefilew = shapefile.Writer()w.autoBalance
- 一、概念我们可以将工作池理解为线程池。线程池的创建和销毁非常消耗资源，所以专门写一个pool，每次用过的线程池再放回pool中而不是销毁。不
用Go语言实现登录验证，有3次机会，如果用户名为 zhangsan ，密码为 123456 ，则提示登录成功，否则提示还有几次机会，次数用完- 在python类当中，经常会遇到@classmethod和@staticmethod这两个装饰器，那么到底它们的区别和作用是啥子呢？具体来看
- 本文实例讲述了php返回相对时间（如：20分钟前，3天前）的方法。分享给大家供大家参考。具体如下：function plural($num)
- 在网上游荡，看着别人的精彩主页难免心里痒痒的，但自己精心布置的家（个人主页），如果在不同的浏览器中呈现
- 文件结构html_downloader.py - 下载网页html内容#!/usr/bin/python# -*- coding: UTF-
- Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时
- 前言MERGE语句是Oracle9i新增的语法，用来合并UPDATE和INSERT语句。 通过MERGE语句，根据一张表或多表联合查询的连接
- requests 是一个非常小巧全面的库，应用它可以很容易写出与服务器进行交互的程序，今天遇到了一个问题，与服务器交互时，url都是http
- 先从String的扩展开始吧，后面有一部分的扩展要依赖这里扩展的方法。为了更加清晰和详细，我会一个方法一个方法地贴出来，你完全可以把所有的方
- 本文实现利用python的socketserver这个强大的模块实现套接字的并发，具体内容如下目录结构如下：测试文件请放在server_fi
- JavaScript中的XMLHttpRequest和XML DOM首先，我们需要建立一些规则。特殊的XMLHttpRequest对象和一般
- 网上搜了很多方法都不奏效，研究了一天，发现通过以下的配置可以完美支持 'URL_MODEL' => 2 的情况了 lo
- 1、<DIV id=div1><h1>This is an DIV</h1></div> &
- 前几天同学要我帮他做个国际聊天室,要求能够将聊天的内容自动翻译成多国语言.本来想用worldlink的翻译服务,但是用ajax很难获得结果,
- 1.首先分析要做的项目的结构,整理出关系图2.运行 python manage.py startapp XXX 创建一个app3.根据关系图
- 本文实例讲述了php+mysqli数据库连接的两种方式。分享给大家供大家参考。具体如下：这里讲述mysqli数据库连接两种方式比较，即面向对
- 守护进程1、守护子进程主进程创建守护进程 其一：守护进程会在主进程代码执行结束后就终止其二：守护进程内无法再开启子进程,否则抛出异常：Ass
