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 相关文章推荐
js jq 单击和双击区分示例介绍
Nov 05 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 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
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php对数组排序代码分享
2014/02/24 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
pandas实现导出数据的四种方式
2020/12/13 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
专业技术职务聘任书
2014/03/29 职场文书
促销活动总结范文
2014/04/30 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
文书工作总结(范文)
2019/07/11 职场文书