文档章节

JavaScript实现卷轴展开效果

小微
 小微
发布于 2013/04/27 13:09
字数 524
阅读 1162
收藏 2

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

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

思路1:

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

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

(1)HTML部分

<img id="left" src="left.jpg" />
<img id="mid" src="mid.jpg" />
<img id="right" src="right.jpg" />

(2)CSS部分

#left, #mid, #right, .newMid {
    float: left;
}
(3)JavaScript部分
var t;
function move(){
    var mid = document.getElementById("mid");
    var parent = mid.parentNode;
    var ele = document.createElement("img");
    ele.src = "mid.jpg";
    ele.className = "newMid";
    parent.insertBefore(ele, mid);

    t = setTimeout("move()", 100);

    var count = document.getElementsByTagName("img").length;
    if(count > 100) clearTimeout(t);
}

实现的效果截图如下:

观察上图发现,红色框中的图案与下载的卷轴原图非常不一样,这是因为思路1中是在不断拼接mid.jpg图片,因此不能展示出卷轴原有的样子。对这个卷轴而言,中间图案很像,所以看上去还好,但是如果是不规则的图案的话,那么就有问题了。

思路2:

使用div来展示图片,将原图img.jpg设置为div的背景,并用background-position来控制图片显示的区域。然后设置计时器,随着时间的增加,不断增大div的宽度,从而形成动态展开卷轴的效果。核心代码如下:

(1)HTML部分

<div id="left"></div>
<div id="right"></div>
(2)CSS部分

#left {
    float: left;
    width: 120px;
	height: 632px;
    background: url(img.jpg);
}
#right {
    float: left;
    width: 120px;
	height: 632px;
    background: url(img.jpg) 100% 50%;
}
(3)JavaScript部分

var t;
var wid = 120;
function move() {
    var right = document.getElementById("right");
    wid += 20;
    right.style.width = wid+"px";

    t = setTimeout("move()", 100);

    if(wid > 560) clearTimeout(t);
}
实现的效果截图如下:

这回和原图一模一样了吧?

嘻嘻,大功告成!

© 著作权归作者所有

小微
粉丝 117
博文 78
码字总数 81696
作品 0
海淀
程序员
私信 提问
加载中

评论(1)

冷三叔
冷三叔
不错,JS技术上我现在还达不到这种要求..
jquery问题,求高手解决,有偿

站点播放页面剧集列表功能改写 现有的站点播放页面 如: http://www.haju123.com/daluju/3600/e6324ce171c459c7.html 可以看到右边效果 这是第六集如图: 第15集效果如图 点展开后效果如图 以上...

你好里
2012/04/27
766
0
css面试题: 手写collapse(折叠)的css/html部分

源码: github.com/any86/any-u… 做一个组件库不难 其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组...

铁皮饭盒
07/17
0
0
打HTML代码的基础常识(快速理解入手)

打HTML代码的基础常识 1.在HTML中嵌入 css和JavaScript 1、在html源代码中想要实现css的样式 就必须用 标签 一般放在 之间 如图1 /2、在html源代码中想要实现JavaScript的样式 就必须用 标签...

慧小慧
01/18
0
0
Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js),即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来,我们就可以实现诸如手风琴或是导航栏这样的复杂...

doliangzhe
2013/05/19
3.9K
2
[JavaScript]-Array构造的数组使用map为何失效?

[示例] 假设你需要生成一个从0到99的数组。你要怎么做呢?下面是一种解法: 看到这种使用传统的for循环的方式会有点不大习惯。事实上,各种高阶函数,像forEach, map, filter, reduce足以写出...

xiaoLoo
2018/06/27
25
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
4
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
5
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部