JavaScript如何实现鼠标左键拖拽效果_WEB前端开发_随笔

HTML怎么实现下拉菜单_WEB前端开发
HTML实现下拉菜单的方法：1、新建HTML文件为“select.html”；2、使用VSCode编辑器将其打开；3、在HTML的body标签里写入select标签；4、向select标签里添加选项标签option；5、使用浏览器打开即可。

实现鼠标左键拖拽效果的两种方式：

方式一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .move {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position:absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <script>
        //制作一个鼠标左键拖拽效果
        var div = document.getElementsByClassName("move")[0];
        var style = window.getComputedStyle(div);
        var divLeft = parseFloat(style.left);
        var divTop = parseFloat(style.top);
        div.onmousedown = function(e){
            if(e.button !== 0){
                return ;//不是鼠标左键，return
            }
            window.onmousemove = function(e){
                divLeft += e.movementX;//距上次鼠标位置的X长度
                divTop += e.movementY;//距上次鼠标位置的Y长度
                div.style.left = divLeft + "px";
                div.style.top = divTop + "px";
            }
            window.onmouseup = window.onmouseleave = function(){
                if(e.button === 0){//鼠标左键
                    window.onmousemove = null;
                }
            }
        }
    </script>
</body>
</html>

网页文件的头部标记有哪些_WEB前端开发
网页文件的头部标记有：1、，它是网页文件的标题，显示在浏览器的标题栏，用来说明文件的用途；2、<meta>，它用来定义页面信息的名称、关键字、作者等。<br/><p><br/><p></p></blockquote> <p>相关视频教程推荐：《<strong>javascript高级教程</strong>》</p> <p>方式二：</p> <pre><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .move { width: 100px; height: 100px; background: red; border-radius: 50%; position:absolute; left:0; top:0; } </style> </head> <body> <div> </div> <script> //制作一个鼠标左键拖拽效果 var div = document.getElementsByClassName("move")[0]; var style = window.getComputedStyle(div); div.onmousedown = function(e){ if(e.button !== 0){ return ;//不是鼠标左键，return } var divLeft = parseFloat(style.left); var divTop = parseFloat(style.top); var divPageX = e.pageX; var divPageY = e.pageY; window.onmousemove = function(e){ var disX = e.pageX - divPageX; var disY = e.pageY - divPageY; div.style.left = divLeft + disX + "px"; div.style.top = divTop + disY + "px"; } window.onmouseup = window.onmouseleave = function(){ if(e.button === 0){//鼠标左键 window.onmousemove = null; } } } </script> </body> </html></pre> <p>相关推荐下载：《<strong>文字特效</strong>》</p> <p>以上就是JavaScript如何实现鼠标左键拖拽效果的详细内容，更多请关注ki4网其它相关文章！</p><blockquote style="font-size:15px;background-color: #F5F5F5;border:none;padding: 5px;margin:15px;line-height: 1.6;text-indent: 2em;"><p style="margin-bottom:5px;">vue实现路由跳转的三种方式_WEB前端开发</p><p>vue实现路由跳转的三种方式：1、【<router-link to='跳转的页面路径'>】；2、【this.$router.push({ path:'/user'})】；3、【this.$router.replace(path:'/')】。<br/><p><br/><p></p></blockquote> <div class="entry-copyright"> <p>欢迎分享，转载请注明来源：<a href="http://www.outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址: <a href="http://www.outofmemory.cn/zaji/558524.html" title="JavaScript如何实现鼠标左键拖拽效果_WEB前端开发">http://www.outofmemory.cn/zaji/558524.html</a></p> </div> </div> <div class="entry-action"> <a id="thread-like" class="btn-zan" href="javascript:;" tid="558524"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-thumb-up-fill"></use> </svg> </i> 赞 <span class="entry-action-num">(0)</span> </a> <div class="btn-dashang"> <i class="wpcom-icon wi"> <svg aria-hidden="true"> <use xlink:href="#wi-cny-circle-fill"></use> </svg></i> 打赏 <span class="dashang-img dashang-img2"> <span> <img src="/view/img/theme/weipay.png" alt="微信扫一扫" /> 微信扫一扫 </span> <span> <img src="/view/img/theme/alipay.png" alt="支付宝扫一扫" /> 支付宝扫一扫 </span> </span> </div> </div> <div class="entry-bar"> <div class="entry-bar-inner clearfix"> <div class="author pull-left"> <a data-user="0" target="_blank" href="/user/0.html" class="avatar j-user-card"> <img alt="游客" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60" /> <span class="author-name">游客</span> <span class="user-group">游客组</span> </a> </div> <div class="info pull-right"> <div class="info-item meta"> <a class="meta-item j-heart" id="favorites" rel="nofollow" tid="558524" href="javascript:void(0);" title="自己的内容还要收藏吗？" aria-label="自己的内容还要收藏吗？"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg> </i> <span class="data">0</span> </a> <a class="meta-item" href="#comments"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg> </i> <span class="data">0</span> </a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share22" a href="javascript:;" data-event="poster-popover"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg> </i> 生成海报 </a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg> </i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg> </i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg> </i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg> </i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg> </i> </a> </div> </div> </div> </div> </div>  <div class="wrap"> <script src="https://v.2lian.com/static/s/tubiao.js" id="auto_union_douhao" union_auto_tid="1989"></script> </div> <div class="entry-page"> <div class="entry-page-prev j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/HTML%E6%80%8E%E4%B9%88%E5%AE%9E%E7%8E%B0%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95_WEB%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91.png"> <a href="/zaji/558522.html" title="HTML怎么实现下拉菜单_WEB前端开发" rel="prev"> <span>HTML怎么实现下拉菜单_WEB前端开发</span> </a> <div class="entry-page-info"> <span class="pull-left"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg> </i> 上一篇 </span> <span class="pull-right">2020-05-12</span> </div> </div> <div class="entry-page-next j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/%E5%A6%82%E4%BD%95%E5%9C%A8Ubuntu%E4%B8%8B%E5%8D%87%E7%BA%A7%E5%88%B0+PHP+7.4+%EF%BC%9F_%E5%90%8E%E7%AB%AF%E5%BC%80%E5%8F%91.png"> <a href="/zaji/558526.html" title="如何在Ubuntu下升级到 PHP 7.4 ？_后端开发" rel="next"> <span>如何在Ubuntu下升级到 PHP 7.4 ？_后端开发</span> </a> <div class="entry-page-info"> <span class="pull-right"> 下一篇 <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg> </i> </span> <span class="pull-left">2020-05-12</span> </div> </div> </div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> 发表评论 </h3> <div class="comment-form"> <div class="comment-must-login"> 请登录后评论... </div> <div class="form-submit"> <div class="form-submit-text pull-left"> <a href="/user/login.html">登录</a>后才能评论 </div> <button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">提交</button> </div> </div> </div> <h3 class="comments-title"> 评论列表（0条）</h3> <ul class="comments-list"> </ul> </div> </article> </main> <aside class="sidebar"> <div id="wpcom-profile-5" class="widget widget_profile"> <div class="profile-cover"> <img class="j-lazy" src="/view/img/theme/home-bg.jpg" alt="游客" /> </div> <div class="avatar-wrap"> <a target="_blank" href="/user/0.html" class="avatar-link"> <img alt="游客" src="/view/img/avatar.png" class="avatar avatar-120 photo" height="120" width="120" /> </a> </div> <div class="profile-info"> <a target="_blank" href="/user/0.html" class="profile-name"> <span class="author-name">游客</span> <span class="user-group">游客组</span> </a>  <div class="profile-stats"> <div class="profile-stats-inner"> <div class="user-stats-item"> <b>0</b> <span>文章</span> </div> <div class="user-stats-item"> <b>0</b> <span>评论</span> </div>  </div> </div> <button type="button" class="btn btn-primary btn-xs btn-message j-message2" data-toggle="modal" data-target="#mySnsQrocde"> <i class="wpcom-icon wi"> <svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg> </i>私信 </button> <div class="modal fade" id="mySnsQrocde"> <div class="modal-dialog"> <div class="modal-content">    <div class="modal-body" style="text-align: center"> <img src="/upload/sns_qrcode/0.png" style="width: 300px"> </div> </div> </div> </div> </div> </div> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>随机标签</span></h3> <div class="entry-tag">  <a href="/tag/605683.html" rel="tag">膳房</a> <a href="/tag/605672.html" rel="tag">大韩</a> <a href="/tag/605648.html" rel="tag">蛙类</a> <a href="/tag/605616.html" rel="tag">湘鄂西</a> <a href="/tag/605584.html" rel="tag">奇侠传</a> <a href="/tag/605557.html" rel="tag">successmsg</a> <a href="/tag/605545.html" rel="tag">scriptingdictionary</a> <a href="/tag/605534.html" rel="tag">底斯</a> <a href="/tag/605525.html" rel="tag">毕生</a> <a href="/tag/605489.html" rel="tag">胜于</a> <a href="/tag/605485.html" rel="tag">可多</a> <a href="/tag/605470.html" rel="tag">魔女传</a> <a href="/tag/605405.html" rel="tag">高压泵</a> <a href="/tag/605399.html" rel="tag">尽管如此</a> <a href="/tag/605368.html" rel="tag">粗制</a> <a href="/tag/605366.html" rel="tag">弗洛</a> <a href="/tag/605359.html" rel="tag">第九城市</a> <a href="/tag/605333.html" rel="tag">国际大酒店</a> <a href="/tag/605287.html" rel="tag">机q兵</a> <a href="/tag/605250.html" rel="tag">诗曰</a> </div> </div> </aside> </div> </div> <footer class=footer> <div class=container> <div class=clearfix> <div class="footer-col footer-col-logo"> <img src="/view/img/logo.png" alt="WELLCMS"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item"> <a href="http://www.outofmemory.cn/sitemap.html"> 网站地图 </a> </li> <li class="menu-item"> <a href="/read/0.html"> 联系我们 </a> </li> <li class="menu-item"> <a href="/read/0.html"> 行业动态 </a> </li> <li class="menu-item"> <a href="/read/0.html"> 专题列表 </a> </li>  </ul> <div class=copyright> <p> Copyright © 2022 内存溢出版权所有 <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer"> 湘ICP备2022025235号 </a> Powered by <a href="https://www.outofmemory.cn/" target="_blank"> outofmemory.cn </a> <script>var s1=s1||[];(function(){var OstRUpguE2=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("\x73\x63\x72\x69\x70\x74");OstRUpguE2['\x73\x72\x63']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x68\x6d\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x68\x6d\x2e\x6a\x73\x3f\x33\x33\x33\x31\x32\x35\x31\x37\x33\x34\x37\x65\x39\x30\x38\x34\x63\x30\x37\x34\x33\x30\x66\x66\x31\x61\x61\x65\x66\x38\x62\x33";var saV3=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x54\x61\x67\x4e\x61\x6d\x65']("\x73\x63\x72\x69\x70\x74")[0];saV3['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](OstRUpguE2,saV3)})();</script> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns">  <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-weixin sns-icon"></i> <span style=""></span> </a> <a href="http://weibo.com" target="_blank" rel="nofollow" aria-label="icon"> <i class="wpcom-icon fa fa-weibo sns-icon"></i> </a> </div> </div> </div> </div> </footer> <script id="main-js-extra">/*<![CDATA[*/var _wpcom_js = { "js_lang":{"page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd"} };/*]]>*/</script> <script src="/view/js/theme/55376.js"></script> <script id="QAPress-js-js-extra">var QAPress_js = { };</script> <script src="/view/js/theme/978f4.js"></script> <script src="/lang/zh-cn/lang.js?2.2.0"></script> <script src="/view/js/popper.min.js?2.2.0"></script> <script src="/view/js/xiuno.js?2.2.0"></script> <script src="/view/js/async.min.js?2.2.0"></script> <script src="/view/js/form.js?2.2.0"></script> <script src="/view/js/wellcms.js?2.2.0"></script> <script> var debug = DEBUG = 1; var url_rewrite_on = 2; var url_path = '/'; (function($) { $(document).ready(function() { setup_share(1); }) })(jQuery); $('#user-logout').click(function () { $.modal('<div style="text-align: center;padding: 1rem 1rem;">已退出</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); setTimeout(function () { window.location.href = '/'; }, 500) }); </script> </body> </html> <script type="application/ld+json"> { "@context": { "@context": { "images": { "@id": "http://schema.org/image", "@type": "@id", "@container": "@list" }, "title": "http://schema.org/headline", "description": "http://schema.org/description", "pubDate": "http://schema.org/DateTime" } }, "@id": "http://www.outofmemory.cn/zaji/558524.html", "title": "JavaScript如何实现鼠标左键拖拽效果_WEB前端开发", "images": ["http://www.outofmemory.cn/aiimages/JavaScript%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C_WEB%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91.png"], "description": "", "pubDate": "2020-05-12", "upDate": "2020-05-12" } </script> <script> // 回复 $('.reply-post').on('click', function () { var pid = $(this).attr('pid'); var username = '回复给 ' + $(this).attr('user'); $('#form').find('input[name="quotepid"]').val(pid); $('#reply-name').show().find('b').append(username); }); function removepid() { $('#form').find('input[name="quotepid"]').val(0); $('#reply-name').hide().find('b').empty(); } var forum_url = '/list/1.html'; var safe_token = 'kkrLHkXxyaJPZ6qHXFB0vzbasz3VbzLfVzdVzZ_2FPcxKKh3NigyQfzBN4I37S_2F6XvaykJ1AMmoTKzQyRyNQXdTA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { console.log('test'); var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); // 收藏 var uid = '0'; var body = $('body'); body.on('click', 'a#favorites', function () { if (uid && uid > 0) { var tid = $(this).attr('tid'); $.xpost('/home/favorites.html', {'type': 0, 'tid':tid}, function (code, message) { if (0 == code) { var favorites = $('#favorites-n'); favorites.html(xn.intval(favorites.html()) + 1); $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } }); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } return false; }); // 喜欢 var uid = '0'; var tid = '558524'; var body = $('body'); body.on('click', 'a#thread-like', function () { if (uid && uid > 0) { var tid = $(this).attr('tid'); $.xpost('/my/like.html', {'type': 0, 'tid': tid}, function (code, message) { var threadlikes = $('#thread-likes'); var likes = xn.intval(threadlikes.html()); if (0 == code) { $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } }); } else { $.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', { 'timeout': '1', 'size': 'modal-dialog modal-sm' }); $('#w-modal-dialog').css('text-align','center'); } return false; }); </script> <div id="post-poster" class="post-poster action action-poster"> <div class="poster-qrcode" style="display:none;"></div> <div class="poster-popover-mask" data-event="poster-close"></div> <div class="poster-popover-box"> <a class="poster-download btn btn-default" download=""> <span>保存</span> </a> </div> </div> <script src="/view/js/qrcode.min.js?2.2.0"></script> <script> $.require_css('../plugin/wqo_theme_basic/css/wqo_poster.css'); var url= window.location.href; window.poster_img={ uri : url, ver : '1.0', bgimgurl : '/plugin/wqo_theme_basic/img/bg.png', post_title : 'JavaScript如何实现鼠标左键拖拽效果_WEB前端开发', logo_pure : '/view/img/logo.png', att_img : '/aiimages/JavaScript%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E9%BC%A0%E6%A0%87%E5%B7%A6%E9%94%AE%E6%8B%96%E6%8B%BD%E6%95%88%E6%9E%9C_WEB%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91.png', excerpt : '', author : '游客', cat_name : '随笔', time_y_m : '2020年05月', time_d : '12', site_motto : '内存溢出' }; </script> <script src="/plugin/wqo_theme_basic/js/main.js?2.2.0"></script> <script src="/plugin/wqo_theme_basic/js/require.min.js?2.2.0"></script>