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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
聊聊vue 中的v-on参数问题
Jan 29 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php二维数组排序详解
2013/11/06 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
php数组指针操作详解
2017/02/14 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Python深入学习之闭包
2014/08/31 Python
Python中多线程及程序锁浅析
2015/01/21 Python
python Kmeans算法原理深入解析
2019/08/23 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
中学生差生评语
2014/01/30 职场文书
五一手机促销方案
2014/03/08 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
2015年清明节活动总结
2015/02/09 职场文书
入党团支部推荐意见
2015/06/02 职场文书
务工证明怎么写
2015/06/18 职场文书
高中历史教学反思
2016/02/19 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
详解如何使用Nginx解决跨域问题
2022/05/06 Servers