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 Event学习第九章 鼠标事件
Feb 08 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
js中生成map对象的方法
Jan 09 Javascript
jQuery事件对象总结
Oct 17 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
vue浏览器返回监听的具体步骤
Feb 03 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php定界符
2014/06/19 PHP
php实现插入排序
2015/03/29 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
详解Python中的文件操作
2016/08/28 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
应用心理学个人的求职信
2013/12/08 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
岗位职责风险点
2014/03/12 职场文书
法人授权委托书格式
2014/04/08 职场文书
食品安全工作方案
2014/05/07 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android