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>图片旋转效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
ul{padding:0 15px;}
ul li{padding-bottom:15px;border-bottom:1px dashed #EEE;}
.caption{padding:15px 0 5px;}
.caption input{margin-right:10px;padding:0 10px;}
</style>
<script type="text/javascript">
/*
* www.byzuo.com
* ok!: MSIE 6, 7, 8, Firefox 3.6, chrome 4, Safari 4, Opera 10
* o 旋转图片ID;
* p 选择旋转方向，固定值为'left'或'right';
*/
function rotate(o,p){
    var img = document.getElementById(o);
    if(!img || !p) return false;
    var n = img.getAttribute('step');
    if(n== null) n=0;
    if(p=='right'){
        (n==3)? n=0:n++;
    }else if(p=='left'){
        (n==0)? n=3:n--;
    }
    img.setAttribute('step',n);
    //MSIE
    if(document.all) {
        img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
        //HACK FOR MSIE 8
        switch(n){
            case 0:
                imgimg.parentNode.style.height = img.height;
                break;
            case 1:
                imgimg.parentNode.style.height = img.width;
                break;
            case 2:
                imgimg.parentNode.style.height = img.height;
                break;
            case 3:
                imgimg.parentNode.style.height = img.width;
                break;
        }
    //DOM
    }else{
        var c = document.getElementById('canvas_'+o);
        if(c== null){
            img.style.visibility = 'hidden';
            img.style.position = 'absolute';
            c = document.createElement('canvas');
            c.setAttribute("id",'canvas_'+o);
            img.parentNode.appendChild(c);
        }
        var ccanvasContext = c.getContext('2d');
        switch(n) {
            default :
            case 0 :
                c.setAttribute('width', img.width);
                c.setAttribute('height', img.height);
                canvasContext.rotate(0 * Math.PI / 180);
                canvasContext.drawImage(img, 0, 0);
                break;
            case 1 :
                c.setAttribute('width', img.height);
                c.setAttribute('height', img.width);
                canvasContext.rotate(90 * Math.PI / 180);
                canvasContext.drawImage(img, 0, -img.height);
                break;
            case 2 :
                c.setAttribute('width', img.width);
                c.setAttribute('height', img.height);
                canvasContext.rotate(180 * Math.PI / 180);
                canvasContext.drawImage(img, -img.width, -img.height);
                break;
            case 3 :
                c.setAttribute('width', img.height);
                c.setAttribute('height', img.width);
                canvasContext.rotate(270 * Math.PI / 180);
                canvasContext.drawImage(img, -img.width, 0);
                break;
        }
    }
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<ul class="clearfix">
    <li>
        <div class="caption">
            <input type="button" value="turn left" onclick="rotate('pic_1','left')">
            <input type="button" value="turn right" onclick="rotate('pic_1','right')">
        </div>
        <div class="cont">
            <img  alt="javascript 图片旋转效果"  id="pic_1" src="1.gif" alt="">
        </div>
    </li>
</ul>
</body>
</html>

赞 (0)

相关推荐

  • 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图片翻书效果代码分享

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

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

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

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

  • 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

  • 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> <

  • 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实现按钮控制图片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控制淡入淡出示例代码

    相对来说可以让初学者看一下,并不太实用,可能jquery4条语句就能解决,但是原生相对有参照性,了解最终原理才是关键. 复制代码 代码如下: <!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.o

  • Node.js实现爬取网站图片的示例代码

    Node.js实现爬取网站图片的示例代码

    目录 涉及知识点 cheerio简介 什么是cheerio ? 安装cheerio 准备工作 核心代码 示例截图 涉及知识点 开发一个小爬虫,涉及的知识点如下所示: https模块,主要是用户获取网络资源,如:网页源码,图片资源等. cheerio模块,主要用于解析html源码,并可访问,查找html节点内容. fs模块,主要用于文件的读写操作,如保存图片,日志等. 闭包,主要是对于异步操作,对象的隔离保护. cheerio简介 什么是cheerio ? cheerio是为服务器特别定制的,快速

  • 使用Dropzone.js上传的示例代码

    使用Dropzone.js上传的示例代码

    本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

  • 纯JS实现图片验证码功能并兼容IE6-8(推荐)

    纯JS实现图片验证码功能并兼容IE6-8(推荐)

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也是醉了.万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识.下面看我是如何搞定它的,虽然花了一点时间,不过也值得. 使用方法 使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID

  • Python使用urlretrieve实现直接远程下载图片的示例代码

    在实现爬虫任务时,经常需要将一些图片下载到本地当中.那么在python中除了通过open()函数,以二进制写入方式来下载图片以外,还有什么其他方式吗?本文将使用urlretrieve实现直接远程下载图片. 下面我们再来看看 urllib 模块提供的 urlretrieve() 函数.urlretrieve() 方法直接将远程数据下载到本地. >>> help(urllib.urlretrieve) Help on function urlretrieve in module urllib

  • js 压缩图片的示例（只缩小体积，不更改图片尺寸）

    本文作者:Marydon 原文链接:https://www.cnblogs.com/Marydon20170307/p/11486511.html 1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="ima

  • JS中跳出循环的示例代码

    1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each使用return true 终止本次循环计入下一个循环,return false终止整个循环.  函数返回值跟此处无关 例: $.extend($.fn.datagrid.methods, { isChecked: function (dg, param) { var flag = false;//是否选中 var allRows = $(dg).datagri

  • java后台接收app上传的图片的示例代码

    整理文档,搜刮出一个java后台接受app上传的图片的示例代码,稍微整理精简一下做下分享 package com.sujinabo.file; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.UUID; import javax.servlet.S

  • java 生成文字图片的示例代码

    本文主要介绍了java 生成文字图片的示例代码,分享给大家,具体如下: import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Graphics; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO;

随机推荐