jqzoom圖片擴大機代碼
使用方法:
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
相關文章
16 May 2016
這篇文章主要介紹了jquery實現滑屏大圖定時收縮為小banner圖片的廣告代碼,可實現大幅廣告圖的漸顯效果及定時收縮功能,點擊左上角關閉按鈕還可隱藏廣告圖片,非常具有實用價值,需要的朋友可以參考下
10 Oct 2018
在css3的學習中,我們會經常做一些小的動畫效果,這感覺非常有趣,所以今天的這篇文章將給大家來介紹關於css3實現圖片放大的一個效果,有興趣的小伙伴可以看一下。
26 Jul 2017
通常,我們可以為圖片設定一個CSS屬性,定義其高度和寬度。但有時候,我們只希望控制圖片的最大可見大小。這樣的操作,一般有兩種方法:1.直接使用CSS屬性值;2.使用JavaScript動態設定CSS值。一、固定大小一般,為了限制圖片的大小,會使用下面的HTML屬性值或
29 Jul 2016
: PHP 裁剪圖片成固定大小代碼方法:做一個首頁調用圖像,有時往往需要獲得固定大小的圖像,因為首頁的圖像位置通常由設計人員指定好了,如果是做最新發布圖像調用,因為不知道客戶會上傳什麼比例的圖像,所以,有時候也就沒有辦法確定圖像的比例,前台頁面編寫人員通常會採用固定img 元素高寬的辦法來達到控製圖像不溢出,但如果圖像的比例不是需要的比例,就會造成影像呼叫後變形,很大程度上影響了頁面的美觀,有解決的方法是,按照原圖比例進行縮放,縮放
Hot tools Tags
Hot Tools
jQuery 3D圖片滑桿輪播特效
基於jQuery實現的3D圖片Slider輪播特效
純CSS實作滑鼠經過圖片特效酷炫切換動畫
純CSS實作滑鼠經過圖片特效酷炫切換動畫代碼下載。
html5有視差效果的圖片輪播插件
一款html5有視差效果的圖片輪播插件,可滑鼠控制圖片,在圖片輪播滾動時產生酷炫的視覺差效果。
B站頭圖互動式滑鼠懸停景深對焦效果
一款B站頭圖互動式滑鼠懸停景深對焦效果網頁特效。
CSS3滑鼠懸停圖片效果
一款CSS3滑鼠懸停圖片效果