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游戏之是男人就下100层代码打包
Nov 08 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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类
2006/07/15 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
java解析json方法总结
2019/05/16 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
Python 多线程Threading初学教程
2017/08/22 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python requests指定出口ip的例子
2019/07/25 Python
python pandas 时间日期的处理实现
2019/07/30 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
奖学金感谢信
2015/01/21 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
药店收银员岗位职责
2015/04/07 职场文书
nginx优化的六点方法
2021/03/31 Servers
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
我收到了德劲DE1107
2022/04/05 无线电