ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

【web】JavaScript

2021-05-15 10:52:53  阅读:147  来源: 互联网

标签:function web style JavaScript getElementById var div document


切换图片

有两个很重要的知识点:
(1)getElementById
(2)substring(0, Object.indexOf(“px”));获取数字
(3)切换页面:getElementById.style.float = "right"来修改页面浮动,进而改变图片出现位置。
(4) window.setInterval(Switch, 100);设置每XXms执行一次函数。

<html><head>
    <title>$Title$title>
    <script type="text/javascript">
        var x = 1;
        var y = 2;
        var maxpicNum = 3;
        var timeOut = 30;
        var temp = 30;

        function Switch() {
            var leftObj = document.getElementById("pic" + x);
            var rightObj = document.getElementById("pic" + y);

            var leftWidth = leftObj.style.width;
            var leftWidthNum = leftWidth.substring(0, leftWidth.indexOf("px"));

            var rightWidth = rightObj.style.width;
            var rightWidthNum = rightWidth.substring(0, rightWidth.indexOf("px"));

            if (leftWidthNum > 0) {
                leftObj.style.width = (Number(leftWidthNum) - 50) + "px";
                rightObj.style.width = (Number(rightWidthNum) + 50) + "px";
            } else {
                if (temp == 0) {
                    temp = timeOut;
                    x = x == maxpicNum ? 1 : x + 1;
                    y = y == maxpicNum ? 1 : y + 1;
                    if (y == 1) {
                        document.getElementById("pic1").style.float = "right";
                    } else {
                        document.getElementById("pic1").style.float = "left";
                    }
                } else {
                    temp--;
                }
            }
        }

        function autoSwich() {
            //setInterval设置暂停时间300ms
            window.setInterval(Switch, 100);
        }
    script>head><body><div style="width: 400px;float: left;height: 280px;background-color: gray;">
    <div id="pic1" style="width: 400px;height: 280px;float: left;">
        <img style="width: 100%;height: 100%" src="imgs/pic1.png" alt="第一张">
    div>
    <div id="pic2" style="width: 0px;height: 280px;float: left;">
        <img style="width: 100%;height: 100%" src="imgs/pic2.png" alt="第二张">div>
    <div id="pic3" style="width: 0px;height: 280px;float: left;">
        <img style="width: 100%;height: 100%" src="imgs/pic3.png" alt="第三张">div>div><input type="button" value="Switch" onclick="Switch()"/><input type="button" value="AutoSwitch" onclick="autoSwich()"/>body>html>

菜单悬停

【1】 position:absolute 页面可以重叠
【2】display: block显示 / none不显示
【3】onmousedown || onm ouseup 当鼠标抬起
【3】 onm ouseout || onm ouseovre || onm ousemove 当鼠标移动

<html><head>
    <title>Titletitle>
    <script>
        var timeOut;

        function showCart1() {
            var showCart1 = document.getElementById("showCart1");
            showCart1.style.display = "block";
        }

        function unShowCart1() {
            timeOut = window.setTimeout(function () {
                var unShowCart1 = document.getElementById("showCart1");
                unShowCart1.style.display = "none";
            }, 500);
        }

        function keepCart1() {
            window.clearTimeout(timeOut);
            showCart1()
        }

        function showCart2() {
            var showCart2 = document.getElementById("showCart2");
            showCart2.style.display = "block";
        }

        function unShowCart2() {
            timeOut = window.setTimeout(function () {
                var unShowCart2 = document.getElementById("showCart2");
                unShowCart2.style.display = "none";
            }, 1000);
        }

        function keepCart2() {
            window.clearTimeout(timeOut);
            showCart2()
        }

    script>head><body><div style="width:700px; height:420px; background:#888888;">
    <div style="float:left; width:120px; height:420px; background:#ffaaaa;">
        <ul style="width:120px; line-height:45px;">
            <li onmouseover="showCart1()"
                onmouseout="unShowCart1()"
                onmousedown="showCart1()">菜单1            li>
            <li onmouseover="showCart2()"
                onmouseout="unShowCart2()"
                onmousedown="showCart2()">菜单2            li>
            <li>菜单3li>
        ul>
    div>
    <div style="float:left; width:580px; height:420px; background:#ffffaa;">
        <div style="position:absolute; width:550px; height:400px; background:#aaffaa;">
            主页的轮播图区域        div>
        <div onmouseover="keepCart1()"
             onmouseout="unShowCart1()"
             id="showCart1"
             style="position:absolute; display:none; width:530px; height:390px; background:#aaaaff;">
            <ul style="list-style:none;">
                <li>二级菜单 | 男装 | 女装li>
                <li>二级菜单 | 男装 | 女装li>
                <li>二级菜单 | 男装 | 女装li>
            ul>
        div>
        <div onmouseover="keepCart2()"
             onmouseout="unShowCart2()"
             id="showCart2"
             style="position:absolute; display:none; width:430px; height:190px; background:#aaaaff;">
            <ul style="list-style:none;">
                <li><font size="9">二级菜单font>li>
            ul>
        div>
    div>div>body>html>

getParameter()是获取POST/GET传递的参数值;
getInitParameter获取Tomcat的server.xml中设置Context的初始化参数
getAttribute()是获取对象容器中的数据值;
getRequestDispatcher是请求转发。

标签:function,web,style,JavaScript,getElementById,var,div,document
来源: https://blog.51cto.com/u_15202146/2777238

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有