zoukankan      html  css  js  c++  java
  • 滚动页面

    点击按钮后,页面滚动。之前想给Li的click事件添加效果,点击后页面向上滚动,总是没反应。后来发现是Li里面多了个<a href=’#’></a>导致的。不过scrollBy方法之前还真没用过,记录一下。谢谢博问上s似水流年 的指点 。

    <script type="text/javascript">
            $(document).ready(function () {
                $('#btnScroll').click(function () {
                    window.scrollBy(0, 200);
                });
            });     
        </script>

    image

    测试代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
    
    <!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>
        <link href="css/css.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="js/jquery-1.4.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnScroll').click(function () {
                    window.scrollBy(0, 200);
                });
            });
            
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input type="button" value="滚动" id="btnScroll" />
        <div id="test">
            <ul>
                <li>
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>1修改杀毒时间</span></li>
                <li>aa</li>
                <li>aa</li>
                <li>aa</li>
            </ul>
        </div>
        <div style="border: 0px; background: #a9dbfc;" id='divT01'>
            <ul>
                <li id='T0101'>
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>1修改杀毒时间</span>
                    <br />
                    <br />
                    <br />
                    <br />
                </li>
                <li id='T0102'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>2修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
                </li>
                <li id='T0103'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>3修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='T0104'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>4修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='T0105'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li1'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li2'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li3'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li4'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li5'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li6'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
                <li id='Li7'><a href="#">
                    <img src="images/gif-0831.gif" width="16" height="21" border="none" /><span>5修改杀毒时间</span>
                     <br />
                    <br />
                    <br />
                    <br />
               </li>
            </ul>
        </div>
        </form>
    </body>
    </html>
    
  • 相关阅读:
    rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
    flex布局(弹性布局)
    移动端技术选型
    移动端(视口(meta),像素比,二倍图(图片,背景图,精灵图),css初始化(normalize.css),特殊样式,常见屏幕尺寸)
    案例-3D旋转木马
    CSS新特性(3D转换,perspective(透视),transfrom-style(子元素是否开启三维环境))
    css3 新特性(动画)
    案例-2D会旋转的盒子(rotate), 会缩放的盒子(scale),动画(animation)
    listener启动与关闭
    Oracle在Linux内核参数的修改
  • 原文地址:https://www.cnblogs.com/janes/p/2251387.html
Copyright © 2011-2022 走看看