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 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
详解vue移动端日期选择组件
Feb 22 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
php 验证码制作(网树注释思想)
2009/07/20 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
WxPython实现无边框界面
2019/11/18 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
生物科学专业个人求职信范文
2013/12/07 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
社会实践活动总结
2015/02/05 职场文书
三潭印月的导游词
2015/02/12 职场文书
北京英语导游词
2015/02/12 职场文书
工作证明书
2015/06/15 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers