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 相关文章推荐
JS定时关闭窗口的实例
May 22 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JSONP之我见
Mar 24 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
字符串反转_JavaScript
Apr 28 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
BootStrap前端框架使用方法详解
Feb 26 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使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
javascript document.referrer 用法
2009/04/30 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python实现ping的方法
2015/07/06 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
基于python使用tibco ems代码实例
2019/12/20 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
三方合作协议书范本
2014/04/18 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
学校四群教育实施方案
2014/06/12 职场文书
学生吸烟检讨书
2014/09/14 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
走进毛泽东观后感
2015/06/04 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers