ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS、DIVをウィンドウサイズや位置変更に追従させ、click_html/css_WEB-ITnoseで表示されるアイコンに追従させる方法
DIV+CSS、DIVをウィンドウサイズや位置変更に追従させ、click_html/css_WEB-ITnoseで表示されるアイコンに追従させる方法
- WBOYオリジナル
- 2016-06-24 12:03:272105ブラウズ
手元に次のコードがあります。これは、特定のプレーヤーに新しいアイコン機能を追加し、非表示の DIV を設定して CSS を追加し、クリックして表示し、他の場所をクリックして非表示にします。
ただし、この DIV はウィンドウ サイズ変更の横にあるアイコンには従わず、1081px に固定されています。ウィンドウが縮小されると、ウィンドウが幅 1081 ピクセルに拡張されない限り、クリックしても表示されなくなりますが、位置はアイコンの隣ではなく、オフセットされます
「もっと見る」の DIV を作成できることを願っていますウィンドウのサイズに関係なく、同じアイコンが表示されます。いずれにしても、「その他」アイコンの隣に表示されます。
そして、「More」アイコンのDIVの「element.style」インラインスタイルの「左」もウィンドウによって変わることがわかりましたが、私の場合は修正されているようです。
//调用函数把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(); });});
ディスカッションへの返信 (解決策)
最初の相対位置: 相対;、次に絶対位置: 絶対;
この方法では、どの解像度でも位置は変わりません
相対的な最初の位置: 相対;、そして、position:Absolute;
この方法では、どの解像度でも位置は変わりません
実際、私は特別な方法で自分で下調べをしました〜あなたが何を言ったかわからないので、他の位置決め方法を使用します。他の人が回答したかどうかを確認します。そうでない場合は、ポイントを差し上げます
js は、まず音楽アイコンの上部と左の位置を取得し、この取得した値をアイコン自体の幅と高さに加算します。そして、それをポップアップウィンドウの左側に割り当てます。上部と同じように、アイコンがある場所とポップアップがある場所ではないでしょうか。
js は、まず音楽アイコンの上端と左端の位置を取得し、次に取得した値をアイコン自体の幅と高さに加算し、その値をポップアップ ウィンドウの左端と上端に割り当てます。アイコンの場所とポップアップの場所。
私はこの方法を使って自分で克服しました
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。