JavaScript实现卷轴展开效果

最新推荐文章于 2022-08-03 16:15:33 发布
VIP文章 最新推荐文章于 2022-08-03 16:15:33 发布
阅读量2.2k 收藏 9
点赞数
文章标签： javascript 游戏 前端 ViewUI
原文链接：https://my.oschina.net/warmcafe/blog/125872
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

今天用原生的javascript实现了卷轴展开效果。虽然其实不难，但真正动手实现的时候还是遇到些小问题。因此最终完成后好有成就感呀！这里分享一下。

图片素材是google图片中搜索“卷轴”关键字得到的。

思路1：

将图片分为三部分（用美图秀秀或者ps等工具进行裁剪）。左侧卷轴、右侧卷轴以及中间部分，如下图所示。

然后用js的setTimeout()函数设置计时器，每过100ms就向中间位置插入一个mid.jpg图片，从而形成卷轴动态展开的效果。核心代码如下：

（1）HTML部分 

<img id="left" src="left.
最低0.47元/天 解锁文章
weixin_33775582
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现圣旨卷轴展开效果
12-11
在其他网站看见类似效果，但代码有400多行且看不懂，我用60多行的代码给予实现。 实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！ 效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>诏书</title> <style type="text/css"> * { margin: 0; padding: 0; } #animate { margin: 40px auto; width: 4
【前端】数字卷轴JS特效
野生Java小菜鸟的博客
10-27 968
永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，写J S也。 先来看一张JS特效图： （不知为何GIF显示不了，算了 在线演示吧） 代码实现如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;数字卷轴特效
html5 滚屏效果 插件,jQuery插件fullPage.js实现全屏滚动效果
weixin_33897085的博客
06-03 943
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法，供大家参考，具体内容如下0.01 基本演示 的HTML 布局 以及js 代码//需要连接 连接的三个文件 //css文件 //jQuery 1.8.3的版本 //fullPage插件的压缩版本.section { text-align: center; font: 50px "Microsoft Yahei"; col...
jQuery图片照片卷轴效果_jQuery圆形图片切换动画效果
ICode联盟
11-08 88
下载地址 Javascript$(".scroller").scroller({element: "a", // (string) HTML elementdirection: "horizontal", // (string) available options: horizontal, verticalcontainer: {name: "inside", // (string) class name for the containereasing: "easeOutBack", // (string
html 大屏滚动效果,纯js 实现 大屏数字滚动效果
weixin_35677043的博客
06-09 1724
大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果： 所需素材 直接上代码HTML部分0123456789{{item}}js部分export default {data() {return {computeNumber: ["0", "0", "0", "0", "0", "9", "1", "7"]};},created() {...
js复古卷轴打开动画js特效
最新发布
ICode联盟
08-03 321
js实现的卷宗打开，仿复古卷轴打开的动画特效代码。
分享100个好看且实用的JavaScript特效
热门推荐
zy0412326的专栏
05-29 2万+
分享100个好看且实用的JavaScript特效 分享100个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这100个Js也是花了很多时日！ 下面是PPT的名字，我放了一些图片，所有图片全都放进去是不行的100个图太多，大家下载后可以看到。 彩色发光的黑洞CSS3特效 纯CSS3边框按钮悬停特效 HTML5彩虹波浪动画特效 ECharts企业组织架构图代码 CSS3 SVG清空回收站按钮特效 HTML5打雷闪电下雨特效 jQuery数字百分比加载
JS实现两张图片卷轴的切换效果
weixin_33998125的博客
06-13 219
效果参见： http://weitwo.com/home.htm 引入jQuery后， 再引入如下JS:$(document).ready(function () {    var slidePicture = new sliderPicture();    slidePicture.containerId = 'container';    slidePicture.frontId ...
JQuery动画基础：上卷下拉
weixin_44541076的博客
04-18 459
开发工具与关键技术： JQuery 作者：咕哒咕哒giao 撰写时间：2019年4月16日 今天要说的是JQuery动画基础其中之一：上卷下拉的动画效果。 上卷下拉的话分别是JQuery中的 slideUp（上卷），slideDown（下拉），slideToggle（既可以上卷又可以下拉）这三个属性，接下来再来介绍下这些属性中的参数： speed: 三种预定速度之一的字符串(“slow”,“no...
html画卷效果,原来这种画卷展开的效果这么简单！三步即可做出来！太惊艳了...
weixin_29758513的博客
06-08 1156
我们在一些发布会或者开幕式上经常会看到这样的画卷展开效果，感觉特别惊艳，那么这种效果是怎么做出来的呢？其实很简单！我们用PPT就可以做出来！小编今天就手把手教大家制作这种效果，有需要的小伙伴可以收藏起来慢慢学哦！一、画卷展开效果制作1、素材准备首先，我们要准备的素材有作为画卷的图片一张，画轴一个~将它们插入PPT里，调整好大小，复制一个卷轴，然后将两个卷轴放在画卷正中间，如图~2、画卷动画设置接下...
jquery 打开卷轴动画，中国卷轴
11-06
根据 jquery 的 animate 控制打开卷轴的效果，欢迎提出任何意见
jQuery卷轴平滑打开动画特效.zip
07-04
jQuery卷轴平滑打开动画特效是一款将一张完整的卷轴拆分到多个div中，然后通过jquery animate事件，配合不同的时间延迟，形成完整的卷轴打开动画。
javascript实现圣旨卷轴展开效果（代码分享）
10-20
本文主要介绍了javascript实现圣旨卷轴展开效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
jQuery卷轴平滑打开动画特效
06-24
HTML5 Canvas烟花喷泉动画特效是一款逼真的金黄色烟花动画效果。
JS实现打开卷轴
06-22
基于前端的JS动画卷轴打开，可以实现动画效果。。。背景，文字可自行更改
css3做的滚动卷轴
07-15
css3做的滚动卷轴样式的菜单栏，效果绚丽，富有创意
javascript实现的listview效果
10-30
javascript实现的listview效果
JavaScript实现放大镜效果代码示例
10-15
主要介绍了JavaScript实现放大镜效果代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
用JavaScript实现仿Windows关机效果
10-31
用JavaScript实现仿Windows关机效果

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值