JS實(shí)現(xiàn)圖片放大鏡效果的方法
更新時(shí)間：2015年02月27日 10:38:39 作者：代碼家園
這篇文章主要介紹了JS實(shí)現(xiàn)圖片放大鏡效果的方法,實(shí)例分析了magnifier.js插件的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)圖片放大鏡效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS精美的圖片放大鏡效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css">
.test{
margin:0 0 0 200px;
}
.test a{
font-size:14px;
color:#404040;
}
.test img{
border:#4b4b4b 1px solid;
}
</style>
</head>
<body>
<!--把下面代碼加到<body>與</body>之間-->
<script src="/js/magnifier.js"></script>
<div class="test">
<h3><a target="_blank" href="">Picture I</a></h3>
<img src="/images//m01.jpg" bigsrc="/images/1.jpg">
</div>
<div class="test">
<h3><a target="_blank" href="">Picture II</a></h3>
<img src="/images//m02.jpg" bigsrc="/images/2.jpg">
</div>
<div class="test">
<h3><a target="_blank" href="">Picture III</a></h3>
<img src="/images//m03.jpg" bigsrc="/images/3.jpg">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS精美的圖片放大鏡效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css">
.test{
margin:0 0 0 200px;
}
.test a{
font-size:14px;
color:#404040;
}
.test img{
border:#4b4b4b 1px solid;
}
</style>
</head>
<body>
<!--把下面代碼加到<body>與</body>之間-->
<script src="/js/magnifier.js"></script>
<div class="test">
<h3><a target="_blank" href="">Picture I</a></h3>
<img src="/images//m01.jpg" bigsrc="/images/1.jpg">
</div>
<div class="test">
<h3><a target="_blank" href="">Picture II</a></h3>
<img src="/images//m02.jpg" bigsrc="/images/2.jpg">
</div>
<div class="test">
<h3><a target="_blank" href="">Picture III</a></h3>
<img src="/images//m03.jpg" bigsrc="/images/3.jpg">
</div>
</body>
</html>
補(bǔ)充：magnifier.js插件點(diǎn)擊此處本站下載。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
ES6(ECMAScript 6)新特性之模板字符串用法分析
這篇文章主要介紹了ES6(ECMAScript 6)新特性之模板字符串用法,簡(jiǎn)單介紹了ES6模板字符串的概念、功能并結(jié)合實(shí)例形式分析了ES6模板字符串的用法,需要的朋友可以參考下2017-04-04
當(dāng)編輯某條數(shù)據(jù)時(shí)，再回過(guò)頭來(lái)進(jìn)行編輯，會(huì)發(fā)現(xiàn)，里面的數(shù)據(jù)和沒(méi)有編輯以前是一樣的，這就是ie緩存的問(wèn)題，下面是一個(gè)不錯(cuò)的解決方法2014-08-08
JavaScript實(shí)現(xiàn)將Word文檔解析成瀏覽器認(rèn)識(shí)的HTML
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)將Word文檔解析成瀏覽器認(rèn)識(shí)的HTML,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02
JavaScript?onclick點(diǎn)擊事件-點(diǎn)擊切換圖片且自動(dòng)播放
這篇文章主要介紹了JavaScript?onclick點(diǎn)擊事件-點(diǎn)擊切換圖片且自動(dòng)播放，在頁(yè)面中放圖片并設(shè)置四個(gè)button，可以通過(guò)點(diǎn)擊上一張下一張來(lái)切換圖片，下面來(lái)看看具體的實(shí)現(xiàn)過(guò)程吧2022-01-01
for-in遍歷方式的循環(huán)計(jì)數(shù)器是字符串類型，遍歷對(duì)象時(shí)為對(duì)象屬性/方法名，遍歷數(shù)組時(shí)為數(shù)組元素下標(biāo)索引，與普通的for循環(huán)不同,需要的朋友可以參考下2014-02-02
極酷的javascirpt，讓你隨意編輯任何網(wǎng)頁(yè)
極酷的javascirpt，讓你隨意編輯任何網(wǎng)頁(yè)...2007-02-02
javascript showModalDialog,open取得父窗口的方法
showModalDialog,open取得父窗口的代碼，需要的朋友可以參考下。2010-03-03
chorme 瀏覽器記住密碼后input黃色背景處理方法(兩種)
使用chrome瀏覽器選擇記住密碼的賬號(hào)，輸入框會(huì)自動(dòng)加上黃色的背景，有些設(shè)計(jì)輸入框是透明背景的，需要去除掉這個(gè)黃色的背景。下面給大家分享chorme 瀏覽器記住密碼后input黃色背景處理方法，一起看看吧2017-11-11
javascript createElement()創(chuàng)建input不能設(shè)置name屬性的解決方法
今天在使用document.createElement()動(dòng)態(tài)創(chuàng)建input時(shí)，發(fā)現(xiàn)不能為其name賦值，以下是測(cè)試代碼。2009-10-10
概述javascript在Google IE中的調(diào)試技巧
本篇文章主要是對(duì)javascript在Google IE中的調(diào)試技巧進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下2016-11-11