导航:首页 > 编程语言 > 图片定位js代码

图片定位js代码

 发布时间：2023-08-28 16:26:38

① js图片显示，怎么定位显示的图片

代码错误太多，我都没法给你改，可能是你发帖时的手误？

只说最扣题、最严重的一处专错误：
img.style.left = obj.offsetleft + obj.width;

在向属left（还包括top、right、bottom）写入时，必须提供字符串，并带有单位，而不是数字类型（将被忽略），所以改成
img.style.left = (obj.offsetLeft + obj.offsetWidth) + "px";

注意offsetleft应是“offsetLeft"，width不知你是想用哪个宽度（CSS盒模型共有四种宽度），我在这里用的是最常用的一种，即"offsetWidth"。

② js怎么改变图片位置

先把图片的父元素的css样式，postion设置为relative，然后图片的postion设置为absolute，然后用js来改变的图片的left 和 top数值就可以改变图片的位置了。如果不设置父元素，那就将图片的postion设置为relative，也可以改变位置，JS同样。

下面是个简单的例子，你参考下

<!DOCTYPEhtml>
<html>
<head>
	<metacharset="utf-8">
	<title>TEST</title>
	<styletype="text/css">
*{margin:0;padding:0;}
.wrap{position:relative;}
#pic{position:absolute;}
	</style>
</head>
<body>
<divclass="wrap">
<imgid="pic"src="222.jpg">
</div>
<scripttype="text/javascript">
varpic=document.getElementById("pic");
pic.style.left=50+"px";//这里可以更改图片左边距
pic.style.top=30+"px";//这里可以更改图片的上边距
</script>
</body>
</html>

③ 怎么用js在页面指定位置调用图片

可以用jQuery：

$(‘#img’).attr("src","test.jpg");
其中img是你指定位置的id，test.jpg是需要调用的图片路径。

④ 如何用JS/JQ实现，点击小图片显示大图片及详细信息的功能

这个一般是用css来显示特定内容的。
譬如有张图片icon.png，里面有很多内容，便可以在css中这么用。
.sa
{width:20px;
height:20px;
overflow:hidden;
background:url(icon.png)
no-repeat
-20px
-30px;}
注解：
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示，并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复，这个不是必须的，不过有会规范一些
-20px
-30px是图片的定位，显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定，也可以这样定义，让背景自适应：
.sa
{width:auto;
height:20px;
overflow:hidden;
background:url(icon.png)
no-repeat
right
bottom;}
对于图片2(首页标签)的内容，也是这么使用的：
.a
{width:100px;
height:25px;
overflow:hidden;
background:url(2.png)
no-repeat
left
center;}
.a:hover
{background-position:right
center;}
这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。
不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。

⑤ js控制图片位置

只有绝对定位（position:absolute）或者固定定位（position:fixed）的元素才能通过top和left等属性来改变其位置。所以你应该在css中把图片的定位属性设一下，当然用js设定也行。
另外，给p.style.top或者p.style.left赋值时，务必加上单位，比如 p.style.top="200px"，因为不这样做在有些浏览器中会出错的。

⑥ html最好用的图片定位代码作图用，定位到另外一张图片上面

<div style='position: relative;'>
<img src='图片1地址' />
<img style='position:absolute; top:10px;left:10px;' src='图片1地址' />
</div>
这样调整top和left的大小就可以设置下边图片在上边突破的哪个位置

⑦ js怎么修改背景图片定位的值

document.getElementById("id").style.backgroundPosition="0px"
document.getElementById("id").style.backgroundPositionX="100px"
document.getElementById("id").style.backgroundPositionY="0px"

⑧ JS或JQUERY获取某DIV区域内图片或带ID属性的IMG图片代码

第一种：
$(function(){
$(".imgabcdefg img").css("width","100px");

})
第二种：
<script>
$(function(){
$(".head_menu ul").find("li").each(function(){
回$(this).each(function(){
if($(this).attr("id")){
alert($(this).html());
//alert($(this).attr("id"));
}
});
});

})
</script>

<div class="head_menu">
<ul>
<li><a href="#">第一个答</a></li>
<li id="2"><a href="#">第二个</a></li>
<li><a href="#">第三个</a></li>
</ul>
</div>

阅读全文

与图片定位js代码相关的资料

热点内容
瑞斯康达网络管理界面 浏览：254
ca证书管理器linux 浏览：358
苹果id安全提示问题3个字符 浏览：949
iphone上好的拍照软件 浏览：579
word内嵌文件怎么下载 浏览：864
8s16升级 浏览：340
计算机网络技术基础pdf 浏览：544
javafrom提交地址参数 浏览：721
git发布版本 浏览：728
vc修改文件名 浏览：149
linux65从域 浏览：321
用什么东西压缩文件 浏览：406
怎么删除ipad隐藏的APP 浏览：981
编程如何占用大量内存 浏览：116
多个excel表格文件如何组合 浏览：918
ubuntu内核升级命令 浏览：679
pgp文件夹 浏览：894
一键还原的文件是什么格式 浏览：581
女汉子微信名霸气十足 浏览：65
win10手机蓝屏修复 浏览：419

友情链接