jquery 横向显示 div

最新推荐文章于 2021-07-15 15:40:23 发布
最新推荐文章于 2021-07-15 15:40:23 发布
阅读量474 收藏
点赞数 1
文章标签： jquery textbox class div server float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taojd/article/details/7667159
版权


<!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 runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="all" style="background-color: #eeeeee; position: relative;">
                <div id="showbox" style="position: absolute; z-index: 100;">
                    <div id="left" style="width: 0px; background-color: #ffffff; display: none;">
                        <div style="width: 300px; margin-top: 15px; margin-left: 15px;">
                            <a class="button" id="btnAdd" runat="server" style="margin-left: 10px;"><span>新增</span></a>
                            <a class="button" id="btnCopy" runat="server" style="margin-left: 10px;"><span>复制材料</span></a>
                            <a class="button" id="btnSave" runat="server" style="margin-left: 10px;"><span>保存</span></a>
                            <a class="button" id="btnSearch" runat="server" style="margin-left: 10px;"><span>查询</span></a>
                        </div>
                        <div style="width: 300px; margin-top: 10px;">
                            <div style="float: left; padding-top: 7px; width: 75px; text-align: right;">
                                <span>材料名称</span>
                            </div>
                            <div style="float: left;">
                                <asp:TextBox ID="txtLoginName" MaxLength="20" Width="203px" runat="server" CssClass="newText"></asp:TextBox>
                            </div>
                        </div>
                        <div style="width: 300px; margin-top: 10px;">
                            <div style="float: left; padding-top: 7px; width: 75px; text-align: right;">
                                <span>编辑时间</span>
                            </div>
                            <div style="float: left;">
                                <asp:TextBox CssClass="Wdate" ID="TextBox2" runat="server" MaxLength="50" class="input"
                                    Width="90px" InputType="date" οnfοcus="new WdatePicker(this,null,false,'whyGreen')"></asp:TextBox>
                            </div>
                            <div style="float: left; padding-top: 7px; width: 15px; text-align: right;">
                                <span>至</span>
                            </div>
                            <div style="float: left;">
                                <asp:TextBox CssClass="Wdate" ID="TextBox1" runat="server" MaxLength="50" class="input"
                                    Width="90px" InputType="date" οnfοcus="new WdatePicker(this,null,false,'whyGreen')"></asp:TextBox>
                            </div>
                        </div>
                        <div style="width: 300px; margin-top: 10px;">
                            <div style="float: left; padding-top: 7px; width: 75px; text-align: right;">
                                <span>关联会议</span>
                            </div>
                            <div style="float: left;">
                                <asp:TextBox ID="TextBox3" MaxLength="20" Width="203px" runat="server" CssClass="newText"></asp:TextBox>
                            </div>
                        </div>
                        <div style="width: 390px; margin-top: 10px;">
                            <div class="pageContentData">
                                <asp:Repeater ID="rptData" runat="server">
                                    <HeaderTemplate>
                                        <table width="98%" class="mytable newTable">
                                            <thead>
                                                <tr>
                                                    <th class="td1" width="3%">
                                                        序号
                                                    </th>
                                                    <th class="td1" width="10%">
                                                        材料名称
                                                    </th>
                                                    <th class="td1" width="8%">
                                                        编辑时间
                                                    </th>
                                                    <th class="td1" width="10%">
                                                        关联会议
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr class="alterRows">
                                            <td class="td1" style="text-align: center;">
                                                <%# DataBinder.Eval(Container.DataItem, "xh")%>
                                            </td>
                                            <td class="td1" style="text-align: center;">
                                                <%# DataBinder.Eval(Container.DataItem, "xm")%>
                                            </td>
                                            <td class="td1" style="text-align: center;">
                                                <%# DataBinder.Eval(Container.DataItem, "dj")%>
                                            </td>
                                            <td class="td1" style="text-align: center;">
                                                <%# DataBinder.Eval(Container.DataItem, "bm")%>
                                            </td>
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </tbody> </table>
                                    </FooterTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div id="top" style="width: 100%; height: 30px; background-color: #eeff00;">
        <div style="width: 300px; height: 30px; background-color: #999999; margin: 0 auto;">
        </div>
    </div>
    <div style="width: 800px; height: 650px; background-color: #ffee99;">
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var xx, yy;
    jQuery(document).ready(function () {
        var timer = setInterval("CountDown()", 1000);
        //捕捉鼠标位置 
        jQuery(document).mousemove(function (e) {
            xx = e.originalEvent.x || e.originalEvent.layerX || 0;
            yy = e.originalEvent.y || e.originalEvent.layerY || 0;
        });

        jQuery("#left").css("height", jQuery(document).height() * 0.8);
        jQuery("#showbox").css("margin-top", jQuery(document).height() * 0.1);
    });

    function CountDown() {
        if (xx < 20 && yy > (jQuery(document).height() - jQuery("#left").height()) / 2 && yy < jQuery(document).height() / 2 + jQuery("#left").height() / 2) {
            if (jQuery("#left").css('width') == '0px') {
                jQuery("#left").show();
                jQuery("#left").animate({ width: 400 }, "slow");
            }
        }
        if (jQuery("#left").width() == 400 && (xx > jQuery("#left").width() || yy < (jQuery(document).height() - jQuery("#left").height()) / 2 || yy > jQuery(document).height() / 2 + jQuery("#left").height() / 2)) {
            jQuery("#left").animate({ width: 0 }, "slow", function () {
                jQuery("#left").hide();
            });
        }
    }
</script>

taojd
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery横向滚动_使用jQuery进行横向滚动
culiao9310的博客
09-28 3048
jquery横向滚动View demo 查看演示Download Source 下载源After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on...
jQuery实现div横向拖拽排序的简单实例
10-21
下面小编就为大家带来一篇jQuery实现div横向拖拽排序的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery 控制网页整屏横向、垂直滚动切换
05-16
内容索引:脚本资源,jQuery,滚动切换,jQuery滚动　　jQuery 控制网页整屏横向、垂直滚动切换，意思是，它与Tab大体上类似，但是TAB只控制某个Division标签，这一个控制的是整个网页，点击页面询问的序号，当前网页会滚动出去，然后第二屏滚动进来，形成连贯的滚屏效果，感觉非常大气，这也是jquery生成网页动画最强大的地方，示例运行图如上所示。
JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
李二狗的博客
10-25 1万+
先看一张效果图 思路： 1、头部用一个table并用一个div包裹着， 表格的具体内容用一个table 2、头部外面的div用positon: relative相对定位 3、获取整个表格的高度 4、获取表格的dom（或者包裹着表格的dom）距离页面顶部的距离 offsetTop 5、滚动的零界点的距离 表格的高度+表格距离页面顶部的距离 如果滚动
投票问卷结果漂亮的横向显示，jquery简单实现。
互联网的世界，我要看看！
08-17 5547
做了一个简单的投票问卷管理模块，最后需要实现投票结果横向的显示，而且要求是按题来统计并显示百分比，每个选项投票数。 网上找来找去都没有找到合适自己的，于是自己使用很笨的方法实现了一个。高手路过勿笑~呵呵 国际惯例，先上效果图： 实现原理：使用DIV嵌套DIV，父DIV作为容器，子DIV则为色带，只需设置子DIV宽度并着色即可。         上图中的横向统
jquery实现表格双向滚动（横向，纵向）表头内容对齐
leng0920的博客
07-25 1068
//表头分类 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.01 Transitional//EN"> <html> <head> <title>superTable.html</title> <meta http-equiv="Content-Type" conten...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...
jQuery横向二级滑动导航菜单
08-14
<!... ; charset=gb2312" /> 代码,菜单导航,JS广告...此代码内容为巧克力jQuery横向二级滑动导航菜单，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" /> 巧克力jQuery横向二级滑动导航菜单_懒人图库 ...
利用div+jquery自定义滚动条
07-18
可以自己定义滚动条，根据div内容自己调节产生横向和竖向滚动条。滚动条所有元素都可以自己定义样式，包括颜色或者图片。
多个div横向排列的几种方法
热门推荐
syq8023的博客
07-15 3万+
以下面这组 div 为例，group的高度由内容撑开 <div id="group"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </div> 显示结果如下为上下排列 常见的有三种方法可以让div横向排列，分别是flex 弹性盒模型、float 浮动和通过i...
jQuery 实现网页整屏横向、纵向滚动切换特效.rar
07-09
jQuery 控制网页整屏横向、垂直滚动切换，意思是，它与Tab大体上类似，但是TAB只控制某个Division标签，这一个控制的是整个网页，点击页面询问的序号，当前网页会滚动出去，然后第二屏滚动进来，形成连贯的滚屏效果，感觉非常大气，这也是jquery生成网页动画最强大的地方，示例运行图如上所示。
jquery横向滑动导航栏
10-14
精简的代码实现导航栏滑动效果，实现详解： 1.滑块位置：通过父节点position=fixed，子节点position=absolute方式，实现子节点浮动； 2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right=auto实现； 3.通过jQuery动态改变滑块的Left和Width，然后通过animate实现动画效果。
jquery漂亮的横向滑出导航
12-18
jquery HTML漂亮的横向滑出导航
jQuery实现div横向拖拽排序
kongjiea笔记
05-08 5806
div横向拖拽排序 body,div{ padding: 0px; margin: 0px; }
html中div之间横向排序,jQuery实现div横向拖拽排序的简单实例
weixin_33506920的博客
06-07 278
div横向拖拽排序body,div{padding: 0px;margin: 0px;}.box {margin-left: 15px;padding : 10px;padding-right: 0px;width : 810px;height : 150px;border : blue solid 1px;}.horizontal-div{float : left;margin-right: 1...
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
jQuery横向手风琴图片展示插件
05-17
你好，以下是一个简单的jQuery横向手风琴图片展示插件的示例代码： HTML代码： ``` <div class="accordion"> <div class="accordion-item"> <div class="accordion-item-title">Image 1</div> </div> <div ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值