首頁 JS特效 圖片特效 jqzoom圖片擴大機代碼

jqzoom圖片擴大機代碼

jqzoom圖片擴大機代碼

jqzoom圖片擴大機代碼,適合產品圖片的展示,相容主流瀏覽器,php中文網推薦下載! 使用方法: 1.head區域引入 <link rel="stylesheet" href="css/jqzoom.css" type="text/css"> 2、 引入js庫 <script src="js/j

jqzoom圖片擴大機代碼,適合產品圖片的展示,相容主流瀏覽器,php中文網推薦下載!
使用方法:
1、head區域引入
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
2、 引入js庫
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
3.呼叫jqzoom函數庫
<script type="text/javascript">
$(function() {
var options =
{
zoomWidth: 250, //放大鏡的寬度
zoomHeight: 250,//放大鏡的高度
zoomType:'reverse'
};
$(".jqzoom").jqzoom(options);
});
</script>

配置參數:
zoomType,預設值:’standard’,另一個值是’reverse’,原圖是否以半透明圖層遮蓋。
zoomWidth,預設值:200,放大視窗的寬度。
zoomHeight,預設值:200,放大視窗的高度。
xOffset,預設值:10,放大視窗相對於原圖的x軸偏移值,可以為負。
yOffset,預設值:0,放大視窗相對於原圖的y軸偏移值,可以為負。
position,預設值:’right’,放大視窗的位置,值還可以是:’right’ ,’left’ ,’top’ ,’bottom’。
lens,預設值:true,若為false,則不在原圖上顯示鏡頭。
imageOpacity,預設值:0.2,當zoomType的值為’reverse’時,這個參數用來指定遮罩的透明度。
title,預設值:true,在放大視窗中顯示標題,值可以為a標記的title值,若無,則為原圖的title值。
showEffect,預設值:’show’,顯示放大視窗時的效果,值可以為: ‘show’ ,’fadein’。
hideEffect,預設值:’hide’,隱藏放大視窗時的效果: ‘hide’ ,’fadeout’。
fadeinSpeed,預設值:’fast’,放大視窗的漸顯速度(選項: ‘fast’,'slow’,'medium’)。
fadeoutSpeed,預設值:’slow’,放大視窗的漸隱速度(選項: ‘fast’,'slow’,'medium’)。
showPreload,預設值:true,是否顯示載入提示Loading zoom(選項: ‘true’,'false’)。
preloadText,預設值:’Loading zoom’,自訂載入提示文字。
preloadPosition,預設值:’center’,載入提示的位置,值也可以為’bycss’,以透過css指定位置。
免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

php隨機顯示圖片代碼 php隨機顯示圖片代碼

25 Jul 2016

php隨機顯示圖片代碼

jquery實現滑屏大圖定時收縮為小banner圖片的廣告代碼_jquery jquery實現滑屏大圖定時收縮為小banner圖片的廣告代碼_jquery

16 May 2016

這篇文章主要介紹了jquery實現滑屏大圖定時收縮為小banner圖片的廣告代碼,可實現大幅廣告圖的漸顯效果及定時收縮功能,點擊左上角關閉按鈕還可隱藏廣告圖片,非常具有實用價值,需要的朋友可以參考下

css3如何實現滑鼠放上圖片放大? (附代碼) css3如何實現滑鼠放上圖片放大? (附代碼)

10 Oct 2018

在css3的學習中,我們會經常做一些小的動畫效果,這感覺非常有趣,所以今天的這篇文章將給大家來介紹關於css3實現圖片放大的一個效果,有興趣的小伙伴可以看一下。

網頁裡控制圖片大小的相關代碼 網頁裡控制圖片大小的相關代碼

21 May 2017

網頁裡控制圖片大小的相關代碼

分享一個HTML+css圖片放大特效代碼 分享一個HTML+css圖片放大特效代碼

01 May 2017

怎麼才能將圖片放大,下面小編就來介紹一個實例。

jquery圖片放大鏡功能的實例代碼_jquery jquery圖片放大鏡功能的實例代碼_jquery

16 May 2016

jquery圖片放大鏡功能的實例代碼,需要的朋友可以參考一下

用CSS來控制圖片顯示大小的代碼_經驗交流 用CSS來控制圖片顯示大小的代碼_經驗交流

16 May 2016

有時候圖片太大,會破環網頁整齊的版面。這時可以用css來強制按比例壓縮圖片的高度或寬度。

如何使用CSS調整圖片大小的實例代碼分享 如何使用CSS調整圖片大小的實例代碼分享

26 Jul 2017

通常,我們可以為圖片設定一個CSS屬性,定義其高度和寬度。但有時候,我們只希望控制圖片的最大可見大小。這樣的操作,一般有兩種方法:1.直接使用CSS屬性值;2.使用JavaScript動態設定CSS值。一、固定大小一般,為了限制圖片的大小,會使用下面的HTML屬性值或

PHP 裁剪圖片成固定大小代碼方法 PHP 裁剪圖片成固定大小代碼方法

29 Jul 2016

: PHP 裁剪圖片成固定大小代碼方法:做一個首頁調用圖像,有時往往需要獲得固定大小的圖像,因為首頁的圖像位置通常由設計人員指定好了,如果是做最新發布圖像調用,因為不知道客戶會上傳什麼比例的圖像,所以,有時候也就沒有辦法確定圖像的比例,前台頁面編寫人員通常會採用固定img 元素高寬的辦法來達到控製圖像不溢出,但如果圖像的比例不是需要的比例,就會造成影像呼叫後變形,很大程度上影響了頁面的美觀,有解決的方法是,按照原圖比例進行縮放,縮放

See all articles See all articles

Hot Tools

jQuery 3D圖片滑桿輪播特效

jQuery 3D圖片滑桿輪播特效

基於jQuery實現的3D圖片Slider輪播特效

純CSS實作滑鼠經過圖片特效酷炫切換動畫

純CSS實作滑鼠經過圖片特效酷炫切換動畫

純CSS實作滑鼠經過圖片特效酷炫切換動畫代碼下載。

html5有視差效果的圖片輪播插件

html5有視差效果的圖片輪播插件

一款html5有視差效果的圖片輪播插件,可滑鼠控制圖片,在圖片輪播滾動時產生酷炫的視覺差效果。

B站頭圖互動式滑鼠懸停景深對焦效果

B站頭圖互動式滑鼠懸停景深對焦效果

一款B站頭圖互動式滑鼠懸停景深對焦效果網頁特效。

CSS3滑鼠懸停圖片效果

CSS3滑鼠懸停圖片效果

一款CSS3滑鼠懸停圖片效果