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