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 篱式条件判断
Aug 22 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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/03 咖啡文化
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python实现石头剪刀布程序
2021/01/20 Python
python字符串的index和find的区别详解
2020/06/20 Python
大学学年自我鉴定
2013/10/28 职场文书
初中生评语大全
2014/04/24 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
画展观后感
2015/06/17 职场文书
运动员入场词
2015/07/18 职场文书
入团申请书格式
2019/06/20 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Nginx配置根据url参数重定向
2022/04/11 Servers