js根据鼠标移动速度背景图片自动旋转的方法
本文实例讲述了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程序设计有所帮助。
-
问题内容： 我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在页眉下面有一个产品图片，该图片始终为100％的宽度（设计显示，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初使用img（CSS宽度为100％）来完成此操作，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像- 假设尺寸较小，中等，例如，同一张图片的大版本。我知道您
-
问题内容： 在html模板中，我具有带有动态图像的这种样式： 可以在网络浏览器和android浏览器中使用。但是，使用“ style =”动态显示的背景图像不会在iPad上显示。 我总是可以使用img标签创建动态图像，但是我正在寻找iPad的样式/ css解决方案。 问题答案： 改用 要么
-
本文向大家介绍js实现背景图片感应鼠标变化的方法，包括了js实现背景图片感应鼠标变化的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现背景图片感应鼠标变化的方法。分享给大家供大家参考。具体分析如下： 鼠标点击后背景图片变化，点击另外一个菜单项前面的会自动恢复背景，其实这个如果单纯使用CSS是没办法做的，我们还要使用JS来判断鼠标状态，代码如下： 希望本文所述对大家的javasc
-
本文向大家介绍JS实现让网页背景图片斜向移动的方法，包括了JS实现让网页背景图片斜向移动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现让网页背景图片斜向移动的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js鼠标滑过图片震动特效的方法，包括了js鼠标滑过图片震动特效的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍VS+opencv实现鼠标移动图片，包括了VS+opencv实现鼠标移动图片的使用技巧和注意事项，需要的朋友参考一下 基于控制台应用程序+opencv，实现点击鼠标左键，可以拖动图片以显示感兴趣区域 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
引用脚本的内容： ; NSIS 中自动替换背景图片的例子 ; 需要新版的 nsWindows 插件与头文件 ; 脚本编写: ; X-Star @ ; zhfi @ !addincludedir .\include !addplugindir .\plugins ;替换图片的时间间隔(ms) !define TimeForChange 3000 ;图片数量范围 !define MinBg
-
本文向大家介绍移动端图片上传旋转、压缩问题的方法，包括了移动端图片上传旋转、压缩问题的方法的使用技巧和注意事项，需要的朋友参考一下 前言 在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 Or