用js 来让图片组成动画

最新推荐文章于 2023-12-11 10:42:13 发布
最新推荐文章于 2023-12-11 10:42:13 发布
阅读量544 收藏 1
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/yilou/archive/2012/12/19/2824570.html
版权

<!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>
.ld_anipic{ position:absolute; width:8px; height:8px; background-color:#ccc;}
</style>

<script>
//ld动画组建
//被加载的divID
function ldAni(contain_id,id_flag,start_id){
this.contain_id=contain_id;
this.id_flag=id_flag;
this.start_id=start_id;
this.a = new Array();
this.tempa=new Array();
this.Add_cmd=function(cmd){
this.a.unshift(cmd);
};
this.bakdata=function(){
this.tempa = this.a.concat();
};
this.steprun=function(){
if (this.a.length < 1) {
//从副本恢复数组到缓存，用于循环显示
//this.a = this.tempa.concat();
return;
}

var x = this.a.pop();
var cmds = x.toString().split(";"); //字符分
for (var i = 0; i < cmds.length; i++) {
if(cmds[i].toString().length>0){
var d = cmds[i].toString().split(",");
this.dit(d[0], d[1], d[2], d[3]);
}
}
};
this.dit=function(objid, cmd, cs1, cs2){

var obj = null;
try{
obj = document.getElementById(this.id_flag + objid);
}catch(e){}
//move 移动的意思
if (cmd == "m") {
obj.style.left = cs1 + "px";
obj.style.top = cs2 + "px";
}
//show 显示的意思
else if (cmd == "s") {
obj.style.display = "block";
}
//hidden 隐藏的意思
else if (cmd == "h") {
obj.style.display = "none";
}
else if(cmd=="a"){
this.start_id++;
var atag = document.createElement("a");
atag.setAttribute("class", "ld_anipic");
atag.setAttribute("id",this.id_flag + this.start_id);
document.getElementById(this.contain_id).appendChild(atag);
try{
obj = document.getElementById(this.id_flag + this.start_id);
}catch(e){}
obj.style.display = "block";
obj.style.left = cs1 + "px";
obj.style.top = cs2 + "px";
}
}

}


//动画速度可以在这里控制
var ani=new ldAni("ld_anicon","ldanim_pic",1);
//7
ani.Add_cmd("1,a,0,0");
ani.Add_cmd("1,a,10,0");
ani.Add_cmd("1,a,20,0");
ani.Add_cmd("1,a,30,0");
ani.Add_cmd("1,a,40,0");
ani.Add_cmd("1,a,50,0");
ani.Add_cmd("1,a,50,10");
ani.Add_cmd("1,a,44,20");
ani.Add_cmd("1,a,39,30");
ani.Add_cmd("1,a,35,40");
ani.Add_cmd("1,a,31,50");
ani.Add_cmd("1,a,29,60");
ani.Add_cmd("1,a,27,70");
ani.Add_cmd("1,a,25,80");
ani.Add_cmd("1,a,23,90");
ani.Add_cmd("1,a,22,100");
ani.Add_cmd("1,a,21,110");

//5
ani.Add_cmd("1,a,70,0");
ani.Add_cmd("1,a,70,10");
ani.Add_cmd("1,a,70,20");
ani.Add_cmd("1,a,70,30");

ani.Add_cmd("1,a,70,40");
ani.Add_cmd("1,a,84,45");
ani.Add_cmd("1,a,96,50");
ani.Add_cmd("1,a,106,55");
ani.Add_cmd("1,a,114,60");
ani.Add_cmd("1,a,120,65");
ani.Add_cmd("1,a,120,70");
ani.Add_cmd("1,a,120,75");
ani.Add_cmd("1,a,120,80");
ani.Add_cmd("1,a,120,85");
ani.Add_cmd("1,a,120,90");
ani.Add_cmd("1,a,114,95");
ani.Add_cmd("1,a,106,100");
ani.Add_cmd("1,a,96,105");
ani.Add_cmd("1,a,84,110");
ani.Add_cmd("1,a,70,110");

ani.Add_cmd("1,a,80,20");
ani.Add_cmd("1,a,90,20");
ani.Add_cmd("1,a,100,20");
ani.Add_cmd("1,a,110,20");
ani.Add_cmd("1,a,120,20");
ani.bakdata();
setInterval("ani.steprun()",50);
</script>
</head>

<body>
<div>用js来进行一些图片的移动来组成动画效果</div>
<table>
<tr>
<td id="ld_anicon" style=" position:relative; display:inline-block; width:160px;">
</td>
<td style="display:inline-block; font-size:250px;">
SOFT.com
</td>
</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/yilou/archive/2012/12/19/2824570.html

weixin_34008805
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现图片动画效果练习
weixin_49217619的博客
06-11 1230
代码： <!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
js实现图片切换（动画版）
11-28
学习了妙味课堂的图片切换（动画版） 这个小效果相对简单一点。 知识预备： 【1】background-position-x background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。 background-position有两个属性值， background-position：x | y，用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。 准备工作完毕，开始写代码 第一步 由于这次需要的div
Js实现图片的动态效果
zrcshendustudy的博客
04-16 4764
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;Document&lt;/title&gt;  &lt;script type="text/javascript"&gt; wind
js动画效果制件让图片组成动画代码分享
10-26
主要介绍了使用js让图片组成动画,这样就可以用js做动画了，大家参考使用吧
图片的左右移动，js动画效果实现代码
10-28
图片的左右移动，具备像荡秋千一样的动画效果，图片自己可重新定义，移动速度和距离也可在代码内设定，挺简单的Js生成动画的特效代码，仅供参考。
js多张图片gif动画特效
06-24
在JavaScript（JS）中创建多张图片的GIF动画特效是一项常见的前端开发任务，它可以用于增强网站的互动性和视觉吸引力。下面将详细讲解这个过程涉及的关键知识点。 首先，我们需要了解GIF格式。GIF是一种支持多帧...
js通过循环多张图片实现动画效果
10-15
在JavaScript中，通过循环多张图片来实现动画效果是一种常见的技术。这种技术广泛应用于游戏开发、动态图形设计以及用户界面的交互元素。以下是一个详细解释这个过程的知识点： 1. **基本框架**： - HTML部分：...
JavaScript+html5 canvas实现图片破碎重组动画特效
12-28
也许你见过HTML5图片破碎动画特效，实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组，这个HTML5动画就是利用Canvas的相关特性，实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标，即可让该区域...
实现网页中鼠标拖动图片在指定框中移动
qq_47780707的博客
11-03 2354
实现网页中鼠标拖动图片在指定框中移动   简单实现鼠标拖动图片在指定框内移动，使用时只需要修改html文件中对style、script、img三个的引用路径。（img自己找个图片便可） 目录实现网页中鼠标拖动图片在指定框中移动一、代码展示与解析1.1 css文件1.2 js文件1.3 html文件 一、代码展示与解析 1.1 css文件   此处图片移动的边界div用内联样式的是为了能够在js中通过obj.style.top、obj.style.left、obj.style.height、obj.style
【Vue】Vue3 中实现图片的帧动画方案分享
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
12-11 866
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。我最后采用的是叫 UI 换 GIF 了😁。只有麻烦下 UI 了哈哈哈哈。
javaScript 动画和canvas图形
m0_61773971的博客
05-16 631
使用requestAnimationFrame用来替代计时器与定时执行.
JS实现动画特效1（自动/手动播放的轮播图，可实现点击索引的圆点后跳转到对应图）
weixin_44584059的博客
08-28 1472
JS实现动画特效点击移动滑块HTMLCSSjs效果图注意1.一定得给移动的滑块加上position:absolute才能实现滑动2.将滑动的代码封装为animate函数，便于调用手动轮播图注意1.实现无缝轮播，轮播4张图，需要5张一起轮播2.sd_inner.style.left是一个字符串，所以要通过parseInt（）函数，将其转化为数字才能进行计算，再加上px成为一个字符串来设定sd_inner 点击移动滑块 HTML <!-- 点击移动滑块S --> <h1>点
html5js图片滚动,基于滚动的超酷js图片动画特效
weixin_39807541的博客
06-07 346
这是一款基于滚动的超酷js图片动画特效。该特效在使用鼠标滚动屏幕时，根据屏幕的当前位置，屏幕上的图片做出相应的动画效果，非常炫酷。使用方法HTML结构CSS样式// The container for all images.container {// 2 columns griddisplay: grid;grid-template-columns: 1fr 1fr;grid-gap: 0 10%...
常见JS动画效果
热门推荐
lavendersue的博客
09-27 2万+
作为一名前端开发人员，想要的大多都是，在开发过程中，看着自己制作的动画的炫酷以及困难的解决；开发结束后，自己的项目、成果可以被他人认可接受。人们浏览网页时，若一个网页动画效果丰富炫酷，性能良好，体验度良好，自然会受到吸引去打来浏览。吸引用户，自然少不了网页的布局优美、色彩搭配的恰当，更重要的是其中吸引人的炫酷动画效果。
图片的动画效果（淡出，淡入，显示，隐藏等....外加左右移动）（HTML5）
下午茶的博客
10-10 2万+
先来张图： 来一张效果图，其他就不一一展示了，代码都在下面： 代码如下： html> html lang="en"> head> meta charset="UTF-8"> title>下午练习title> script type="application/javascript" src="jquery.1.12.4.js">script>
利用JavaScript和动画来实现图片的融合和分开的一个效果
weixin_44543131的博客
01-24 5162
作者：刘辉 撰写时间：2019.1.21 先上张图： 如图所示，在经过各种css和HTML的设置后，我们见到了这样的一个效果，接下来我们要实现的是：如何点击那个融合按钮让两张图片融合成一张图片呢？说到点击我们肯定要用到点击事件，再配合css中的动画代码来实现这个过程； 下面是过程解释， 我们先在css中通过@keyframes来设置我们想让这两张图片移动的距离： 然后再到JavaScr...
Android中使用多张图片组成动画 AnimationDrawable
技术追求者！
04-28 8209
AnimationDrawable 就是在andriod里可以逐帧的播放图片，然后产生一种动态的效果; Drawable Animation 可以让我们按顺序加载一系列的资源来创建一个动画。动画的创建和传统意义上电影胶卷的播放一样，是通过加载不同的图片，然后按顺序进行播放来实现的。在代 码的实现上 AnimationDrawable 类是基于 Drawable animations 来实现的
qt 利用多张图片做成动画实例
hobertony_7的专栏
12-22 1594
#include "m_widget.h"m_widget::m_widget(QWidget *parent) : QWidget(parent){ m_cruuentIndex = 0; m_png = ":/Images/soft_anim.png"; QPixmap pix(m_png); m_num = 17; for(int i=0; i != m_num; i++) { m_pixm
一张图片做成一部小动画（steps）
gomaybe的博客
12-10 1108
使用css把一张图片变成一部小动画（steps） 申明： 我只是知识的搬运工。 只要会做雪碧图就可以把一张图做成一个有意思的小动画，不是需要使用PS，不需要使用AE。 样式使用及说明 制作一张这样的png图片。 样式如下 data-standard { width: 124px; height: 131px; background: url("…/images/animation...
为首页上方广告区域添加动画效果：四张广告图片组成四面体形状，自动旋转。
05-27
为首页上方广告区域添加四面体形状的动画效果，可以参考以下步骤： 1. 创建一个包含四张广告图片的容器，并设置容器的宽高和透视距离，使其成为一个立体的盒子。可以使用CSS3的transform和perspective属性来实现。 2. 将每张广告图片绝对定位在容器的四个面上，并设置旋转角度和初始透明度，使其形成一个四面体。 3. 使用JavaScript编写轮播逻辑，每隔一定时间自动旋转四面体，并同时调整广告图片的透明度，实现渐变效果。可以使用setInterval函数来实现。 4. 为了实现平滑的旋转和渐变效果，可以使用requestAnimationFrame函数来更新旋转角度和透明度，并使用transform和opacity属性来应用变换。 以下是一个简单的示例代码： HTML部分： ```html <div class="ad-container"> <img src="ad1.jpg" class="ad-face1"> <img src="ad2.jpg" class="ad-face2"> <img src="ad3.jpg" class="ad-face3"> <img src="ad4.jpg" class="ad-face4"> </div> ``` CSS部分： ```css .ad-container { width: 400px; height: 400px; perspective: 800px; position: relative; } .ad-face1 { position: absolute; width: 400px; height: 400px; transform: rotateY(0deg) translateZ(200px); opacity: 0.5; transition: opacity 0.5s ease; } .ad-face2 { position: absolute; width: 400px; height: 400px; transform: rotateY(90deg) translateZ(200px); opacity: 0.5; transition: opacity 0.5s ease; } .ad-face3 { position: absolute; width: 400px; height: 400px; transform: rotateY(180deg) translateZ(200px); opacity: 0.5; transition: opacity 0.5s ease; } .ad-face4 { position: absolute; width: 400px; height: 400px; transform: rotateY(-90deg) translateZ(200px); opacity: 0.5; transition: opacity 0.5s ease; } ``` JavaScript部分： ```javascript var adContainer = document.querySelector('.ad-container'); var angle = 0; var opacity = 0.5; var opacityDelta = 0.01; setInterval(function() { angle += 1; opacity += opacityDelta; if (opacity > 1) { opacity = 1; opacityDelta = -0.01; } else if (opacity < 0.5) { opacity = 0.5; opacityDelta = 0.01; } adContainer.style.transform = 'rotateY(' + angle + 'deg)'; adContainer.querySelectorAll('img').forEach(function(img) { img.style.opacity = opacity; }); }, 20); ``` 这段代码将广告容器对象旋转了1度，并每20毫秒更新一次旋转角度和透明度，实现了自动旋转和渐变效果。你可以将示例代码中的图片和样式替换成自己的内容，调整旋转速度和透明度变化速度等参数，以适应自己的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值