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

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

宰子琪
2023-03-14
本文向大家介绍js实现按钮控制图片360度翻转特效的方法,包括了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 object = image.parentNode;

if(isIE){

image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";

i++;

       if(i>4) {i=1};

}

else{

try{

var canvas = document.createElement('canvas');

if(canvas.getContext("2d")) {

object.replaceChild(canvas,image);

var context = canvas.getContext("2d");

context.translate(176, 0);

context.rotate(Math.PI*0.5);

context.drawImage(image,0,0);

}

}catch(e){}

}

}

</script>

<input type="button" value="点击旋转图片" onclick="rotate(document.getElementById('myimg'))" /><br />

<img id="myimg" src="/images/m03.jpg"/>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍js实现按钮控制带有停顿效果的图片滚动,包括了js实现按钮控制带有停顿效果的图片滚动的使用技巧和注意事项,需要的朋友参考一下 本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下 这种效果的具体效果是鼠标移上去滚动停止,移出滚动,滚动时是一张一张图片的滚动,即滚动一张之后停2s开始滚动下一张,具体内容请大家参考代码。 以上就是本文的全部内容,希望对大家的学

  • 本文向大家介绍原生JS实现图片翻书效果,包括了原生JS实现图片翻书效果的使用技巧和注意事项,需要的朋友参考一下 下面给大家分享基于原生js实现的图片翻书效果,具体代码如下所示: 以上所述是小编给大家介绍的原生JS实现图片翻书效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍JS实现图片切换特效,包括了JS实现图片切换特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下 知识点: 1.window.onload网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果: 点击上一张下一章切换图片 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐

  • 本文向大家介绍JavaScript实现简单图片翻转的方法,包括了JavaScript实现简单图片翻转的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现简单图片翻转的方法。分享给大家供大家参考。具体如下: 这里先取两个命名smirk1.jpg和smirk2.jpg同样大小的图像 然后运行下面的代码,可以实现简单的图片翻转 希望本文所述对大家的javascript程

  • 本文向大家介绍Js实现网页键盘控制翻页的方法,包括了Js实现网页键盘控制翻页的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Js实现网页键盘控制翻页的方法。分享给大家供大家参考。具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现。 举例如下: js代码如下:

  • 本文向大家介绍原生js实现图片轮播特效,包括了原生js实现图片轮播特效的使用技巧和注意事项,需要的朋友参考一下 本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习。 运行效果图: 具体代码: 希望本文所述对大家学习javascript程序设计有所帮助。