JS实现鼠标经过时背景色缓慢改变

我不知道你会不会jquery,会的话很轻松实现
我用js给你写了个大概,你研究下

<html>
<head><style>
#aaa{ width:200px; background:#FF0000; border-color:#99FF00; border:5px solid;
}</style>
<script>
function cs(backBG,borderBG){
oldBody=document.body;
with(oldBody){
  var newBody=cloneNode();
  style.filter='blendtrans(duration=1)';
  filters[0].apply();
  with(document.styleSheets[0]){
   rules[0].style.backgroundColor=backBG;
   rules[0].style.borderColor=borderBG;
  }
  filters[0].play();
  setTimeout(function(){
    if(oldBody!=null){
     oldBody.applyElement(newBody, "inside")
     oldBody.swapNode(newBody);
     oldBody.removeNode(true);
     }
    },1500);
}
}
</script>
</head>
<body>
<div id="aaa" οnmοuseοver="cs('skyblue','blue')"></div>
</body>
</html>

这不过是事件改变下,这是基础知识,应该知道

转载于:https://www.cnblogs.com/zhoujianwen/archive/2013/05/03/3057382.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第01个小程序:随鼠标移动而变色的背景(VaryTheBackground.cs) 程序运行,当鼠标指针靠近窗口中心程度不同,客户区的背景颜色也不同。 using System; using System.Windows; using System.Windows.Input; using System.Windows.Media; namespace Chapter02 { public class VaryTheBackground : Window { SolidColorBrush brush = new SolidColorBrush(Colors.Black); //创建画刷 。SolidColorBrush是最简单的画刷。 [STAThread] public static void Main() { Application app = new Application(); app.Run(new VaryTheBackground()); } public VaryTheBackground() { Title = "Vary the Background"; Width = 384; Height = 384; Background = brush; } //鼠标移动事件 protected override void OnMouseMove(MouseEventArgs args) { //窗口呈现尺寸-边框和标题栏的尺寸 double width = ActualWidth - 2 * SystemParameters.ResizeFrameVerticalBorderWidth; double height = ActualHeight - 2 * SystemParameters.ResizeFrameHorizontalBorderHeight - SystemParameters.CaptionHeight; Point ptMouse = args.GetPosition(this); //获取鼠标位置 Point ptCenter = new Point(width / 2, height / 2); //窗口中心 Vector vectMouse = ptMouse - ptCenter; //向量。向:中心指向鼠标位置;量:鼠标位置与中心距离 double angle = Math.Atan2(vectMouse.Y, vectMouse.X); Vector vectEllipse = new Vector(width/ 2 * Math.Cos(angle), height / 2 * Math.Sin(angle)); Byte byLevel = (byte)(255 * (1 - Math.Min(1, vectMouse.Length / vectEllipse.Length))); Color clr = brush.Color; clr.R = clr.G = clr.B = byLevel; brush.Color = clr; } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值