网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
【javascript学习指南】javascript 仿新浪微博图片旋转效果
【javascript学习指南】javascript 仿新浪微博图片旋转效果
发布时间:2018-08-23
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
仿新浪微博图片旋转效果
<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=="left"){ (n==3)? n=0:n++; }else if(p=="right"){ (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: 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; } //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 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>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/24621/
上一篇:
select标签默认选中|IE下select标签innerHTML插入option的BUG
下一篇:
【input输入框默认值】禁禁input输入框自动填充方法
相关推荐
select标签默认选中|IE下select标签innerHTML插入option的BUG
asp连接数据库|asp添加数据库记录
phpstudy_php 批量删除目录下所有文件与文件夹
ie浏览器兼容模式|兼容IE和Firefox且可设置多个的漂浮广告
[css超出部分省略号]css 代码压缩工具
【asp.net】asp 删除数据库记录入门教程
phpstudy|php urlencode中文编码与urlencode语法
phpstudy|php 多种无限分类实例
免费phpmysql数据库_免费PHP、MYSQL、ASP、MSSQL个人主页空间
phpstudy_php 值得收藏的常用类汇总
网友关注
【json】js 二级联动菜单
挑选的拼音|轻松挑选搜索关键词
phpstudy_php 生成缩略图程序
[鼠标移到一张图片放大]鼠标移到一张图片后其余图片变灰
js正则表达式语法大全|js替换指定内容正则表达式
搜索引擎优化的方法有哪些|搜索引擎优化详细方法
phpstudy|php 把二维数组保存到一维数组教程
javascript学习指南|javascript 竖向排列的图片幻灯切换效果
[json]js XMLDOM解析xml 文档实例解析
【什么的经验】经验:外链做多容易被搜索引擎K
热门标签
最新php常用代码
php常用代码
as3 api|as3 火燃烧效果实现代码
php常用代码
phpstudy|php continue和break流程控制语名用法
php常用代码
【sql语句查询】sql复合查询与null对查询结果影响分析
php常用代码
兼容firefox_兼容firefox和Opera,select中添加、修改、删除option元素
php常用代码
csrf-token_c 随机生成字符串或数组方法
php常用代码
css美化select_css美化select表单实现方法代码
php常用代码
【超简单的画】超简单php 大图生成缩略图实现代码
php常用代码
[asp.net core]asp.net ajax 检测用户名是否可用代码
php常用代码
phpstudy|php 获取目录下所有文件实现代码
php常用代码
asp.net core|asp.net ajax 检测用户名是否可用代码
php常用代码热门文章
php常
【input输入框默认值】禁禁input输入框自动填充方法
php常
城市二级联动插件|城市二级联动菜单
php常
phpstudy_php利用imagecreatetruecolor动态生成高清图片代码
php常
【php获取checkbox批量删除数据库】php获取checkbox批量删除数据代码
php常
[phpstudy]php 全面获取url地址栏参数多种方法
php常
【phpstudy】php 内存使用信息代码
php常
php获取url地址栏|php获取url地址完美代码
php常
phpstudy|php 99乘法表代码
php常
php遍历多维数组|php获得二维或多维数组长度
php常
javascript学习指南|javascript 滑动展开/收缩广告 代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有