简单的鼠标拖拽（1）颜色渐变

最新推荐文章于 2021-07-17 00:05:33 发布
最新推荐文章于 2021-07-17 00:05:33 发布
阅读量494 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36741724/article/details/99864246
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标拖拽</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 400px;
                height: 50px;
                background: gray;
                position: relative;
            }
            #box1{
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                left: 0;
                top: 0;
            }
            #box2{
                width: 400px;
                height: 400px;
                background: green;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="box1">
                
            </div>
            
        </div>
        <div id="box2">
                
        </div>
        <script type="text/javascript">
            var box = document.getElementById('box');
            var box1 = document.getElementById('box1');
            var box2 = document.getElementById('box2');
            var w = box.offsetWidth - box1.offsetWidth;
            var h = box.offsetHeight - box1.offsetHeight;
            box1.onmousedown = function(){
                var selfX = event.clientX - this.offsetLeft;
                var selfY = event.clientY - this.offsetTop;
                document.onmousemove = function(){
                    var newLeft = event.clientX - selfX;
                    var newTop = event.clientY - selfY;
                    if (newLeft<=0){
                        newLeft = 0;
                    }else if(newLeft>= w){
                        newLeft =w + "px";        
                    }
                    box1.style.left = newLeft +'px'
                    box2.style.opacity = newLeft/w;
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        </script>
    </body>
</html>

扬、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5拖拽互动修改页面元素颜色特效
12-12
这是一款非常有趣的HTML5可拖拽互动修改页面元素颜色特效。该特效在页面的左边有一个颜色工具栏，用户可以拖动上面的颜色到右边的页面区域或文字上，这些区域或文字的颜色就会被修改为用户拖动的颜色。
vue记录鼠标拖拽划过位置并将划过位置变色
最新发布
weixin_45966674的博客
05-21 1160
这里需要注意的是 必须加上onDragOver否则 只会记录第一个 开始拖动的那个 例如 你鼠标拖拽划过 2345 如果没有onDragOver 就只有2会进去。之所以 在item外面套个 ES6的模板字符串 是因为 我们存入backups的是标签属性keyId getAttribute 获取的标签属性的值都是字符串。//先清空backups 然后 将拖动的元素的keyId标签属性装进backups。大家 可以读一下上面的注释 我们还是比较用心的。鼠标拖拽经过 45。
鼠标拖拽div移动并且背景颜色随机改变（根据Vue自定义指令）
candy755的博客
09-10 2564
今天给大家利用vue自定义指令做一个简单拖拽效果，所谓自定义指令就是Vue除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。因为Vue自带的指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，所以就需要自定义指令，下图是自定义指令的语法。. 今天所要实现的效果，代码如下： &lt;!DOCTYPE html&gt; &l...
Javaweb鼠标事件案例分析—鼠标移入移出表格颜色变化
累计发表博客60余万字，CSDN 博客专家、Java 领域优质创作者、华为云享专家、阿里云专家博主。专注分享 Java 优质文章，毕设实战项目开发，全网粉丝10W+
09-04 5434
Hello，你好哇，我是灰小猿！一个超会写bug的程序员！ 最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化。 效果如下： 其中用到是onmouseover和onmouseou事件t，同时还有一个作用相似的事件叫做onmousemove，所以在这里先对这三种鼠标事件做一个简单的对比： 在时间上：如果两个事件同时存在，先是onmousemove事件触发后，才会触发onmo.
鼠标移动改变颜色
华棋皓
07-30 1135
function onloadEvent(func){ var one=window.onload if(typeof window.onload!='function'){ window.onload=func } else{ window.onload=function(){ one(); func(); } } } function showtable(){...
鼠标拖拽移动子窗体的JS实现
10-26
为了提高用户体验，这些模态窗体通常需要支持鼠标拖拽功能，让用户能够自由地移动窗体位置，从而不至于遮挡页面上的重要内容。本文将详细介绍如何使用JavaScript（特别是结合jQuery库）和CSS来实现鼠标拖拽移动子...
HTML5 Canvas实现的鼠标拖拽超炫粒子构造星系动画源码.zip
11-03
2. **事件监听**：为了实现鼠标拖拽功能，代码会使用JavaScript的事件监听器，例如`addEventListener('mousedown')`来检测鼠标按下，`mousemove`来跟踪鼠标移动，`mouseup`来识别鼠标释放。这些事件的处理函数将更新...
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
10-23
在本例中，渐变效果可能用于菜单项在鼠标悬停时颜色的平滑过渡。 4. **页面过渡效果**：页面过渡通常是指页面或者页面元素状态切换时的视觉变化，比如淡入淡出效果。这不仅增强了用户界面的动态感，还可以让用户的...
HTML5 canvas炫酷拖拽圆球效果
06-05
- `fillStyle`：设置填充颜色，可以是RGB、RGBA、十六进制颜色或渐变。 - `fill()`：填充当前路径。 - `strokeStyle`：设置描边颜色，同样支持多种颜色表示方式。 - `stroke()`：描边当前路径。 3. **事件监听...
before-after左右拖拽分隔条对比图片效果
11-24
对于“before-after”效果，可以采用半透明覆盖层或者颜色渐变的方式来强化对比，使用户更容易注意到差异。例如，可以为“before”部分添加一层半透明黑色遮罩，使得注意力更加集中在“after”部分的变化上。用户...
有意思的Js可拖动的渐变色角度选择器 Javascript模拟出的角度选择器，拖动这个简洁的滑块，会改变渐变色的角度，本代码有两个亮点：一个是滑块的拖动，别一个则是渐变色的实现，这两者的结合必然形成独特的代码
03-08
有意思的Js可拖动的渐变色角度选择器 Javascript模拟出的角度选择器，拖动这个简洁的滑块，会改变渐变色的角度，本代码有两个亮点：一个是滑块的拖动，别一个则是渐变色的实现，这两者的结合必然形成独特的代码
JS实现的颜色实时渐变效果完整实例
12-28
本文实例讲述了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>无标题页</title> </head> <body> <div id=div1 xss=removed>我的闪烁文字 abc123
JS实现超简单的鼠标拖动效果
11-29
本文实例讲述了JS实现超简单的鼠标拖动效果。分享给大家供大家参考，具体如下： 这里使用尽可能短的JavaScript代码写一个JS拖动，函数本身287个字符。。。如果不是考虑兼容性和变量封装，还可以更短点。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下： <title>尽可能短的写一个JS拖动</title> <body> <div id="demo" style="width:100px; height:100px; position:absolute; background-color:s
html元素移动时颜色逐渐变深,css实现随鼠标移动div渐变色效果
weixin_42107491的博客
06-15 1049
HTML复制代码代码如下:CSS复制代码代码如下:body{background:#ecf0f1;}.art{width:400px;margin:0px auto;}.box{border-radius:30%;width:200px;height:200px;border:1px solid #2c3e50;padding:10px;opacity:0.97;}.lvl1{text-align...
html画横线向两边变浅
xxxandwww的博客
07-17 470
看了这个很棒，可以直接用 我用#CSDN#这个app发现了有技术含量的博客，小伙伴们求同去《画一条从中间向两边颜色逐渐变浅的线》, 一起来围观吧 https://blog.csdn.net/qq_41215296/article/details/115666119?utm_source=app&app_version=4.11.0&code=app_1562916241&uLinkId=usr1mkqgl919blen ...
通过在客户区拖动鼠标来移动窗口引发的一些问题
u010262413的专栏
01-31 1226
最近在研究罗云彬的win32汇编（个人觉得是本好书），GDI一章，BMP时钟，发现这样一个问题：摘录原文如下： void Cls_OnLButtonDown(HWND hwnd, BOOL fDoubleClick, int x, int y, UINT keyFlags)//左键按下消息响应函数 { //省略无关代码...... PostMessage(hwnd,WM_NCLBU
JS实例：拖拽滑动实现圆形进度条动画
它先清除画布，然后分别绘制出背景半圆（渐变颜色#99a），进度条部分（颜色#69f，由0到目标角度的弧线），以及进度条上的数字标签（使用Arial字体，大小80px）。 `draw`函数中，有两个关键的`arc`方法调用，第一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值