JavaScript实现简单图片翻转的方法


Posted in Javascript onApril 17, 2015

本文实例讲述了JavaScript实现简单图片翻转的方法。分享给大家供大家参考。具体如下:

这里先取两个命名smirk1.jpg和smirk2.jpg同样大小的图像
然后运行下面的代码,可以实现简单的图片翻转

<script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');
// Preload
if (document.images) {
 var flipped = new Array();
 for(i=0; i< inames.length; i++) {
  flipped[i] = new Image();
  flipped[i].src = ""+inames[i]+"2.JPG";
 }
}
function over(num) {
 if(document.images) {
  revert[num] = document.images[inames[num]].src;
  document.images[inames[num]].src = flipped[num].src;
 }
}
function out(num) {
 if(docu <script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');
// Preload
if (document.images) {
 var flipped = new Array();
 for(i=0; i< inames.length; i++) {
  flipped[i] = new Image();
  flipped[i].src = ""+inames[i]+"2.JPG";
 }
}
function over(num) {
 if(document.images) {
  revert[num] = document.images[inames[num]].src;
  document.images[inames[num]].src = flipped[num].src;
 }
}
function out(num) {
 if(document.images) document.images[inames[num]].src = revert[num];
}
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
JavaScript实现将xml转换成html table表格的方法
Apr 17 #Javascript
JavaScript实现的简单幂函数实例
Apr 17 #Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 #Javascript
jQuery中toggle()函数的使用实例
Apr 17 #Javascript
JQuery实现可直接编辑的表格
Apr 16 #Javascript
JS中捕获console.log()输出的方法
Apr 16 #Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 #Javascript
You might like
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
常用简易JavaScript函数
2009/04/09 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
Python中bisect的用法
2014/09/23 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python要安装在哪个盘
2020/06/15 Python
Python必须了解的35个关键词
2020/07/16 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
大学生演讲稿范文
2014/01/11 职场文书
给孩子的新年寄语
2014/04/08 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
工作收入住址证明
2014/10/28 职场文书
升职自荐信范文
2015/03/27 职场文书
python中pycryto实现数据加密
2022/04/29 Python