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 26 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
JS实现纸牌发牌动画
Jan 19 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python多线程原理与用法详解
2018/08/20 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python的range和linspace使用详解
2019/11/27 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
治庸问责工作总结
2015/08/11 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers