基于JS代码实现图片在页面中旋转效果


Posted in Javascript onJune 16, 2016

1.概述

在一些交易平台网站,如淘宝网、拍拍网等,经常会发现一些图片以圈的形状旋转的效果,如此反复的执行。

2.技术要点

主要应用了Math对象的sin(返回数的正弦值)和cos(返回数的余弦值),通过取得正弦值和余弦值然后加一些算法来改变当前层的位置,使图片在页面中旋转。

3.具体实现

(1)本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置,代码如下:

<script language="javascript"> 
var x1=200; 
var x2=200; 
var timer;
var r=60;
var i = 0; 
function eddyphoto(i) { 
var ob=document.all("divround");
ob.style.posTop = r*Math.sin((i*Math.PI)/180)+x1; 
ob.style.posLeft = r*Math.cos((i*Math.PI)/180)+x2; 
i=i+1;
if (r>100){
window.clearTimeout(timer);
}
else{
if (i > 360){
i = 0;r = r + 1;
}
timer=setTimeout("eddyphoto("+i+")",10);
}
}
eddyphoto(0);
</script>

(2)在页面中添加一个层并在层中添加要旋转效果的图片,代码如下:

<div id="divround" style="width:50pt; top:198.75pt; left:256.5pt; position:absolute; z-index:0">
<img src="temp.jpg">
</div>

以上所述是小编给大家介绍的基于JS代码实现图片在页面中旋转效果 的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
greybox——不开新窗口看新的网页
Feb 20 Javascript
js控制frameSet示例
Sep 10 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
jquery中键盘事件小结
Feb 24 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
客户端验证用户名和密码的方法详解
Jun 16 #Javascript
检查表单元素的值是否为空的实例代码
Jun 16 #Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 #Javascript
基于JS代码实现实时显示系统时间
Jun 16 #Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 #Javascript
jquery插件格式实例分析
Jun 16 #Javascript
详解JavaScript对象类型
Jun 16 #Javascript
You might like
默默简单的写了一个模板引擎
2007/01/02 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
深入理解js中this的用法
2016/05/28 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
Python操作json的方法实例分析
2018/12/06 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
结构和类有什么异同
2012/07/16 面试题
农民工工资承诺书范文
2014/03/31 职场文书
村庄绿化方案
2014/05/07 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书