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 引起的安全问题
Dec 27 Javascript
jquery tools之tooltip
Jul 25 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
js获取php变量的实现代码
Aug 10 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
JS实现按比例缩小图片宽高
Aug 24 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
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
mouse_on_title.js
2006/08/25 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
浅谈js原生拖放
2016/11/21 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python 切分数组实例解析
2019/11/07 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
个人求职信范文分享
2014/01/31 职场文书
上班离岗检讨书
2014/09/10 职场文书
试用期辞职信范文
2015/03/02 职场文书
网吧管理制度范本
2015/08/05 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python