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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
Javascript函数的参数
2015/07/16 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
Python 列表的清空方式
2020/01/13 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Python实现壁纸下载与轮换
2020/10/19 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
公司年底活动方案
2014/08/17 职场文书
2015年推普周活动方案
2015/05/06 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
教务处教学工作总结
2015/08/10 职场文书
初三化学教学反思
2016/02/22 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Python道路车道线检测的实现
2021/06/27 Python
DE1103使用报告
2022/04/05 无线电