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)文章
javascript 設(shè)置文本框中焦點(diǎn)的位置
設(shè)置文本框中焦點(diǎn)的位置的實(shí)現(xiàn)代碼2009-11-11
今天小編就為大家分享一篇使用Layui搭建后臺(tái)管理界面的操作方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了使用Javascript簡(jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
Javascript實(shí)現(xiàn)快速排序（Quicksort）的算法詳解
排序算法（Sorting algorithm）是計(jì)算機(jī)科學(xué)最古老、最基本的課題之一，要想成為合格的程序員，就必須理解和掌握各種排序算法。2015-09-09
原生JS實(shí)現(xiàn)的自動(dòng)輪播圖功能詳解
這篇文章主要介紹了原生JS實(shí)現(xiàn)的自動(dòng)輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了基于原生js實(shí)現(xiàn)輪播圖的原理、操作步驟及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
這篇文章主要介紹了js charAt的使用方法,需要的朋友可以參考下2014-02-02
在JavaScript中驗(yàn)證URL的新方法(2023版)
在JavaScript領(lǐng)域,URL 驗(yàn)證方面有了新消息！多年來,人們一直在討論JavaScript沒有一種簡(jiǎn)便的方法來驗(yàn)證 URL,現(xiàn)在有了一種新方法URL.canParse(),需要的朋友可以參考下2023-09-09
JS實(shí)現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼
在WEB應(yīng)用中，如何才能使應(yīng)用高效率呢?如何才能吸引用戶呢?這的確是個(gè)大學(xué)問,頁面的內(nèi)容,色搭配等都十分重要。但不可忽視的是,多數(shù)情況下，對(duì)于數(shù)據(jù)的呈現(xiàn)方式也是十分重要的。2010-09-09
這篇文章主要介紹了webpack4 入門最簡(jiǎn)單的例子介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
JavaScript檢測(cè)瀏覽器是否支持css3的屬性
這篇文章主要為大家詳細(xì)介紹了如何編寫一個(gè) JavaScript 方法來檢測(cè)瀏覽器是否支持特定的 CSS3 屬性,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12