js实现简易HTML动画-----手翻书版

最新推荐文章于 2023-09-25 22:54:41 发布
VIP文章 最新推荐文章于 2023-09-25 22:54:41 发布
阅读量1.2k 收藏 12
点赞数 4
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiuxiuxiulai/article/details/101117939
版权

HTML项目文件htmlproject01，图片在picsource中。
在这里插入图片描述
实现效果如下：
在这里插入图片描述
图片素材可以到百度网盘下载：

素材连接
（上次传错了，这次对了?）

具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>lover-action</title>
	</head>
	<body>
	</body>
</html>

<script type="text/javascript">	
	picArray = ['picsource/第1张.jpg','picsource/第2张.jpg','picsource/第3张.jpg','picsource/第4张.jpg',
	            'picsource/第5张.jpg','picsource/第6张.jpg','picsource/第7张.jpg','picsource/第8张.jpg', 
	           'picsource/第9张.jpg','picsource/第10张.jpg
最低0.47元/天 解锁文章
xiuxiuxiulai
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现拖拽翻书特效
越陌度阡
08-11 2091
给大家分享一个用原生JS实现的拖拽翻书效果图，效果如下： 效果还不错吧，当然还需要两个图片。 1.书本封面。 2.书页 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; ch.........
纯CSS实现的3D翻页效果
超浓芝士味玉米片的博客
07-17 4076
CSS实现的3D翻页效果  我是三页翻页。 CSS代码如下：* { padding: 0; margin: 0; } body, html { height: 100%; } body { /*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小， 大小程度由该属
HTML中的动画效果
热门推荐
SuwanH的博客
08-17 3万+
一、HTML中的动画 在HTML中也可根据个人要求添加动画，有过渡动画transition和生动的动画效果animation以及线上的动画库 二、过渡动画transition transition是一种提供了在更改CSS属性时控制动画速度的方法，其可以让属性变化成为一个持续一段时间的过程 为页面创建一个div，为其设置背景颜色等属性 页面预览： 当鼠标悬停时，改变大小，之后在加上过渡动画效果 页面预览：当鼠标放在div上时，div向右移动，宽度改变，颜色改变 属性： tr.
HTML创意动画代码
qq_52108058的博客
02-25 1万+
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。 这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。 该示例中，我们使用了 transform-style: preserve-3d 属性
Vue项目结合Turn.js制作翻页动画，项目部署发布，从零到1
weixin_45941687的博客
03-17 3735
Vue项目结合Turn.js制作翻页动画，项目部署发布，从零到1 1. 书籍翻页项目 - 翻页动画，页码跳转 2. 语言 vue 2.0 ，软件 Webstorm 3. 引入了 turn.js ，用到 jquery 4. 主要：翻页、触屏放大缩小、视频首页面显示、移动端与ipad适配
如何实现HTML5动画页面？
qq_59463562的博客
04-18 2086
HTML5实现动画页面的两种方式
用javascript实现gb2312转utf-8的脚本
10-30
用javascript实现gb2312转utf-8的脚本
challenge-html-02:CSS动画
05-08
Challenge-html-02挑战自定义加载将动画添加到图像的悬停上，以显示持续时间为4秒的彩色灰度。
HTML5-粒子图形变形动画特效.zip
07-11
HTML5-粒子图形变形动画特效.zip
Software-Renderer:使用 JavaScript 实现的简易软件渲染器
05-15
项目具体描述：1000行 JavaScript 实现的简易软件渲染器 时间：2018.5.1 - 2018.5.21（拖拖拉拉这么久） 部分截图： 线框渲染 开启深度测试，背面剔除，平行光的渲染结果 开启深度测试，背面剔除，点光源的渲染结果 ...
Javascript实现的SHA-256加密算法完整实例
10-22
主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
简单的js动画
08-05
使用激素实现的hover效果
Turn.js实现翻书效果
hhupp1809684284的博客
05-23 2909
trun.js的一份中文使用文档，相较于官方的文档，增加了一些自己理解的内容， 文章中展示的更多是常用的，一些本人无法理解的内容做了删减。
js小孩翻书动态实现效果
weixin_45745641的博客
08-26 832
效果如图： 通过点击strat和stop两个按钮，实现动画的开始停止 代码如下 三张图片实现动画翻书效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <img src="girl_1.gif" alt="" id="img" /&gt
HTML动画效果
2303_78651328的博客
07-21 886
动画播放次数 可以具体设置数字限定执行次数。动画时间 以秒为单位设置具体的值。延迟2s后开始 执行 注意：transition 是动画属性的设置。* 注意：如果要设置多条动画效果，需要写在同一个 transform里面。而动画效果的触发，可以设置在特定情况下，比如鼠标悬停。可以具体设置一个属性，比如宽高，背景颜色，动画效果。（2）设置过度需要的时间。将原来的元素大小，设置为原来1.5倍。同时设置，缩放效果，和x轴平移效果。触发动画之后，所有的属性，都可以变化。
html-动画效果
最新发布
m0_73890636的博客
09-25 1289
可以通过修改translateX来改变旋转的方向 translateY则绕着Y轴旋转。鼠标点到对于按钮会改变颜色（字体和背景）以及按钮的形状，鼠标的样式。修改一部分代码即可（去掉title函数里面的方框）不同的百分号比例对旋转速度所占比有影响。能在设置的框内运动且会随着运动切换颜色。infinite无限循环。
js 翻书翻页效果
weixin_35749545的博客
02-02 685
为了实现 JS 翻书翻页效果，可以使用 CSS3 动画和 JS 交互。首先定义好 HTML 结构，然后使用 CSS3 的 transition 和 transform 属性实现动画效果，最后通过 JS 监听用户的操作并对页面做出相应的改变。代码实现细节可以参考一些现有的开源项目或教程。 ...
用js实现翻书的动画效果
weixin_43951248的博客
09-07 2244
效果图（哈哈哈哈，博主的恶趣味请无视） css部分 <style> .y{ background-color: cornflowerblue; height: 200px; width: 300px; display: flex; position: relative; left: 230px; top: 50px; ...
html里面的好看的动画效果
xcLeigh
05-14 7130
html里面的好看的动画效果动画介绍动画效果1 - 平移动画效果2 - 抖动 动画介绍 html里面的好看的动画效果，包括基本的平移，旋转，抖动，变色等动画效果，可以直接嵌入代码使用； 元素属性介绍 1.位置 ：位移 translate（x，y）； 2.大小 ：缩放 scale（xx px）； 3.状态：旋转 rotate（xx deg）； 4.形态：skew（xx deg）； 转化属性 css转化属性 transform : none 不转换/ transform-function;转化函数 如 tra
使用html-docx-js实现word分页不截断内容
05-26
html-docx-js是一个将HTML转换为Microsoft Word文档的JavaScript库。要实现Word分页不截断内容，可以使用以下方法： 1. 在HTML中添加分页符 在HTML中添加分页符，可以通过在需要分页的地方添加以下代码实现： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值