recherche

Maison  >  Article  >  interface Web  >  DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB-ITnose

DIV+CSS，如何使DIV跟随窗口大小改变位置，跟随住某个点击显示的图标_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 12:03:272092parcourir

手头有以下代码，是给某个播放器添加一个新的图标功能，设置了一个隐藏的DIV并加上CSS，点击显示，点其他地方隐藏。
 但是这个DIV，不随窗口大小变化跟随到图标旁边，一直固定到了1081px。一缩小窗口，点击后就看不见了，除非将窗口拉到1081px宽度才行，但是位置却不是在图标旁边，偏移了
我希望他能想“更多”图标的DIV一样，无论窗口大小怎么样，都能出现在“更多”图标的旁边。
 而且我发现“更多”图标的DIV的"element.style"内联样式的"left"也是跟着窗口变化的，而我的貌似是定死的。 


//调用函数把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:relative;，再绝对定位position:absolute;
这样在任何分辨率下位置都不会变了

先相对定位position:relative;，再绝对定位position:absolute;
这样在任何分辨率下位置都不会变了



实际上我自己通过特殊方法功课了~你说的那种我不会，所以用了其他定位方法。我看看还有没有人回复，没有的话就给你分吧

js先获取音乐图标的top很left位置，然后把这个获取的值加上图标本身的宽高，再赋值到弹出窗口的left跟top上边，这样不就图标在哪里，弹出在哪里的吗。

js先获取音乐图标的top很left位置，然后把这个获取的值加上图标本身的宽高，再赋值到弹出窗口的left跟top上边，这样不就图标在哪里，弹出在哪里的吗。



我自己就是用这种方法攻克的
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery中回调函数的问题,大虾帮忙解决一下~_html/css_WEB-ITnoseArticle suivant：玩转CSS3(一)CSS3实现页面布局_html/css_WEB-ITnose

Articles Liés

Voir plus