js實例圖片,js 處理圖片

本文目錄一覽：

• 1、js鼠標懸停顯示文字實例
• 2、如何用JS語句顯示圖片？
• 3、js實現單擊圖片放大圖片的方法

js鼠標懸停顯示文字實例

一、首先需要div布局：

!DOCTYPE html

html lang=”en”

head

meta charset=”UTF-8″

titlejs懸停/title

style type=”text/css”

p {

width: 200px;

height: 200px;

background-color: skyblue;

text-align: center;

line-height: 200px;

}

/style

/head

body

p id=”txt”我是一個DIV/p

script type=”text/javascript”

var txt = document.getElementById(‘txt’);

txt.setAttribute(“title”,”鼠標懸停了”);

/script

/body

/html

二、div實在的在開發工具裏面的代碼效果如下截圖：

三、這段代碼最主要的重點是如下：

script type=”text/javascript”

var txt = document.getElementById(‘txt’);

txt.setAttribute(“title”,”鼠標懸停了”);

/script

四、實際代碼在瀏覽器的渲染如下：

如何用JS語句顯示圖片？

需要準備的材料分別有：電腦、html編輯器、瀏覽器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的script標籤，輸入js代碼：$(‘body’).append(‘img src=”” /’);。

3、瀏覽器運行index.html頁面，此時圖片被js成功顯示到頁面上。

js實現單擊圖片放大圖片的方法

這篇文章主要介紹了js實現單擊圖片放大圖片的方法,涉及javascript操作圖片的技巧與onclick事件的用法,需要的朋友可以參考下

本文實例講述了js實現單擊圖片放大圖片的方法。分享給大家供大家參考。具體實現方法如下：

代碼如下:

html

title單擊圖片即可放大圖片/title

body

點擊圖片預覽效果。br

img

src=”/images/m01.jpg”

onclick=”this.width+=50;this.height+=50″

onclick=”javascript:window.open(this.src);”

style=”cursor:pointer;”/

img

src=”/images/m02.jpg”

onclick=”this.style.zoom=’2′”

onclick=”javascript:window.open(this.src);”

style=”cursor:pointer;”/

/body

/html

希望本文所述對大家的javascript程序設計有所幫助。