匀速透明封装（图片淡入淡出效果）

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量65 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51525398/article/details/120083223
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 300px;
            height: 300px;
            position: absolute;
            top: 100px;
            left: 520px;
        }
    </style>
</head>
<body>
    <img src="2.jpg" alt="">
</body>
</html>
<script>
    let oimg=document.querySelector("img");
    let time=null;
    oimg.onmouseover=function(){
        change(oimg,1);
    }
    oimg.onmouseout=function(){
        change(oimg,0.1)
    }
</script>
<script 	src="图片淡入淡出.js"></script>

图片淡入淡出.js

function change(obj,target){
    clearInterval(time);
    time=setInterval(function(){
        let speed=target>getComputedStyle(obj,false)["opacity"]? 0.01:-0.01;
        obj.style.opacity=Number(getComputedStyle(obj,false)["opacity"])+speed;
        if(obj.style.opacity==1||obj.style.opacity==0.1){
            clearInterval(time);
        }
    },50)
}

思想：
1.获取元素
2.三目运算判断opacity，注意非行内样式的读
3.设置元素的opacity值
4.设置循环定时器
5.定义全局变量清空time，在每次循环之前清空定时器
6.判断条件清空定时器
Ensoleile2021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
025Day--jQuery添加事件方法、动画函数-显示、隐藏、滑动、淡入淡出、stop、each
Yanxiaona111的博客
08-27 324
一、jQuery添加事件的方式-1 重点： jQuery事件处理方式-1 语法：jQuery对象.事件函数名([数据对象],callback); [数据对象]：可选择参数，是一个对象数据。可以在事件处理函数中访问该数据。 补充：jQuery添加事件不会产生覆盖。 <div>hello</div> <script> var $div = $("div"); //没有数据实参的写法。 $div.click(function (e) {
图片淡入淡出切换效果实现
07-10
源代码可以直接运行实现图片的淡入淡出切换效果
[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)
QDY5945的博客
11-03 104
javascript中，如何让一个元素(比如div)运动起来呢？ 设置基本的样式，一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); 1 <style> 2 div { ...
HTML一条线匀速一定区域运动,基于匀速运动的实例讲解(侧边栏,淡入淡出)
weixin_29258865的博客
06-03 158
javascript中，如何让一个元素(比如div)运动起来呢？设置基本的样式，一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );div {width: 100px;height: 100px;background: red;position: absolute;left: 0px;}基本的结构:当我们点击，这个按钮的时候，要让div运动起来，其实就是让div的left...
基于原生javascript的淡入淡出函数封装（兼容IE）
weixin_33895475的博客
10-19 50
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript 动画效果
xiangxiongfly
06-10 8087
文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中的transition属性实现元素动画 平滑动画 利用CSS transition属性实现平滑动画效果 <button>开始动画</button> <div id="box"></div> <script> var btn = document.queryS
HTML一条线匀速一定区域运动,通用的匀速运动框架如何打造
weixin_36149538的博客
06-03 153
本文主要为大家带来一篇打造通用的匀速运动框架(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。本文，是接着上 基于匀速运动的实例讲解(侧边栏,淡入淡出)继续的，在这篇文章的最后，我们做了2个小实例：侧边栏与改变透明度的淡入淡出效果，本文我们把上文的animate函数，继续改造，让他变得更加的通用和强大：1，支持多个物体的运动2，同时运动3...
[js高手之路]打造通用的匀速运动框架
nqxcwl的专栏
11-03 116
本文，是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的，在这篇文章的最后，我们做了2个小实例：侧边栏与改变透明度的淡入淡出效果，本文我们把上文的animate函数，继续改造，让他...
ios动态效果实现翻页_iOS开发之各种动画各种页面切面效果
weixin_35689019的博客
12-30 502
注：其中有些效果调用了CATransition的Private API, 仅供娱乐。补充：还是有好多小伙伴问那些可以在AppStore中使用，调用私有API的肯定是不行的，而下方有些就调用了私有API。下方会用到一些私有API, 有些效果在APPStore中是不能使用的，私有API如下：NSString*constkCATransitionCube =@"cube";NSString*constk...
纯js实现图片匀速淡入淡出效果
01-21
图片匀速淡入淡出效果如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>淡入效果</title> <style> * { margin: 0; padding: 0; } ...
js实现图片加载淡入淡出效果
10-20
主要为大家详细介绍了js实现图片加载淡入淡出效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unity实现背景图片淡入淡出效果
12-26
本文实例为大家分享了Unity实现背景图片淡入淡出的具体代码，供大家参考，具体内容如下 如题。 背景是两个图片， 每隔一段时间 图片1 淡出，2 淡入， 然后2淡出，1 淡入 很简单  首先Unity建立两个 image1， image2...
ios动态效果实现翻页_iOS实现超酷页面切换动画特效
weixin_39639622的博客
12-20 324
因工作原因，有段时间没发表博客了，今天就发表篇博客给大家带来一些干货，切勿错过哦。今天所介绍的主题是关于动画的，在之前的博客中也有用到动画的地方，今天就好好的总结一下iOS开发中常用的动画。说道动画其中有一个是仿射变换的概念，至于怎么仿射的怎么变换的，原理如何等在本篇博客中不做赘述。今天要分享的是如和用动画做出我们要做的效果。今天主要用到的动画类是CALayer下的CATransition至于各种...
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 644
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 610
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 235
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 299
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 910
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
微信小程序图片淡入淡出动画效果
03-26
实现图片淡入淡出动画效果需要使用微信小程序的动画API。具体步骤如下： 1. 在wxml文件中添加图片标签，并设置一个id属性用于后续操作： ```html <image src="image.jpg" id="myImage"></image> ``` 2. 在onLoad事件中获取图片对象，并创建一个动画实例： ```javascript onLoad:function(){ this.myImage = this.selectComponent("#myImage"); // 获取图片对象 this.animation = wx.createAnimation(); // 创建动画实例 } ``` 3. 创建一个图片淡入淡出的动画方法： ```javascript fadeAnimation:function(){ this.animation.opacity(0).step({duration: 500}).opacity(1).step({duration: 500}); // 设置动画样式 this.myImage.setData({animationData: this.animation.export()}); // 将动画样式传递给图片对象 } ``` 4. 在页面中添加一个按钮触发动画效果： ```html <button bindtap="fadeAnimation">图片淡入淡出</button> ``` 5. 最后，在wxml文件中添加样式类用于控制图片透明度： ```css .fade-in-out { opacity: 0; } ``` 这样就可以实现图片淡入淡出的动画效果了。具体可以使用其他的微信小程序的动画API完成各种复杂的动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值