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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php实现的日历程序
2015/06/18 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python开发简易版在线音乐播放器
2017/03/03 Python
Python实现Dijkstra算法
2018/10/17 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
商场收银员岗位职责
2015/04/07 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers