js图片选择效果

⑴ 怎样用JS实现通过点击图片就可以弹出下拉选择框

可以把select的style设为opacity：0，并且定位于图片上方

⑵ JS实现点击一个按钮更换图片

你的代码差在少了"选择元素"这一步。

img1.src = "..images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。

正确的方法是让图片元素的id是img1，然后

document.getElementById('img1').src = "..images/DT2.JPG"

这样进行赋值。

document.getElementById('img1')这一步的作用就是选择图片元素。

这是针对此问题的测试页面

代码如下

<div class="DT">

<div>

<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"

/>

</div>

</div>

<div style="text-align:center">

<input type="button" id="b1" value=" 放大 " onclick="fd();" />

<input type="button" id="b3" value="还原 " onclick="hy();" />

<input type="button" id="b2" value=" 缩小 " onclick="sx();" />

</div>

function fd() {

document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg"

}

function sx() {

document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg"

}

function hy() {

document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"

}

⑶ Js获取图片原始宽高的实现代码

如果我们页面看到的图片都是缩略图，那就需要做个图片点击放大效果，那么怎样获取图片的原始宽高呢？方法如下：
//获取图片原始宽度
function
getNaturalWidthAndHeight(img)
{
var
image
=
new
Image();
image.src
=
img.src;
return
[image.width,image.height];
}
//点击缩略图弹出层，显示原始图片。
//获取class为tz_main_box下的所有p标签下的图片img
$(".tz_main_box
p>img").each(function
(k,
v)
{
$(this).unbind("click");
//解除绑定，防止弹出多次图片层。
$(this).click(function
()
{
var
img
=
v;
//图片对象
var
imgArea
=
getNaturalWidthAndHeight(img);
var
layerWidth
=
imgArea[0]+
5;
if
(layerWidth
>
1080)
{
layerWidth
=
1080;
}
var
layerHeight
=
imgArea[1]
+
5;
if
(layerHeight
>
600)
{
layerHeight
=
600;
}
//layer弹出层插件
layer.open({
type:
1,
title:
false,
closeBtn:
0,
area:
[''+layerWidth+'px',
''
+
layerHeight
+
'px'],
skin:
'layui-layer-nobg',
//没有背景色
shadeClose:
true,
closeBtn:
1,
//显示关闭按钮
content:
"<center><img
src='"
+
$(this).attr("src")
+
"'></center>"
});
});
});
以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

⑷ 用JS或者Jquery，使用左右方向键切换(图片)按钮 ，效果就是按钮稍微向上浮起(或移动)

html如下：

<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>

CSS如下：
<style type="text/css">
#menu{overflow:hidden;}

#menu li{float:left;margin-right:10px;width:80px;height:30px;line-height:30px;text-align:center;}

#menu li.current{margin-top:-10px;}

</style>

JS如下：
<script type="text/javascript">
$(function(){

var len = $("#menu > li").length;
var index = 0;
$(document).keydown(function(e){

if(e.keyCode == 37){
if(index == 0){
index=len-1;
}else{
index--;
}
$("#menu > li").eq(index).addClass("current").siblings("li").removeClass("current");

}else if(e.keyCode == 39){

if(index == len-1){
index=0;
}else{
index++;
}
$("#menu > li").eq(index).addClass("current").siblings("li").removeClass("current");
}
});
});
</script>

⑸ 求JS图片载入LOADING效果代码

这是我以前写的，和你的要求差不多，自己修改就能用 代码： var l=0; var imgs; var sum=0; var imgs=new Array(); function chk(){ l--; document.getElementById("kk").innerText="dwcli's pain"+((sum-l)*100/sum)+"%" if (l==0){ document.getElementById("kk").innerHTML="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/cf5ebefa5d13e0cbb48f31c4.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/cf5ebefa5d13e0cbb48f31c4.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/b98cf4453d257732cffca38e.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/b98cf4453d257732cffca38e.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/d85b2027d8fb1017918f9ded.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/d85b2027d8fb1017918f9ded.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/c21adb228038cee7d7cae2f0.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/c21adb228038cee7d7cae2f0.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/e153f3514634440c367abeef.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/e153f3514634440c367abeef.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/8b7b8b954f6a6f5fd1135ee2.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/8b7b8b954f6a6f5fd1135ee2.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/fb490f08989283810a7b8296.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/fb490f08989283810a7b8296.jpg
>https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/4d78aa2424155c154c088d8e.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/4d78aa2424155c154c088d8e.jpg
>"; } } function dwcli(){ var dwcli=document.createElement("div"); dwcli.setAttribute("id","kk"); dwcli.innerHTML="dwcli's pain"; dwcli.style.backgroundColor="gray"; dwcli.style.width=screen.Width; dwcli.style.height=screen.Height; dwcli.style.position="absolute"; dwcli.style.top="0px"; dwcli.style.zIndex="100000000"; dwcli.style.left="0px"; dwcli.style.fontSize="50"; dwcli.style.color="green"; dwcli.style.textAlign="center"; dwcli.style.paddingTop="0px"; document.body.appendChild(dwcli); } if(document.images){ imgs[0]=new Image(); imgs[1]=new Image(); imgs[2]=new Image(); imgs[3]=new Image(); imgs[4]=new Image(); imgs[5]=new Image(); imgs[6]=new Image(); imgs[7]=new Image(); imgs[0].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/cf5ebefa5d13e0cbb48f31c4.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/cf5ebefa5d13e0cbb48f31c4.jpg
"; imgs[1].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/b98cf4453d257732cffca38e.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/b98cf4453d257732cffca38e.jpg
"; imgs[2].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/d85b2027d8fb1017918f9ded.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/d85b2027d8fb1017918f9ded.jpg
"; imgs[3].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/c21adb228038cee7d7cae2f0.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/c21adb228038cee7d7cae2f0.jpg
"; imgs[4].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/e153f3514634440c367abeef.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/e153f3514634440c367abeef.jpg
"; imgs[5].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/8b7b8b954f6a6f5fd1135ee2.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/8b7b8b954f6a6f5fd1135ee2.jpg
"; imgs[6].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/fb490f08989283810a7b8296.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/fb490f08989283810a7b8296.jpg
"; imgs[7].src="https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/4d78aa2424155c154c088d8e.jpg
" target="_blank" >https://gss0..com/7LsWdDW5_xN3otqbppnN2DJv/lxdqz/pic/item/4d78aa2424155c154c088d8e.jpg
"; } sum=l=imgs.length; for (var i=0;i imgs[i].onload=chk; imgs[i].onerror=chk; }