简单的JS 通过点击按钮实现DIV左右移动

最新推荐文章于 2022-06-07 11:51:18 发布
最新推荐文章于 2022-06-07 11:51:18 发布
阅读量5k 收藏 6
点赞数
文章标签： javascript java ViewUI
原文链接：http://www.cnblogs.com/bellow/p/4526497.html
版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <style type="text/css">
        #d2
        {
            width: 100px;
            color: yellow;
            height: 100px;
            border: 1px solid;
            position: absolute;left: 0px; top: 0px;
            background-color: #000000;
             text-align: center;
            font-size: 35px;
            font-weight: bolder;
        }
        #d1
        {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin-top: 100px;
            margin-left: 50px;
        }
    </style>
    <script type="text/javascript">
        flag=true;
        x=0
        function fun1()
        {
            var input = document.getElementsByTagName("input")[0];
            var div1=document.getElementsByTagName("div")[0];

            if(x>=innerWidth-div1.offsetWidth)
            {
                flag=false;
            }
            else if(x<=0)
            {
                flag=true;
            }
            if(flag)
            {
                x=x+80
            }
            else
            {
                x=x-80
            }
        div1.style.left=x+"px"
        }
    </script>
</head>
<body>
    <div id="d2">动次打次</div>
    <div id="d1">
    <input type="button" value="动起来！" οnclick="fun1()"/>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/bellow/p/4526497.html

weixin_33825683
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML页面-div层滚动列表-写法
汪翰翔的Blog
05-26 5144
效果如下：    层代码                                                                                                             标题                                                                             
JS实现点击按钮移动选取元素
weixin_42442123的博客
11-05 2140
方法一 appendChild()子元素事件不会丢失，removeChild()清除子元素不会造成内存泄漏 方法二 innerHTML，如果子元素有事件，移动后，元素事件会丢失 all.innerHTML = “”; 清空子元素时，如果子元素有事件，会发生内存泄漏 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
html用按钮控制div移动,简单的JS 通过点击按钮实现DIV左右移动
weixin_42570484的博客
06-27 1863
#d2{width: 100px;color: yellow;height: 100px;border: 1px solid;position: absolute;left: 0px; top: 0px;background-color: #000000;text-align: center;font-size: 35px;font-weight: bolder;}#d1{width: 100px...
基于jQ + html + css的可点击滑动按钮列表
weixin_44481459的博客
10-21 339
** 基于jQ + html + css的可点击滑动按钮列表** 做出来基本样式如上图所示，需求功能为按钮列表，需要手动点击左右滑动 基本思路类似于轮播图，不同点时每个按钮宽度不同，滑倒最后一页点击也不会回弹，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
Html中点击按钮图片动态移动
Net_CreateGuo的博客
12-26 2616
Body页面 <button type="button" id="btn1">按钮</button> <button type="button" id="btn2">向左移动</button> <div style="width: 100px; height: 100px; background-color: orange; position: absolute; left: 0px;"id="box1"></div> 方法
js 实现点击按钮页面滚动到顶部其他位置
黄大仙
08-11 1452
animate() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 5000px; } .slider-bar { position: a.
js实现点击往左移动
Revival_Liang的博客
06-22 7265
Document *{margin: 0px;padding: 0px;} ul{width: 10000px;height: 50px;left: 0px; position: relative; list-style: none;transition: width 0.5s;-moz-transition: left 0.5s;-webkit-transition: left 0.
javascript实现点击按钮让DIV层弹性移动的方法
10-24
主要介绍了javascript实现点击按钮让DIV层弹性移动的方法,实例分析了javascript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js 实现div里面的内容滚动，并可以通过按钮控制
03-24
【标题】：“JS实现div内滚动内容及按钮控制” 在网页设计中，有时我们需要在一个固定的div区域展示大量的文本或图片，而这个div的大小又是有限的。这时，我们可以利用JavaScript来实现div内的滚动效果，并通过按钮...
基于jquery实现点击左右按钮图片横向滚动
12-10
在本文中，我们将深入探讨如何使用jQuery实现一个功能，即点击左右按钮使图片横向滚动，一次滚动四个，当滚动完成后自动返回第一个版面。这个效果适用于网页中的轮播图或图片展示区，能够提供良好的用户体验。 首先...
html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
weixin_41695715的博客
02-16 8158
对于网页编程开发人员来说，在网站页面开发的过程中，有时候我们需要实现当点击一个按钮或者超链接时，立刻滚动跳转定位到本页面中指定的位置。对于大多数的编程老手来说，这些都不是什么难事，但对于一些新手或者没有深入学习编程开发的人来说，可能不知道如何去实现，在这里就和大家分享一下html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码。 这里主要分为两种情况，分别是点击锚点实现跳转和点击button按钮实现跳转页面，下面就分别探讨一下两种方式的具体实现代码。 一：通过html锚点实现滚动定位到页面指定位
不同列表跳转同HTML不同div,Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。...
weixin_29207439的博客
06-07 491
1.代码body,div,ul{ padding:0; margin:0;}#container{width:800px; margin:50px;}.tab{ padding:0; margin:0; }.tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px...
HTML 两个div滚动条同时滚动
蔡燃的博客
02-22 2527
实现思路： 1.通过jquery 监听div滚动事件来设置其他div同时滚动 2.为不是多个同时滚动div的滚动监听事件互相重复影响，通过当鼠标移动到哪个div上时使用哪个div进行滚动监听，其他div不进行滚动监听。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 两个div滚动条同时滚动...
html自动滚动位置,javascript – 根据鼠标位置自动滚动div
weixin_35214885的博客
05-30 120
一种略微不同的方式来实现您的需求：jQuery(function($) {$(window).load(function() {var $gal = $("#propertyThumbnails"),galW = $gal.outerWidth(true),galSW = $gal[0].scrollWidth,wDiff = (galSW / galW) - 1, // widths diffe...
html+css3+jquery 点击按钮切换内容
热门推荐
还是用“Hello World！”吧
08-14 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点击按钮切换内容&lt;/title&gt; &lt;style type="text/css"&gt;
JS中按钮控制div左右移动、移动到固定位置以及暂停移动（2）（优化部分，将移动的方法封装成了divMove函数，方便调用）
Fantasc的博客
08-16 1144
优化部分：将按钮控制div移动的方法封装到函数里面，更加方便调用。 优化后的代码如下（结合注释，理解思路）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
js实现鼠标可实现左滚动右滚动效果
qq_64353584的博客
02-19 2841
需要掌握以下要点知识的基础人员： 掌握html基本元素基础知识 掌握css布局基础知识 js运动基础知识 本实例很简单，重在考研大家的功底 样式css *{ padding: 0; margin: 0; } li{ list-style: none; } img{ border:0; } /* 控制 */ .control{ border-bottom: 1px solid #ccc; background-color: #eee; text-align: center;
js点击按钮向左侧滑动效果
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
06-07 996
$(".btn").click(function() { $(".btn_show").show(); $(".btn_show_bg").show(); $(".btn_show_main").addClass('div_right0'); $(".btn_show_main").removeClass('div_right') }); $(".btn_show_main_close").click(function() { $(".btn_show_
（转）点击按钮向左侧滑动效果（Drawer 抽屉）
CaseyWei
04-01 1592
平时都是使用ui组件库里的轮子实现动效，古老项目需要原生实现一下，记录一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向左侧滑动效果</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> &..
点击按钮实现div移动动画
最新发布
02-22
要实现点击按钮实现div移动动画，可以使用JavaScript和CSS来实现。下面是一种实现方式： 1. 首先，在HTML中创建一个按钮和一个需要移动的div元素，并给它们分别设置id属性，例如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值