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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
JavaScript执行机制详细介绍
Dec 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实现var_export的详细介绍
2013/06/20 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
js实现的星星评分功能函数
2015/12/09 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
会计大学生职业生涯规划书范文
2014/01/13 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
搞笑老公保证书
2015/02/26 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis