几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 533 JAVASCRIPT 鼠标
Javascript与HTML5的canvas实现图片旋转
来源：互联网
2023-03-16 23:57:33 361
Javascript与HTML5的canvas实现图片旋转
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
准备好需要用到的图标。
书写hmtl代码。
div id="main">
div class="aaa">
div id="tool">
a href="#" id="arr_left" onclick="rotate('myimg','left')">向左/a>
a href="#" id="arr_right" onclick="rotate('myimg','right')">向右/a>
/div>
div id="img">
img src="images/aaa.jpg" width="650" height="320" alt="" id="myimg" />
/div>
/div>
/div>
书写css代码。
* { margin: 0; padding: 0; }
body { font-size: 12px; padding: 50px; }
a { color: #333; text-decoration: none; }
.aaa { width: 650px; margin: 0px auto }
#tool { height: 28px; line-height: 24px }
#tool a { display: block; float: left; width: 50px; height: 20px; background: url(../images/arr.gif) no-repeat; font-size: 14px; text-indent: 16px }
#tool a#arr_left { background-position: 2px 6px }
#tool a#arr_right { background-position: 2px -21px }
书写并添加js代码。
script>
function rotate(obj,arr){
var img = document.getElementById(obj);
if(!img || !arr) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(arr=='left'){
(n==0)? n=3:n--;
}else if(arr=='right'){
(n==3)? n=0:n ;
}
img.setAttribute('step',n);
//对IE浏览器使用滤镜旋转
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' n ')';
//HACK FOR MSIE 8
switch(n){
case 0:
img.parentNode.style.height = img.height;
break;
case 1:
img.parentNode.style.height = img.width;
break;
case 2:
img.parentNode.style.height = img.height;
break;
case 3:
img.parentNode.style.height = img.width;
break;
}
// 对现代浏览器写入HTML5的元素进行旋转： canvas
}else{
var c = document.getElementById('canvas_' obj);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_' obj);
img.parentNode.appendChild(c);
}
var canvasContext = 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>
代码整体结构。
查看效果。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTMLJAVASCRIPT
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 258 JAVASCRIPT
- 详细阅读