当前位置: 首页 > 编程笔记 >

JavaScript实现简单图片翻转的方法

印季
2023-03-14
本文向大家介绍JavaScript实现简单图片翻转的方法,包括了JavaScript实现简单图片翻转的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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简单实现图片预加载的使用技巧和注意事项,需要的朋友参考一下 简单的图片预加载 reloader.js 具体用法如上,小伙伴们可以发挥你的想象力,自由扩展。

  • 本文向大家介绍简单实现JavaScript图片切换效果,包括了简单实现JavaScript图片切换效果的使用技巧和注意事项,需要的朋友参考一下 JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数

  • 本文向大家介绍php简单实现多字节字符串翻转的方法,包括了php简单实现多字节字符串翻转的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php简单实现多字节字符串翻转的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的php程序设计有所帮助。

  • 给定布尔值如何来回翻转它?我当然可以这样做: 但那感觉太长了。有什么巧妙而干净的方法可以做到这一点吗?谢谢。

  • 本文向大家介绍php简单实现批量上传图片的方法,包括了php简单实现批量上传图片的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php简单实现批量上传图片的方法。分享给大家供大家参考,具体如下: 更多关于PHP相关内容感兴趣的读者可查看本站专题:《php文件操作总结》、《PHP运算与运算符用法总结》、《PHP网络编程技巧总结》、《PHP基本语法入门教程》、《php操作office文档

  • 本文向大家介绍使用Javascript简单实现图片无缝滚动,包括了使用Javascript简单实现图片无缝滚动的使用技巧和注意事项,需要的朋友参考一下 js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。 主要的是使用js位置知识。 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界