Web Front-end
HTML Tutorial
DIV CSS, how to make DIV change position according to the window size, and follow the icon displayed by a certain click_html/css_WEB-ITnose
DIV CSS, how to make DIV change position according to the window size, and follow the icon displayed by a certain click_html/css_WEB-ITnose
I have the following code at hand, which is to add a new icon function to a certain player, set up a hidden DIV and add CSS, click to display, and click elsewhere to hide.
But this DIV does not follow the icon next to the window size change, and is fixed to 1081px. Once the window is reduced, it will no longer be visible after clicking, unless the window is stretched to 1081px width, but the position is not next to the icon, it is offset
I hope he can think of the DIV of the "more" icon, regardless of Regardless of the window size, it will appear next to the "More" icon.
And I found that the "left" of the "element.style" inline style of the "More" icon's DIV also changes with the window, but mine seems to be fixed.
//调用函数把CSS样式添加到<head>段的 <style>元素中function addGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) { return; } style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style);}//定义CSS样式addGlobalStyle( '.player-info .track-info .track-controls #J_woPlay {' + ' top: 0px; right: -33px; position: absolute; cursor: pointer;' + '}' + '.icon-winopenPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-winopenPlay {' + ' background-position: 0px -277px; width: 18px; height: 18px;' + '}' + '.icon-winopenPlay:hover {' + ' background-position: -28px -277px;' + '}' + '.icon-OldPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-OldPlay {' + ' background-position: 0px -527px;' + '}' + '.icon-NewPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-NewPlay {' + ' background-position: 0px -545px;' + '}' + '.icon-ListeningPlay {' + ' background-image: url("http://bbsdata.gztwkadokawa.com/album/201405/28/225839pgklmuagcg25gcrr.png"); background-repeat: no-repeat;' + '}' + '.icon-ListeningPlay {' + ' background-position: 0px -581px;' + '}' + '.track-play-menu {' + ' padding: 10px; border-radius: 4px; left: 300px; width: 140px; height: 60px; bottom: 26px; position: fixed; z-index: 1999; background-color: rgb(51, 51, 51);' + '}' + '.track-play-menu ul li {' + ' height: 30px; line-height: 30px;' + '}' + '.track-play-menu ul li a {' + ' border-radius: 4px; color: rgb(170, 170, 170); line-height: 30px; padding-left: 38px; text-decoration: none; display: block; position: relative;' + '}' + '.track-play-menu ul li a:hover {' + ' background-color: rgb(68, 68, 68);' + '}' + '.track-play-menu ul li i {' + ' left: 8px; top: 6px; width: 18px; height: 18px; position: absolute;' + '}' + '.track-play-menu .arrow {' + ' left: -9px; width: 9px; height: 18px; bottom: 16px; position: absolute; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAASCAYAAACJgPRIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACLSURBVChThc4BDoIwDAVQONK6HUhRuQ4xRrksqP+PDsjWwU+arO3L0uYkrfd+0LeZVkSeQD/ti6yghgheCVioADnike8csHQff/hYgJXAaC1TNWeARdTj8c0X+4oHAT7QVGFEDOAdAxMqWYLBDVVAXW8JIXRYzIeIyaGOyzjnrrhzOkRMgtrWIyKXPykjhfjqVAPDAAAAAElFTkSuQmCC");' + '}' + '.ks-ie7 .track-play-menu .arrow {' + ' background-image: url("http://gtms03.alicdn.com/tps/i3/T1ZNuzFrtaXXbeUgbb-9-18.png");' + '}');//将按钮元素添加到"更多"后面$("#J_trackMore").after("<a id=J_woPlay class=icon-winopenPlay title=弹窗播放></a>");//隐藏div和显示div$(".icon-winopenPlay").click(function(e) { $(".track-play-menu").toggle();});$("*").click(function(event) { if (event.target.className != "icon-winopenPlay") { $(".track-play-menu").hide(); }});//设置div内容var str = window.location.href; var divplay = document.createElement("div"); divplay.id = "J_trackPlayMenu"; divplay.className = "track-play-menu"; divplay.style.height = "60px"; divplay.style.left = "1081px"; divplay.style.display ="none"; divplay.innerHTML = '<ul><li><a id=J_OldPlay onclick=OldPlay(); href=javascript:void(0)>' + '<i class=icon-OldPlay></i>' + '旧版弹窗播放' + '</a></li><li>' + '<a id=J_NewPlay onclick=NewPlay(); href=javascript:void(0)>' + '<i class=icon-NewPlay></i>' + '新版弹窗播放' + '</a></li>' + '</ul>' + '<span class="arrow"></span>' + '</div>'; document.body.insertBefore(divplay, document.body.firstChild);//设置弹窗函数$(document).ready(function(){ $("#J_OldPlay").click(function(){ var song=[]; song = str.split(""); song.splice(21,0,"s","o","n","g","/"); songurl = song.join(""); window.open(songurl,'','scrollbars=0,toolbar=0,status=0,location=0,resizable=0,menubar=0,width=754,height=557'); window.open('','_self',''); window.close(); });});$(document).ready(function(){ $("#J_NewPlay").click(function(){ window.open(str,'','scrollbars=0,toolbar=0,status=0,location=0,resizable=1,menubar=0,width=930,height=500'); window.open('','_self',''); window.close(); });});
Reply to discussion (solution)
First relative position: relative;, then absolute positioning position:absolute;
This way the position will not change at any resolution
First relative position position: relative;, then absolute position position: absolute;
This way the position will not change at any resolution The position will not change at all
In fact, I did my homework through special methods~ I don’t know what you said, so I used other positioning methods. I'll see if anyone else replies, if not I'll give you points
js first obtains the top and left positions of the music icon, then adds this obtained value to the width and height of the icon itself, and then assigns it to Above the left and top of the pop-up window, isn't it where the icon is and where the pop-up is?
js first obtains the top and left positions of the music icon, then adds the obtained value to the width and height of the icon itself, and then assigns the value to the left and top of the pop-up window, so that the icon is not in the Where, where did it pop up?
I used this method to overcome it myself
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to disable taskbar thumbnail preview in Win11? Turn off the taskbar icon display thumbnail technique by moving the mouse
Feb 29, 2024 pm 03:20 PM
This article will introduce how to turn off the thumbnail function displayed when the mouse moves the taskbar icon in Win11 system. This feature is turned on by default and displays a thumbnail of the application's current window when the user hovers the mouse pointer over an application icon on the taskbar. However, some users may find this feature less useful or disruptive to their experience and want to turn it off. Taskbar thumbnails can be fun, but they can also be distracting or annoying. Considering how often you hover over this area, you may have inadvertently closed important windows a few times. Another drawback is that it uses more system resources, so if you've been looking for a way to be more resource efficient, we'll show you how to disable it. but
Download the phone settings icon to the desktop 'Know in seconds: Steps to change icons for apps on Android phones'
Feb 06, 2024 pm 04:27 PM
In order to beautify their desktop, many users like to change their desktop themes regularly to keep them fresh. However, changing the theme will not change the icon of the third-party APP, and the personalized beautification is not thorough enough. If you're tired of the same app icons, replace them. Theoretically, if you want to change the icon for a mobile app, you usually need a ROOT system and some tools to unpack and replace the icon. But since the vast majority of mobile phones no longer support the ROOT system, we need to find other methods to achieve it. For example, some specific applications may offer the option to customize the icon, or personalize the icon through a third-party launcher. In addition, some mobile phone brands have also launched special theme and icon stores for users to choose and change icons. In major app stores,
What do the 5G UC and 5G UW icons on your T-mobile smartphone mean?
Feb 24, 2024 pm 06:10 PM
T-Mobile users have started noticing that the network icon on their phone screens sometimes reads 5GUC, while other carriers read 5GUW. This is not a typo, but represents a different type of 5G network. In fact, operators are constantly expanding their 5G network coverage. In this topic, we will take a look at the meaning of the 5GUC and 5GUW icons displayed on T-Mobile smartphones. The two logos represent different 5G technologies, each with its own unique characteristics and advantages. By understanding what these signs mean, users can better understand the type of 5G network they are connected to so they can choose the network service that best suits their needs. 5GUCVS5GUW icon in T
How to insert excel icons into PPT slides
Mar 26, 2024 pm 05:40 PM
1. Open the PPT and turn the page to the page where you need to insert the excel icon. Click the Insert tab. 2. Click [Object]. 3. The following dialog box will pop up. 4. Click [Create from file] and click [Browse]. 5. Select the excel table to be inserted. 6. Click OK and the following page will pop up. 7. Check [Show as icon]. 8. Click OK.
How to Undo Delete from Home Screen in iPhone
Apr 17, 2024 pm 07:37 PM
Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram
Location of Origami Bird at Stardome Railway Crocker Film and Television Park
Mar 27, 2024 pm 11:51 PM
There are a total of 20 origami birds in Croaker Film and Television Park on Star Dome Railway. Many players don’t know where the origami birds are in Crocker Film and Television Park. The editor has summarized the locations of each origami bird to help everyone. Search for it, and take a look at this latest summary of the locations of the origami birds in Croaker Film and Television Park for specific content. Guide to the Honkai Star Dome Railway: Origami Bird in Crook Movie Park Location 1, Crook Movie Park 1st Floor 2, and Crook Movie Park 2nd Floor Star Dome Railway
Understand the location and structure of pip installation package storage
Jan 18, 2024 am 08:23 AM
To learn more about the storage location of packages installed by pip, you need specific code examples. Pip is a commonly used package management tool in the Python language. It is used to easily install, upgrade and manage Python packages. When using pip to install a package, it will automatically download the corresponding package file from PyPI (Python Package Index) and install it to the specified location. So, where are the packages installed by pip stored? This is a problem that many Python developers will encounter. This article will delve into the location of the packages installed by pip and provide
What should I do if the Win10 input method icon is missing? How to retrieve the Win10 input method icon after it is lost?
Feb 29, 2024 am 11:52 AM
After the Win10 input method icon is lost, many users don’t know how to retrieve it. This article will introduce simple methods to help users retrieve the Win10 input method icon, allowing you to easily switch input methods and improve work efficiency. 1. Reasons for missing input method 1. Keyboard layout problem: If you accidentally switch the keyboard layout, such as switching from Chinese to English or other languages, the input method may temporarily disappear. 2. Input method setting problem: In the system settings, we can customize the display mode of the input method. Improper settings may result in the input method being unable to be displayed or hidden. 3. Input method errors or crashes: The input method software itself may have errors or crashes, causing the input method to fail to display properly. 2. How to call up the input method Method 1: 1. Press [Win+
