js根据鼠标移动速度背景图片自动旋转的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>js实现图片快速旋转围绕的鼠标</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

</head>

<body>

<script language="JavaScript">

<!--

var images='/favicon.ico';

var amount=7;

var speed=1;

var RunTime = 0;

var cntr=0;

var xcntr=100;

var pulse=25;

var Xpos = 0;

var Ypos = 0;

var _y;

var temp;

/*If you use an image larger or smaller than the one I've used

the cursor will be off center.Alter the 2 variables below to center it.*/

var UpDown=-10;

var LeftRight=-5;

if (document.all){

document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">');

document.write('<div id="c" style="position:relative">');

for (n=0; n < amount; n++)

document.write('<img src="'+images+'" style="position:absolute;top:0px;left:0px;visibility:hidden">');

document.write('</div>');

document.write('</div>');

function FollowMouse(){

Xpos = document.body.scrollLeft+event.x+UpDown;

Ypos = document.body.scrollTop+event.y+LeftRight;

}

document.onmousemove = FollowMouse;

}

else if (document.layers){

window.captureEvents(Event.MOUSEMOVE);

function xFollowMouse(evnt){

Xpos = evnt.pageX+UpDown;

Ypos = evnt.pageY+LeftRight;

}

window.onMouseMove = xFollowMouse;

for (ns=0; ns < amount; ns++)

document.write("<LAYER NAME='n"+ns+"' LEFT='0' TOP='0' VISIBILITY='HIDE'><IMG SRC='"+images+"'></LAYER>");

}

function msi(){

if (document.layers){

for ( i = 0 ; i < ns ; i++ )

{

temp="n"+i

document.layers[0].visibility='show';

document.layers[0].top = Ypos+cntr*Math.cos((RunTime+i*4.5)/5);

document.layers[0].left =Xpos+cntr*Math.sin((RunTime+i*4.5)/5);

}

cntr+=1;

RunTime+=speed;

stp=setTimeout('msi()',10);

if (cntr>=100)

{

cntr=100;

speed=2.5;

for ( i = 0 ; i < ns ; i++ )

{

temp="n"+i

document.layers[temp].visibility='show';

document.layers[temp].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);

document.layers[temp].left=Xpos+cntr*Math.sin((RunTime-100)*i/90);

}

}

if (RunTime>182)

{

speed=0.5;

for ( i = 0 ; i < ns ; i++ )

{

temp="n"+i

document.layers[temp].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5);

document.layers[temp].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);

}

}

}

else if (document.all){

for (i=0;i<ieDiv.all.c.all.length;i++)

{

ieDiv.all.c.all[0].style.visibility='visible';

ieDiv.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);

ieDiv.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);

}

cntr+=1;

RunTime+=speed;

stp=setTimeout('msi()',10);

if (cntr>=100)

{

cntr=100;

speed=2.5;

for (i=0;i<ieDiv.all.c.all.length;i++)

{

ieDiv.all.c.all[i].style.visibility='visible';

ieDiv.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90);

ieDiv.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90);

}

}

if (RunTime>182)

{

speed=0.5;

for (i=0;i<ieDiv.all.c.all.length;i++)

{

ieDiv.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5);

ieDiv.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);

}

}

}

if (RunTime>210)

{

xcntr-=10;

}

if (document.layers)

_y=-window.innerWidth-90;

else if (document.all)

_y=-document.body.clientWidth-90;

if (xcntr <= _y)

{

RunTime=0;

speed=1;

cntr=0;

xcntr=100;

}

}

msi()

//-->

</script>

<script language="Javascript">

<!--

function selectAll(theField){

var tempval=eval("document."+theField)

tempval.focus()

tempval.select()

}

//-->

</script>

</body>

</html>

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

Javascript 相关文章推荐
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
常用jQuery代码分享
Jul 14 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 #Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 #Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 #Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 #Javascript
常用的JavaScript模板引擎介绍
Feb 28 #Javascript
JavaScript操作Cookie详解
Feb 28 #Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python shutil模块用法实例分析
2019/10/02 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Python eval函数介绍及用法
2020/11/09 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
工程造价与管理专业应届生求职信
2013/11/23 职场文书
党建示范点实施方案
2014/03/12 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
学前教育专业求职信
2014/09/02 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
大学生实习证明
2015/06/16 职场文书
小学四年级作文之写景
2019/08/23 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers