JS纯前端实现卡通人物图片的动态效果

最新推荐文章于 2024-03-09 15:41:23 发布
VIP文章 最新推荐文章于 2024-03-09 15:41:23 发布
阅读量1.9k 收藏 12
点赞数 3
分类专栏： 前端动态特效 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50825051/article/details/125359986
版权

一、图片的选取（用截图工具将其裁剪成10张小图片，放在项目的image文件夹下面）

二 、html代码（图片展示地方）

	<div id="all"style="height: 40px;width:1200px; background-color:none;border: 1px solid #009966;">

三、js代码（定时器切换图片达到图片动态效果和位移效果）

  var arr=new Array()
            arr[0]="image/1.png";
            arr[1]="image/2.png"
最低0.47元/天 解锁文章
水吟蝉
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
js实现纯前端的图片预览
01-19
图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了。在这之前，我曾经通过订阅input[type=file]元素的onchange事件，一旦更改路径则将图片上传至服务器，接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案，就是服务端清理那些临时的预览图片已经增加不少工作量了。 偶然从MDN上找到纯前端图片预览的相关资料，经过整理后记录下来以便日后查阅。  一、准备功夫1──FileReader　　　　　　　　　　　　　　　　　　　　　　　　   FileReader是HTML5的新特性，用于读取Blob和File类型的数据。具体的用法如下： （1）.
js实现纯前端压缩图片
01-18
本文实例为大家分享了js实现纯前端压缩图片的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=...
使用js实现图画人物动起来的方法
有 prepare , No out
08-13 3975
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> canvas元素示例 <script type="text/javascript" src="/js/jquery-1.9.1.js"> function draw(id) { var canvas
jsgif - JavaScript库用于生成GIF动画
gitblog_00002的博客
03-09 442
jsgif - JavaScript库用于生成GIF动画 jsgif是一个轻量级的JavaScript库，允许您在Web浏览器中生成GIF动画。该项目由Antimatter15开发，旨在提供一种简单的方法来创建动态图像并将其集成到网页中。 应用场景 jsgif可以用于各种用途，包括： 动态图像生成：使用jsgif轻松创建GIF动画。 在线编辑器：创建一个在线GIF编辑器，让用户自定义和分享他们的...
vue、js简单方法让静态图片实现动画效果
m0_57267951的博客
03-22 1091
vue、js简单方法让多张静态图片实现动画效果
JS-lufylegend游戏动画-人物运动
莫兮的博客
02-23 376
JS-lufylegend游戏动画-人物运动 目录 文章目录前言引入库使用流程函数解析代码讲解移动运动代码讲解 前言 动画是游戏的最基本组成部分 利用LAnimation类和循环时间，可以轻松实现一组动画的播放 准备一张照片，包含任务的动作 引入库 lufylegend官网 开发建议：<script src="./lufylegend-1.10.1.min.js"> 学习建议：<script src="./lufylegend-1.10.1.js"></
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果
左本Web3D
03-29 2487
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果。通过上面的介绍，我们了解了如何实现Three.js中的人物行走效果，并探讨了如何优化这个效果。在实际开发中，我们需要根据具体的需求和场景选择合适的技术和优化方式，以实现更加高效、自然流畅的人物行走效果。
js实现简单实现静态图片变成动图
Alicesa的博客
09-03 1855
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #canvas{ border: 1px solid red; } </style> </head> <body> <canvas id="canvas" width="500px
自制gif效果
m0_51404378的博客
11-28 256
自制gif效果 说明：本例中以最初的效果为准 写在前面： 本来是想写一个这样的效果;但是写完以后发现再给他加一个定时播放的效果也挺好的;于是改进后的效果如下 这个做完以后我觉得还不是很完美;于是我联想到了“连环画”，也就是可以动起来的动画，于是我找来一些列连贯的图片素材，将其添加进来，随后就形成了下面的效果。 页面部分 准备一个容器tab里面装有tab-content、tab-list、 tab-content里面有一个图片img用来充当大图; tab-list,里面放的是一系列的小图他们来充当“简
用html制作一个卡通形象,教你快速做一个自己的卡通形象
weixin_39612677的博客
06-18 1510
作者制作卡通画的思路比较特别。首先找一副人物素材图片，在PS中适当调节(局部可以调整大小及角度，并用液化工具等适当处理)，做成简单的大头效果。然后在AI或PS中画出写意效果即可。最终效果1、在Photoshop中打开你自己的照片。我们将使用图像作为示例。首先使用套索工具选中头部。2、右键点自由变换。然后调整头部的尺寸，使它比身体更大。你还可以把身子变小一点。我们是要画一幅卡通画，所以越夸张越好。3...
创意密码输入卡通开锁svgjs特效
ICode联盟
09-21 291
创意密码输入卡通开锁svg特效，可以用作解锁页面或密码输入页面。
纯JS实现旋转图片3D展示效果
10-24
本文给大家分享的是纯js实现的类似flash里的图片环绕旋转效果，非常炫酷，有需要的小伙伴可以参考下。
使用css和javascript实现纯前端的樱花飘落效果
最新发布
04-17
使用css和javascript实现纯前端的樱花飘落效果 具体展示效果可查看https://blog.csdn.net/shmookpup/article/details/137888214
js纯前端实现腾讯cos文件上传功能的示例代码
11-26
本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK 步骤 安装腾讯云COS上传所需的sdk 下载cos-js-sdk-v5.min.js并引入index.html 监听文件上传组件 //监听文件变化 ...
JS编写人物行走动画
天飓的技术博客
03-02 1658
首先找一张人物行走的分解图，然后，将这张图作为背景，通过background-position来定位某一个分解动作。这个操作通过CSS定义就可实现，代码如下： .ai_girl{ position:absolute; top:50px; left:10px; width:64; height:64; background-image:url(image/girl.gif); backgroun...
【web素材】05—13款炫酷的HTML5实例动画
web前端开发
07-19 2169
素材整理| 杨小二前言在之前的文章中，我也跟大家分享过关于CSS3以及HTML5制作的一些动画效果，虽然这些动画效果，可能在实际项目中根本不会应用到，但是，我们通过这些练习，可以帮助我们...
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
weixin_39612726的博客
06-09 275
使用HTML和CSS3绘制基本卡通图案的示例分享2020-06-28 13:01:53栏目 : 网络编程围观 : 48次纯HTML+CSS实现阿童木头像先上最终效果图：在里面主要用的了CSS中的几个属性：position 定位；border-radius 圆角；box-shadow 阴 影；background(linear-gradient) 渐变；transform 旋转和变换；animati...
JavaScript实现锁
RisenMyth的博客
11-27 6335
JavaScript实现锁 问题描述： 最近，在uniapp上实现一个页面功能，需要在onReady之后获取canvasContext进行绘制，但是里面用到的一些参数，需要在onLoad上进行传参拿到，由于不同的手机，渲染速度不同，因此导致 onReady 与 onLoad 的执行先后顺序不确定，从而影响到后面的功能操作。 解决方案： 在后端，我们会想到直接使用锁来解决这个问题。但在JavaScript里面，是没有多线程的，因此也就不存在锁。在这里，我使用Promise实现锁。 Lock.js exp
前端实现从图片中抠出人物图
06-11
从图片中抠出人物图是一项比较复杂的图像处理任务，需要使用到图像分割算法。以下是一个基于深度学习模型的前端实现思路，大致分为以下步骤： 1. 加载深度学习模型：使用 TensorFlow.js 等工具加载已经训练好的图像分割模型，例如 DeepLab v3+ 等。 2. 加载图片：在前端页面上提供一个上传图片的功能，将需要抠取的图片加载到页面上。 3. 图像分割：使用加载的深度学习模型对上传的图片进行分割，得到每个像素点的标签信息，例如人物、背景等。 4. 抠图：根据分割结果，将属于人物的像素点提取出来，形成一张新的图像。 具体实现细节还需要根据具体情况进行调整和优化。需要注意的是，这种方法需要消耗大量的计算资源和时间，可能无法在一般的前端环境下实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值