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 来操作字符串(一些字符串函数)
Feb 15 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
canvas的神奇用法
Feb 03 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
vue实现全匹配搜索列表内容
Sep 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
thinkphp 多表 事务详解
2013/06/17 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
类之Prototype.js学习
2007/06/13 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
软件缺陷的分类都有哪些
2014/08/22 面试题
区域销售经理职责
2013/12/22 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
参加招聘会后的感想
2015/08/10 职场文书
公证书
2019/04/17 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL