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如何點擊圖片相關的資料