js如何点击图片_怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊

1. javascript代码如何实现点击图片跳转到另外一个连接上

javascript代码实现点击图片跳转到另外一个连接上的方法是给a标签加图片，并附上目标地址。
参考代码如下：
<html>
<缓搭head><title>增加图片链接，点击后跳转</title></head>
<body onload="addLinkForImage()">岩早
<img src="Koala.jpg" width="300" height="200" /粗哪雀>
<img src="Penguins.jpg" width="300" height="200" />
</body>
<script type="text/javascript">
function addLinkForImage(){
var img=document.getElementsByTagName("img");
for(var i=0;i<img.length;i++){
img[i].id="img"+i;
var img1=document.getElementById("img"+i);
var a=document.createElement("a");
//获取当前元素的父元素进行替换
img1.parentNode.replaceChild(a,img1);
a.href=img1.src;
a.appendChild(img1);
}
}
</script>
</html>

2. 如何用js实现点击图片切换另一图片，再次点击恢复

方法如下

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

</head>

<body>

window.onload=function(){

varImgbtn=document.getElementById('btn');

varImg=document.getElementById('img');

Imgbtn.onclick=function(){

if(Img.src=='http://dl.bi.sogou.com/images/2012/01/19/191337.png'){

Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';

}else{

Img.src='http://dl.bi.sogou.com/images/2012/01/19/191337.png'

}

</script>

<divid="bg">

<divid="btn">

<divid="txt">试客小兵</div>

<imgid="img"src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">

</div>

</body>

</html>

Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。

与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。

3. 如何用JS语句显示图片

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

4. js怎么做点击一个图片弹出一个层的效果

其实弹出层的思路还是比较简单的：

一般是这个层是隐藏的(display:none)，然后点击你说的"图片(或者任何的页面元素)"，这个层就会显示（一般display:inline-block/block），同时设置一个灰色的背景看起来这个层是浮于下面的层之上的。

下面是一段演示代码：


<!doctypehtml>
<html>
<head>
<metacharset="utf-8"><title>弹出层—到浏览器中央—背景变暗</title>
<style>
*{margin:0;padding:0px;}
body{padding:30px;}
#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1pxsolid#4c77aa;background:#f2f7fd;z-index:11;zoom:1;}
#showh3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}
#showspan{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}
#showp{padding:5px;}
#text{font-size:12px;text-indent:2em;line-height:20px;}
#bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10}
</style>
<scripttype="text/javascript">
functionshow(){
variWidth=document.documentElement.clientWidth;
variHeight=document.documentElement.clientHeight;
varbgObj=document.createElement("div");
bgObj.setAttribute("id","bgbox");
bgObj.style.width=iWidth+"px";
bgObj.style.height=Math.max(document.body.clientHeight,iHeight)+"px";
document.body.appendChild(bgObj);
varoShow=document.getElementById('show');
oShow.style.display='block';
oShow.style.left=(iWidth-302)/2+"px";
oShow.style.top=(iHeight-202)/2+"px";
functionoClose(){
oShow.style.display='none';
document.body.removeChild(bgObj);
}
varoClosebtn=document.createElement("span");
oClosebtn.innerHTML="×";
oShow.appendChild(oClosebtn);
oClosebtn.onclick=oClose;
bgObj.onclick=oClose;
}
</script>
</head>
<body>
<aonclick="show();returnfalse"href="#">请猛击我（我会弹到中间，同时背景变暗）</a>
<divid="show"><h3>弹出层标题栏</h3>
<pid="text">
这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。
</p>
</div>
</body>
</html>

5. 如何用js实现点击图片切换另一图片，再次点击恢复

代码示例：

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

</head>

<body>

window.onload=function(){

varImgbtn=document.getElementById('btn');

varImg=document.getElementById('img');

Imgbtn.onclick=function(){

if(Img.src=='http://dl.bi.sogou.com/images/2012/01/19/191337.png')没轿{

Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';

}else{档察核

Img.src='http://dl.bi.sogou.com/images/2012/01/19/191337.png'

}

}行掘

}

</script>

<divid="bg">

<divid="btn">

<divid="txt">试客小兵</div>

<imgid="img"src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">

</div>

</body>

</html>

(5)js如何点击图片扩展阅读：

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

6. 怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
{
$("#img0").attr("src", objUrl);
$("#img0").removeClass("hide");
}
}) ;
//建立一个可存取到该file的url
function getObjectURL(file)
{
var url = null ;
if (window.createObjectURL!=undefined)
{ // basic
url = window.createObjectURL(file) ;
}
else if (window.URL!=undefined)
{
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
}
else if (window.webkitURL!=undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
alert(value);
})
</script>
</html>

7. js如何点击左右按钮切换图片

这样：

<!DOCTYPE html>

<html>

<head>

<title>动态切换图片</title>

</head>亮槐

<style>

ul{

padding:0;margin:0;

}

li{

list-style: none;

}

#pic{

position: relative;

width: 400px;

height: 400px;

background-color:red;

margin:100px auto;

background:url('image/1.jpg') no-repeat center;

}

#pic img{

width: 400px;

height: 400px;

}

#pic ul{

width: 50px;

position: absolute;

top: 0;

right: -70px;

}

li{

width: 40px;

height: 40px;

margin-bottom:10px;

background-color: pink;

float: left;

}

#pic span{

position: absolute;

bottom: 10px;

left: 0;

}

#pic p,#pic span{

width: 400px;

height: 20px;

}

#pic p{

position: absolute;

top: 10px;

left: 0;

}

.active{

background-color: red;

}

</style>

<body>

<p>qwrwe</p>

<span>werwer</span>

<ul>

</ul>

</div>

window.onload=function(){

//存放旧li

var oldLi=null;

var num=0;

var oPic = document.getElementById('pic');

var oImg = oPic.getElementsByTagName('img')[0];

var oUL = oPic.getElementsByTagName('ul')[0];

var oSpan= oPic.getElementsByTagName('span')[0];

var oP = oPic.getElementsByTagName('p')[0];

var oLi= oUL.getElementsByTagName('li');

var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];

var aText = ['图片1','图片2','图片3','图片4'];

for(var i=0;i<arr.length;i++){

//动态添加元素

oUL.innerHTML+='<li></li>';

}

// 旧li就等于当前的

oldLi=oLi[num];

// 初始化

oImg.src=arr[num];

oP.innerHTML=num+1+'/'+arr.length;

oSpan.innerHTML=aText[num];

oLi[num].className='active';

for(var i=0;i<arr.length;i++){

// 给元素自定义属性

oLi[i].index=i;

oLi[i].onclick=function(){

// 当元素被点击时图片文字信息都一起变化

oImg.src=arr[this.index];

oP.innerHTML=1+this.index+'/'+arr.length;

oSpan.innerHTML=aText[this.index];

// 清空上一个当前添加

oldLi.className='';

//将上一个给当前

oldLi=this;

this.className='active';

}

</script>

</body>

</html>

(7)js如何点击图片扩展阅读：

注意事项

1、可以通过JS删除和添饥迅加hidden属性，改用style.display="none"和style.display="inline"来实现隐藏和显示。

2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置烂键此button相关的值。

border:none; 设置按钮无边框

outline:none;消除按钮点击后出现的表示被点击的边框

background：url(...)按钮背景图片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字阴影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按钮阴影

border-radius:15px;按钮边框圆角

8. 用js怎么实现点击（或拖动）左边图片显示到右边来

提供一个思路,无代码.
两边的容器放同样的小图片, 右边的拆余全部隐藏; 两个容器设置不一样的id, 同样的图片设置一样的name.
在左边的图片上绑定onclick事件, 点击后宴御陵获取图片的name,再把右边name与点击图片name相同的图片显示出来. 显示之前判断右边容器是否超过了3个已显示晌戚的图片(用is(:visible),如果是,则返回false

9. js鼠标单击实现图片切换

1、提前准备一组图片，将图片名称设置一定规律：例如 img1.jpg、img2.jpg

2、编写鼠标点击事件

3、在鼠标点击时间里，判断鼠标点击次数

4、根据不同次数，显示不同的图片

<scripttype="text/javascript">
$(function(){
varitems=newArrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
vari=0;
$("#bgImage").click(function(){
i++;
if(i>items.length){
i=1;
}
$(this).prop("src","img"+i+".jpg");
});
});
</script>

导航:首页 > 图片大全 > js如何点击图片

js如何点击图片

(7)js如何点击图片扩展阅读：

与js如何点击图片相关的资料