图片搜索定位_js图片定位

目录：

• 1、js怎么改变图片位置，就是给一个坐标，图片到坐标位置
• 2、js怎么修改背景图片定位的值？
• 3、js怎么改变图片位置
• 4、js控制图片位置
• 5、手机js页面实现一键定位，并且把获取的地理位置显示到文本框中，如下图，100分
• 6、一个div里面有多张图片，用js怎么实现使图片在div里面的位置随机摆放呢？

js怎么改变图片位置，就是给一个坐标，图片到坐标位置

需要设置图片position:absolute;这个CSS属性

然后就可以使用类似下面的方法

img假定为你要改的图片，可以使用

img=document.getElementById('图片id');得到，然后下面是位置

img.style.left="160px";

img.style.top="180px";

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

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

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

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

js怎么改变图片位置

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

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

!DOCTYPE html

html

head

meta charset="utf-8"

titleTEST/title

style type="text/css"

        *{margin: 0; padding: 0;}

        .wrap { position: relative; }

        #pic { position: absolute; }

/style

/head

body

div class="293c-f90f-047e-8c9d wrap"

    img id="pic" src="222.jpg"

/div

script type="text/javascript"

    var pic = document.getElementById("pic");

    pic.style.left=50+"px"; //这里可以更改图片左边距

    pic.style.top=30+"px";  //这里可以更改图片的上边距

/script

/body

/html

script type="text/javascript"

    var pic = document.getElementById("pic");

    pic.style.left=150+"px";

    pic.style.top=130+"px";

/script

js控制图片位置

只有绝对定位（position:absolute）或者固定定位（position:fixed）的元素才能通过top和left等属性来改变其位置。所以你应该在css中把图片的定位属性设一下，当然用js设定也行。

另外，给p.style.top或者p.style.left赋值时，务必加上单位，比如 p.style.top="200px"，因为不这样做在有些浏览器中会出错的。

手机js页面实现一键定位，并且把获取的地理位置显示到文本框中，如下图，100分

手机js页面实现一键定位，并且把获取的地理位置显示到文本框中代码如下：

var getLocation = function (successFunc, errorFunc) { //successFunc获取定位成功回调函数，errorFunc获取定位失败回调

//首先设置默认城市

var defCity = {

id: '000001',

name: '北京市',

date: curDateTime()//获取当前时间方法

};

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(defCity), { expires: 1, path: '/' });

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function (position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

//var map = new BMap.Map("container");   // 创建Map实例

var point = new BMap.Point(lon, lat); // 创建点坐标

var gc = new BMap.Geocoder();

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents;

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

};

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);

if (successFunc != undefined)

successFunc(addComp);

});

},

function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。");

break;

case 2:

alert("暂时获取不到位置信息。");

break;

case 3:

alert("获取位置信息超时。");

break;

default:

alert("未知错误。");

break;

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

};

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });

if (errorFunc != undefined)

errorFunc(error);

}, { timeout: 5000, enableHighAccuracy: true });

} else {

alert("你的浏览器不支持获取地理位置信息。");

if (errorFunc != undefined)

errorFunc("你的浏览器不支持获取地理位置信息。");

}

};

var showPosition = function (position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

//var map = new BMap.Map("container");   // 创建Map实例

var point = new BMap.Point(lon, lat); // 创建点坐标

var gc = new BMap.Geocoder();

gc.getLocation(point, function (rs) {

var addComp = rs.addressComponents;

var curCity = {

id: '',

name: addComp.province,

date: curDateTime()

};

//当前定位城市

$.cookie('VPIAO_MOBILE_CURRENTCITY', JSON.stringify(curCity), { expires: 7, path: '/' });

//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);

});

};

var showPositionError = function (error) {

switch (error.code) {

case 1:

alert("位置服务被拒绝。");

break;

case 2:

alert("暂时获取不到位置信息。");

break;

case 3:

alert("获取位置信息超时。");

break;

default:

alert("未知错误。");

break;

}

var curCity = {

id: '000001',

name: '北京市',

date: curDateTime()

};

//默认城市

$.cookie('VPIAO_MOBILE_DEFAULTCITY', JSON.stringify(curCity), { expires: 1, path: '/' });

};

一、PC端通过IP实现定位代码

script type="text/javascript" src=""/script

script type="text/javascript"

document.write(IPData[0]);    //显示IP地址

document.write(IPData[2]);    //显示省

document.write(IPData[3]);    //显示市

/script

二、获取客户端地址代码

script

var url = ';output=jsoncallback=?_=' + Math.random();

$.getJSON(url, function(data) {

alert(data.Ip);

});

/script

一个div里面有多张图片，用js怎么实现使图片在div里面的位置随机摆放呢？

var hehe = Math.floor(Math.random()*40)+60;60-100的随机数

然后每张图片的便宜量随机，然后第几张就用这个乘几，偏移的随机，这样应该可以做到你要的效果

标签：js图片定位