js拉动效果

最新推荐文章于 2023-07-26 17:33:34 发布
最新推荐文章于 2023-07-26 17:33:34 发布
阅读量691 收藏
点赞数
分类专栏： js特效功能 文章标签： javascript div class html function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cypakoo/article/details/7194072
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>拉动效果</title>
    <style type="text/css">
    .item{height:25px;line-height:25px;}
    </style>
   <script language="JavaScript">
   <!--
      function ColOrExpand(index)
    {
        if(typeof index=="number")
        {
            var o=document.getElementById("div"+index);
            if(o)
            {
                if(o.style.display=="none")
                {
                    //这部分的内容自己组织
                    o.innerHTML="<table width='500px' height='300px'><tr><td colspan='2'>标题</td></tr><tr><td>1</td><td>内容主题目1</td></tr><tr><td>2</td><td>内容主题目2</td></tr></table>";
                    
                    
                    for(var i=1;i<4;i++)
                    {
                        var div=document.getElementById("div"+i);
                        if(div)div.style.display="none";
                    }
                    
                    o.style.display="";
                }
            }
        }
    }
   //-->
   </script>
</head>
<body>
<div>
<div class="item"><a href="javascript:ColOrExpand(1)">创新能力</a></div>
<div id="div1" style="display:none"></div>
<div class="item"><a href="javascript:ColOrExpand(2)">团队管理</a></div>
<div id="div2" style="display:none"></div>
<div class="item"><a href="javascript:ColOrExpand(3)">业务知识</a></div>
<div id="div3" style="display:none"></div>
</div>
</body>
</html>


cypakoo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS之style.width(height)与offsetWidth(Height)的区别
沙漠皇帝本拉登
03-15 1732
JS中style.width(style.height)与offsetWidth(offsetHeight)的区别 1: 当样式写在行内的时候,比如&lt;div class="item" style="width:100px"&gt;&lt;/div&gt; 这时,在js中用style.width与offsetWidth都可以获取到该宽度值 比如代码 &lt;head&gt; ...
js拖动（点击+移动）
qq_42275455的博客
09-08 4848
双层函数：点击事件+鼠标移动事件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #bar{
js实现拖拽效果
qq_56995244的博客
07-26 692
代码 这个循环展示的数据样式可以自定义，按钮是获取最后的顺序。提交按钮方法，获取最终的dom顺序。
Axure RP9——【推动和拉动效果】的实现
两条线-twolines
11-09 6693
推动和拉动效果的实现； 理清逻辑，举一反三。
js 拉动动态改变窗口大小
wwf1225的博客
09-11 478
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
JS拉动效果
08-28
JS拉动效果
原生js鼠标拉动文字弹簧动画效果
09-08
原生js鼠标拉动文字弹簧动画效果
JS鼠标拉动文字弹簧动画效果特效代码
03-20
JS鼠标拉动文字弹簧动画效果是一款类似弹簧动画效果的文字特效下载。
JS鼠标拉动文字弹簧动画效果.zip
07-11
JS鼠标拉动文字弹簧动画效果
Css实现拖动效果
weixin_34122548的博客
05-12 1243
效果如下，可以拖动滑块，数字显示的是离左侧距离： 代码如下，需要jquery和jquery-ui库，请从官网上下载 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text...
html & js 实现拖动效果
博客
02-14 6424
前言 在日常开发中，前端中常会使用到拖动的效果，今天就来好好的讲解一下，使用javascript和html实现拖动的效果。 需求分析 要实现的效果很简单，如下图中，我们在蓝色区域内拖动可以使得整个灰色和蓝色的也一起拖动，而在灰色的界面内是无法实现拖动的。 javascript 样式很简单，就不多说。 其中的蓝色部分的id是top，而灰色部分的id是main。 window.o...
页面收缩展开的效果-JS
weixin_33938733的博客
12-28 351
2019独角兽企业重金招聘Python工程师标准>>> ...
html+css+js 简易展开收起效果
zhengxue_er
09-29 1万+
用html+css+js做一个简易的文本展开收起效果。如图： （部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子） 以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。1.html部分①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：<div id="showdiv"> <a i
html 拉动效果,HTML5 实现拖动效果 Drag Api
weixin_36444881的博客
06-05 352
拖放(Drag 和 drop)是 HTML5 标准的组成部分。事件概览dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。dragleave：事件主体是目标元素，在被拖放元素移出目标元...
JS 拖动效果
今天最成功
08-13 195
原理    A（Xs,Ys）、B（Xd,Yd） Xj = Xd - Xs Yj = Yd - Ys 变量点    （a,b）鼠标点 a - Xj = x b - Yj = y   1)html 文件    注意：position:fixed 是为了滚动固定 &lt;div style="z-index: 300;position:fixed;left: 400px;top...
用javascript 来实现动态下拉以及收起的动态效果
u010509143的专栏
11-12 2231
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; Employee employee=(Employee)session.getAttribute("em
js原生拖拽的两种方法
热门推荐
木木
08-30 8万+
一.mousedown、mousemove和mouseup  拖着目标元素在页面任意位置 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove：鼠标移动事件 3.onmouseup：鼠标抬起事件 重点： 1、一定要绝对定位，脱离文档流才可以移动。 2、绑定拖拽的元素，移动和鼠标松开后是对docu...
js事件实现拖拽效果
小傻子的博客
11-13 877
标题36-js事件实现拖拽效果 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;拖拽效果&amp;amp;lt;/title&amp;amp;gt; &amp;amp;lt;meta charset=&amp
threejs火焰效果
最新发布
11-28
threejs是一个用于创建3D图形的JavaScript库，可以用它来实现各种特效，包括火焰效果。要创建三维火焰效果，首先需要定义火焰的形状，并使用合适的材质和纹理来表现火焰的特性。 在threejs中，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值