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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现按钮控制图片360度翻转特效的方法

    本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o

  • JS控制图片翻转示例代码(兼容firefox,ie,chrome)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片旋转效果<

  • JS图片定时翻滚效果实现方法

    本文实例讲述了JS图片定时翻滚效果实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • JS实现图片翻书效果示例代码

    picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS实现图片翻书效果</title> <META http-equiv=imag

  • js带前后翻页的图片切换效果代码分享

    js带前后翻页的图片切换效果代码分享

    本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

  • js图片翻书效果代码分享

    js图片翻书效果代码分享

    这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下    -------------------------------------效果运行----------------------------------------- 为大家分享的

  • JS模仿腾讯图片站的图片翻页按钮效果完整实例

    JS模仿腾讯图片站的图片翻页按钮效果完整实例

    本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conten

  • JS实现跟随鼠标立体翻转图片的方法

    本文实例讲述了JS实现跟随鼠标立体翻转图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Wanna tell her - interactive DHTML</title> <

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

    本文实例讲述了JavaScript实现简单图片翻转的方法.分享给大家供大家参考.具体如下: 这里先取两个命名smirk1.jpg和smirk2.jpg同样大小的图像 然后运行下面的代码,可以实现简单的图片翻转 <script type="text/javascript"> var revert = new Array(); var inames = new Array('smirk'); // Preload if (document.images) { var flipp

  • JavaScript实现简单图片切换

    JavaScript实现简单图片切换

    本文实例为大家分享了JavaScript实现简单图片切换的具体代码,供大家参考,具体内容如下 下边给出几种方法进行图片切换: 方法一 (小白专用款!简单易懂) 下边附上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换2</title> <style type="text/c

  • Android实现简单图片压缩的方法

    本文实例讲述了Android实现简单图片压缩的方法.分享给大家供大家参考,具体如下: 在开发图片浏览器等软件是,很多时候要显示图片的缩略图,而一般情况下,我们要将图片按照固定大小取缩略图,一般取缩略图的方法是使用BitmapFactory的decodeFile方法,然后通过传递进去 BitmapFactory.Option类型的参数进行取缩略图,在Option中,属性值inSampleSize表示缩略图大小为原始图片大小的几分之一,即如果这个值为2,则取出的缩略图的宽和高都是原始图片的1/2,图

  • JavaScript实现简单生成随机颜色的方法

    JavaScript实现简单生成随机颜色的方法

    本文实例讲述了JavaScript实现简单生成随机颜色的方法.分享给大家供大家参考,具体如下: 如果要做出如下效果,每次刷新网页则产生一种颜色 其实非常简单,产生随机颜色的根本核心就是随机构造出一个六位数,JavaScript的随机数的问题 而且这个六位数的每一个数位0~f之内,因此就有了如下的方法: 1.首先是一个HTML布局,p标签是是用来放当前颜色的,div的背景颜色就是这个颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo

  • JavaScript实现简单图片轮播效果

    JavaScript实现简单图片轮播效果

    本文实例为大家分享了js实现简单图片轮播的具体代码,最终实现效果图 代码块 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: non

  • 基于RxJava2实现的简单图片爬虫的方法

    基于RxJava2实现的简单图片爬虫的方法

    今年十月份以来,跟朋友尝试导入一些图片到tensorflow来生成模型,这就需要大量的图片.刚开始我只写了一个简单的HttpClient程序来抓取图片,后来为了通用性索性写一个简单的图片爬虫程序.它可以用于抓取单张图片.多张图片.某个网页下的所有图片.多个网页下的所有图片. github地址:https://github.com/fengzhizi715/PicCrawler 这个爬虫使用了HttpClient.RxJava2以及Java 8的一些特性.它支持一些简单的定制,比如定制User-A

  • JavaScript实现简单图片滚动附源码下载

    昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭--他是金球奖得主.欧洲金靴.欧冠冠军核心,在葡萄牙队--9张图 C罗告诉你什么叫欲哭无泪 复制代码 代码如下: <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • 实例讲解javascript实现异步图片上传方法

    我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的URL更换成自己的,也可以直接写一个本地地址测试. html代码: <form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data"> <input type="

  • jquery简单图片切换显示效果实现方法

    本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>jquery图片切换效果</title> <script type="text/javascr

  • js简单实现图片延迟加载的方法

    本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top:

随机推荐