基于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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
七个很有意思的PHP函数
May 12 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
微信小程序实现人脸识别
May 25 Javascript
客户端验证用户名和密码的方法详解
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
基于文本的留言簿
2006/10/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php算法实例分享
2015/07/14 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python基于SMTP协议发送邮件
2019/05/31 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
资料员的岗位职责
2013/11/20 职场文书
八年级生物教学反思
2014/01/22 职场文书
运动会口号大全
2014/06/07 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
校园运动会广播稿
2015/08/19 职场文书
财务年终工作总结大全
2019/06/20 职场文书
理解python中装饰器的作用
2021/07/21 Python