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是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP用户指南-cookies部分
2006/10/09 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
浅谈PHP中的
2016/04/23 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js变换显示图片的实例
2013/04/16 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
什么是python的必选参数
2020/06/21 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
Python如何实现单例模式
2016/06/03 面试题
亮化工程实施方案
2014/03/17 职场文书
品牌服务方案
2014/06/03 职场文书
售后客服工作职责
2014/06/16 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang