Question

我得到了float: right;的图片列表。当盘旋时，尺寸增加并在没有时变回原始尺寸。如何在不移动其他图像的情况下执行此操作？因为发生的事情是，当图像悬停时，其他图像会传送到新线。它可以顺利地完成，就像它上下一样。但它只会在它进入新线时发生。

我的CSS

body:not(#forFrame) {
    background-image: url("../images/2017-new-year-wallpaper.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    margin: 0;
    font-family: sans-serif;
}

#menu-container {
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
}

#menu {
    color: white;
    position: fixed;
    transition: 1s;
    background: rgba(0,0,0,0.1);
    right: 0;
    left: 0;
}

#menu:hover {
    transition: 1s;
    background: rgba(0,0,0,0.5);
}

ul:not(#elements) {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li:not(#elements) {
    transition: 1s;
    float: left;
    padding: 1%;
}

li:hover:not(#element) {
    transition: 1s;
    background: rgba(179,0,0,1);
}

#content {
    padding-top: 5%;
    padding-right: 2%;
    padding-left: 2%;
}

#elements {
    list-style-type: none;
}

#search-site {
    background-color: grey;
    border-style: none;
    box-shadow: #cccccc 0px 0px 10px 3px;
    color: white;
    border-radius: 5px;
    padding: 3px;
}

::placeholder {
    color: #cccccc;
}

#search {
    padding: 1%;
    position: relative;
    right: 0;
    left: 0;
    float: right;
}

p {
    display: none;
}

/* lightbox */
#lightbox-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    display: none;
}

#lightbox {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
}
/* ------- */

iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    box-shadow: black 0 0 50px 2px;
}

#submit-button {
    background-color: #999999;
    border: none;
    transition: 0.5s;
    color: white;
    padding: 2%;
}

#submit-button:hover {
    background-color: #666666;
    transition: 0.5s;
}

img {
    height: 100px;
    transition: 10s;
}

img:hover {
    height: 110px;
    transition: 0.5s;
    z-index: 1;
    position: relative;
	-webkit-filter: drop-shadow(5px 5px 5px #222);
	filter: drop-shadow(5px 5px 5px #222);
}

<!DOCTYPE html>
<html>
    <head>
        <title>My Homepage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="images/2017-new-year-icon.png"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery-latest.min.js" type="text/javascript"></script>
		<script>
			function startTime() {
				var today = new Date();
				var hours = today.getHours() % 12 || 12;
				var minutes = today.getMinutes();
				var seconds = today.getSeconds();
				var ampm = hours >= 12 ? 'PM' : 'AM';
				hours = hours % 12;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
				var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
				document.getElementById('time').innerHTML = month[today.getMonth()] + ' ' + today.getDay() + ', ' + today.getFullYear() + ' ' + days[today.getDay()] + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + ampm;
				var t = setTimeout(startTime, 500);
			}
		</script>
    </head>
    <body style="overflow-x: hidden;" onload="startTime()">
        <div id="menu-container">
            <div id="menu">
                <ul>
                    <li onclick="lb()">Add Link</li>
					<li id="time"></li>
                </ul>
                <div id="search">
                    <input type="text" id="search-site" placeholder="Search..." autocomplete="off" size="30">
                    <script type="text/javascript">
                        function contains(text_one, text_two) {
                            if (text_one.indexOf(text_two) != -1) {
                                return true;
                            }
                        }

                        $("#search-site").keyup(function() {
                            var searchSite = $("#search-site").val().toLowerCase();
                            $("li#element").each(function() {
                                if (!contains($(this).text().toLowerCase(),searchSite)) {
                                    $(this).hide();
                                } else {
                                    $(this).show();
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        
        <div id="content">
            <ul id="elements">
                <script type="text/javascript">
                    jQuery.get('test.txt', function(data) {
                        var link = data.split("\n");
                        link.forEach(function picNLink(item, index) {
                            var staLink = item.split(" ");
                            document.getElementById('elements').innerHTML += '<li id="element"><p id="tag">' + staLink[2]
																			+ '</p><a href="' + staLink[1] + '"><img src="'
																			+ staLink[0] + '" onerror="this.src=\'images/imageError.jpg\'"></a></div></li>';
                        });
                    });
                </script>
            </ul>
        </div>
        <script type="text/javascript">
            function lbc() {
                document.getElementById('lightbox-container').style.display = 'none';
            }
            
            function lb() {
                document.getElementById('lightbox-container').style.display = 'block';
            }
        </script>
        <div id="lightbox-container" onclick="lbc()">
            <div id="lightbox">
                <iframe src="http://localhost/Homepage/public_html/addLink.php" scrolling="no" frameBorder="0">
                    Your browser does not support iframe.
                </iframe>
            </div>
        </div>
    </body>
</html>

Answer 1

尝试一下。我无法对其进行正确的测试，但是我相信这可能有效...


<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Your Version Of JQuery -->
        <title>My Homepage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="images/2017-new-year-icon.png"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            function startTime() {
                var today = new Date();
                var hours = today.getHours() % 12 || 12;
                var minutes = today.getMinutes();
                var seconds = today.getSeconds();
                var ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours < 10 ? '0' + hours : hours;
                minutes = minutes < 10 ? '0' + minutes : minutes;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
                var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                document.getElementById('time').innerHTML = month[today.getMonth()] + ' ' + today.getDay() + ', ' + today.getFullYear() + ' ' + days[today.getDay()] + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + ampm;
                setTimeout(startTime, 500);
            }
        </script>
    </head>
    <style>
        body:not(#forFrame) {
            background-image: url("../images/2017-new-year-wallpaper.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            margin: 0;
            font-family: sans-serif;
        }

        #menu-container {
            cursor: default;
            position: absolute;
            right: 0;
            left: 0;
        }

        #menu {
            color: white;
            position: fixed;
            transition: 1s;
            background: rgba(0,0,0,0.1);
            right: 0;
            left: 0;
        }

        #menu:hover {
            transition: 1s;
            background: rgba(0,0,0,0.5);
        }

        ul:not(#elements) {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li:not(#elements) {
            transition: 1s;
            float: left;
            padding: 1%;
        }

        li:hover:not(#element) {
            transition: 1s;
            background: rgba(179,0,0,1);
        }

        #content {
            padding-top: 5%;
            padding-right: 2%;
            padding-left: 2%;
        }

        #elements {
            list-style-type: none;
        }

        #search-site {
            background-color: grey;
            border-style: none;
            box-shadow: #cccccc 0px 0px 10px 3px;
            color: white;
            border-radius: 5px;
            padding: 3px;
        }

        ::placeholder {
            color: #cccccc;
        }

        #search {
            padding: 1%;
            position: relative;
            right: 0;
            left: 0;
            float: right;
        }

        p {
            display: none;
        }

        /* lightbox */
        #lightbox-container {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            display: none;
        }

        #lightbox {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin: -100px 0 0 -150px;
        }
        /* ------- */

        iframe {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            box-shadow: black 0 0 50px 2px;
        }

        #submit-button {
            background-color: #999999;
            border: none;
            transition: 0.5s;
            color: white;
            padding: 2%;
        }

        #submit-button:hover {
            background-color: #666666;
            transition: 0.5s;
        }

        img {
            height: 100px;
            transition: 10s;
        }

        img:hover {
            height: 110px;
            transition: 0.5s;
            z-index: 1;
            position: relative;
            -webkit-filter: drop-shadow(5px 5px 5px #222);
            filter: drop-shadow(5px 5px 5px #222);
        }
    </style>

    <body style="overflow-x: hidden;" onload="startTime()">
        <div id="menu-container">
            <div id="menu">
                <ul>
                    <li onclick="lb()">Add Link</li>
                    <li id="time"></li>
                </ul>
                <div id="search">
                    <input type="text" id="search-site" placeholder="Search..." autocomplete="off" size="30">
                    <script type="text/javascript">
                        function contains(text_one, text_two) {
                            if (text_one.indexOf(text_two) > -1) {
                                return true;
                            }
                        }

                        $("#search-site").keyup(function() {
                            var searchSite = $("#search-site").val().toLowerCase();
                            $("li#element").each(function() {
                                if (!contains($(this).text().toLowerCase(),searchSite)) {
                                    $(this).hide();
                                } else {
                                    $(this).show();
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        
        <div id="content">
            <ul id="elements">
                <script type="text/javascript">
                    jQuery.get('Test.txt', function(data) {
                        var link = data.split("\n");
                        link.forEach(function picNLink(item, index) {
                            var staLink = item.split(" ");
                            document.getElementById('elements').innerHTML += '<li id="element"><p id="tag">' + staLink[2]
                                                                            + '</p><a href="' + staLink[1] + '"><img src="'
                                                                            + staLink[0] + '" onerror="this.src=\'images/imageError.jpg\'"></a></div></li>';
                        });
                    });
                </script>
            </ul>
        </div>
        <script type="text/javascript">
            function lbc() {
                document.getElementById('lightbox-container').style.display = 'none';
            }
            
            function lb() {
                document.getElementById('lightbox-container').style.display = 'block';
            }
        </script>
        <div id="lightbox-container" onclick="lbc()">
            <div id="lightbox">
                <iframe src="http://localhost/Homepage/public_html/addLink.php" scrolling="no" frameBorder="0">
                    Your browser does not support iframe.
                </iframe>
            </div>
        </div>
    </body>
</html>

过渡时的图像传送

1 个答案: