強大的自適應jQuery焦點圖特效

阿新 • • 發佈：2019-01-18

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery焦點圖切換自適應效果 - 何問起</title>
<base target 
="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/17/css/default.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/17/css/jquery.hiSlider.min.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 14px/2 'Microsoft YaHei', 'Arial' 
;
}
li{
list-style: none;
}
li img{
display: block;
margin: 0 auto;
}
#wrap{
width: 80%;
min-width: 300px;
margin: 10px auto 80px;
background: #fefefe;
}
.hiSlider{
overflow: hidden;
height: 280px;
width: 500px;
background: #eee;
}
.hiSlider-item{
float: left;
}
</style>

</head 
>
<body>
<div id="wrap">
<h1>jquery.hiSlider.js 外掛使用說明及示例</h1>
<h2>example1: 預設設定</h2>

<ul class="hiSlider hiSliderHovertree1">
<li data-title="11111" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li data-title="22222" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>
<li data-title="33333" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li>
<li data-title="44444" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li data-title="55555" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>
</ul>
<a href="http://hovertree.com/hvtart/bjae/yqhu1ug9.htm">原文</a>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/jquery/">jQuery</a> 
<h2>example2: 彈性佈局 + 淡入淡出</h2>
<ul class="hiSlider hiSliderHovertree2">
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>
</ul>

<h2>example3: 支援觸控事件 + 彈性佈局 (請在移動端測試)</h2>
<ul class="hiSlider hiSliderHovertree3">
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何問起"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>
</ul>

<h2>example4: 改變方向</h2>
<ul class="hiSlider hiSliderHovertree4">
<li data-title="11111" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li data-title="22222" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li>
<li data-title="33333" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何問起"></li>
<li data-title="44444" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li data-title="55555" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>
</ul>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗. 不支援IE8及以下瀏覽器。</p>
<p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a></p>
</div>
</div>

<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script src="http://hovertree.com/texiao/jquery/17/js/jquery.hiSlider.min.js"></script>
<script>
$('.hiSliderHovertree1').hiSlider();
$('.hiSliderHover'+'tree2').hiSlider({
isFlexible: true,
mode: 'fade',
isSupportTouch: false,
isShowTitle: false,
isShowPage: false,
titleAttr: function(curIdx){
return $('img', this).attr('alt');
}
});
$('.hiSliderHov'+'ertree3').hiSlider({
isFlexible: true,
isSupportTouch: true,
titleAttr: function(curIdx){
return $('img', this).attr('alt');
}
});
$('.hiSliderHover'+'tree4').hiSlider({
startSlide: 2,
direction: 'top'
});
</script>

</body>
</html>

強大的自適應jQuery焦點圖特效

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=

強大的jQuery焦點圖外掛Owl Carousel + 響應式圖片（案例解析）

GitHub地址：https://github.com/OwlCarousel2/OwlCarousel2 在各式各樣的網站中，都能看到焦點圖外掛的身影。一個好的焦點圖外掛必須滿足以下特點：1. 支援不同數量的圖片 2. 支援響應式佈局 3. 具有良好的相容性 Owl Carousel

ionic中滑動縮放的焦點圖特效實現

在之前專案整理中，實現過這樣一個特效：當用手指滑動時，焦點圖隨著滑動的距離而成比例的縮放的效果，常見於一些App上，主要是用於展示資訊的卡片，相關技術棧版本，ionic1, angular1, 這裡再來說一下：技術棧不同，但實現的思路是想通的，僅供開發參考。

Jquery焦點圖例項

對於很多建站的朋友來講，焦點圖並不陌生，一般的企業站，門戶站都會用到焦點圖。我們平時在寫html程式碼的時候，很多人為了省時省力，對於焦點圖都是在網上下載一些人家寫好的程式碼，直接套上去即可，很多時候我自己也是這樣來的。因為一個焦點圖有html佈局，css樣式除錯和最關鍵的 javascript語句的編寫。

jquery特效---jquery顯示縮圖，點選檢視大圖，並且大圖可自適應原圖大小

之前為了實現這樣的效果找了很久，大部分都不是自己想要的。實現這樣的效果，我用了兩個jquery的框架。一個是 jquery.nailthumb.1.1.js，另一個是jquery.colorbox-min.js。

jQuery自適應-3D旋轉輪播圖

3D旋轉輪播圖本例源於（站長之家例項http://sc.chinaz.com/jiaoben/170215391070.htm）其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）自己研究重寫了一遍。一、先寫靜態的初始樣式的cs

Jquery使容器自適應瀏覽器窗口

cti -s meta 方法 jquer charset mar utf-8 ava 一、幾個關鍵點 1：當文檔大小改變時可以通過哪個事件來觸發？ resize([Data], fn) 可傳入data供函數fn處理。示

NGUI 背景圖自適應

sprite 自適應組件 src jpg 技術分享背景適應比例背景圖UISprite組件調整如下： UIRoot設置：不保持比例自適應：保持寬與屏幕寬一致，高度隨寬的縮放比例進行縮放： NGUI 背景圖自適應

echarts雷達圖大小自適應

rgba fun olt css樣式 ada 文本標簽 init image 顏色結合了媒體查詢首先在css樣式表中寫出你希望雷達圖在不同分辨率下的大小 @media screen and (max-height:780px){ .left-score-ima

使用 jQuery 制作京東網的焦點圖

焦點 border col 1.3 bsp 按鈕 align none scrip HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t

前端切圖:手機端自適應布局demo

original shu 源碼 size 自適應 art 分享 nsh defined 手機端自適應布局demo 原型如下：圖片發自簡書App 要求如下：適應各種機型源碼如下： <!DOCTYPE html > <html>

簡單實現iframe的高度根據頁面內容自適應（jQuery方式）

eight var 調用 pos jquery 出現引用 main body 這篇文章主要介紹了簡單實現iframe的高度根據頁面內容自適應（jQuery方式），以及在ie瀏覽器下的相關問題方式一： //註意：下面的代碼是放在和iframe同一個頁面中調用 $("

圖像處理之邊緣自適應的插值算法

ima OS 空間采樣 mage 計算人工彩色 ron 1 邊緣自適應插值算法介紹在Bayer CFA中，由於綠色像素點的數量是紅色和藍色像素數量的兩倍，故其包含更多的原始圖像的邊緣信息。因此，亞當斯和漢密爾頓根據該思想在1997年提出了一種邊緣自適應

python-opencv 圖像二值化，自適應閾值處理

csdn 領域 image tle tps wid 無聊 src ima 定義：圖像的二值化，就是將圖像上的像素點的灰度值設置為0或255，也就是將整個圖像呈現出明顯的只有黑和白的視覺效果。一幅圖像包括目標物體、背景還有噪聲，要想從多值的數字圖像中直

背景圖自適應瀏覽器窗口兩種方式分享

set spa body 自適應 clas har 窗口 ges pre 方式一：<html> <head> <meta charset="UTF-8"> <title></ti

jQuery簡單實現iframe的高度根據頁面內容自適應的方法(轉)

var contents color iframe meid clas 簡單實現方式根據本文實例講述了jQuery簡單實現iframe的高度根據頁面內容自適應的方法。分享給大家供大家參考，具體如下：方式1： //註意：下面的代碼是放在和iframe同一個

CSS實現自適應不同大小螢幕的背景大圖的兩種方法（轉自簡書）

CSS實現自適應不同大小螢幕的背景大圖的兩種方法一張清晰漂亮的背景圖片能給網頁加分不少，設計師也經常會給頁面的背景使用大圖，我們既不想圖片因為不同解析度圖片變形，也不希望當在大屏的情況下，背景有一塊露白，簡而言之，就是實現能自適應螢幕大小又不會變形的背景大圖，而且背景圖片不會隨著

jQuery 3D圓盤旋轉焦點圖支援滑鼠滾輪

之前我們分享過很多炫酷實用的jQuery焦點圖外掛了，今天介紹的這款jQuery焦點圖非常特別，所有圖片圍成一個圓圈，組成一個立體視覺的圓盤，並且可以旋轉選擇圓盤中的圖片。另外，這款jQuery 3D圓盤旋轉焦點圖外掛還支援滑鼠滾輪，可以讓你更方便地瀏覽圖片。線上演示原始碼下載接下來分析一下實現這

echart去除網格線的兩種方法和echart圖自適應

1. yAxis : [ { &nb

背景圖自適應鋪滿視窗

背景圖自適應缺點：當視窗拉伸縮小時，會失去效果！自己試一下就知道了。直接上程式碼這是html頁面 <body id="body"> ... </body> css檔案如下： #body{

強大的自適應jQuery焦點圖特效

相關推薦