CSS3實(shí)現(xiàn)鼠標(biāo)滑過(guò)高光凸起展示效果

似一些大型電商網(wǎng)站，一般很多產(chǎn)品展示圖都加上了很多炫酷的效果來(lái)增強(qiáng)用戶體驗(yàn)。當(dāng)鼠標(biāo)移上去就會(huì)出現(xiàn)特效是常見的一種動(dòng)作，下面主要說(shuō)說(shuō)鼠標(biāo)經(jīng)過(guò)圖片時(shí)候出現(xiàn)高光的特效。效果如下：

紅色指向是出現(xiàn)高光的部分

重要的CSS3樣式：

主要用來(lái)背景的漸變來(lái)實(shí)現(xiàn)那條高光，然后再運(yùn)用動(dòng)畫來(lái)實(shí)現(xiàn)運(yùn)動(dòng)的距離位置！

本教程中，我們將向您展示如何突出顯示和預(yù)覽集成在文章中或分布在頁(yè)面上的圖像。這是允許用戶查看與某個(gè)上下文相關(guān)的圖像的更大版本的好方法。我們將在延遲懸停的情況下突出顯示圖像，并提供預(yù)覽模式，將屏幕上放大和居中圖像的較大版本。

開始吧！

標(biāo)記

對(duì)于HTML結(jié)構(gòu)，我們只需要考慮圖像及其類。該圖像可以放置在您的網(wǎng)站的任何地方：

<img src = “images / thumbs / 1.jpg” alt = “images / 1.jpg” class = “ih_image” />

我們使用alt屬性將引用添加到較大的圖像。

我們還將在正文結(jié)束之前添加一個(gè)疊加元素：

< div id = “ih_overlay” class = “ih_overlay” style = “display：none;” > </ div >

我們將用JavaScript創(chuàng)建的結(jié)構(gòu)如下所示：

<div id="ih_clone" class="ih_image_clone_wrap">
<span class="ih_close"></span>
<img class="preview" src="images/1.jpg"></div>

這個(gè)結(jié)構(gòu)不會(huì)被放置在我們的HTML中 - 它將被動(dòng)態(tài)創(chuàng)建。

現(xiàn)在，我們來(lái)看看風(fēng)格。

CSS

首先，我們將定義覆蓋的樣式：

.ih_overlay{	position:fixed;	top:0px;	left:0px;	right:0px;	bottom:0px;	background:#000;	z-index:10;	opacity:0.9;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);}

filter屬性用于在IE中應(yīng)用透明度。為了始終顯示，我們使覆蓋層固定，即使我們滾動(dòng)頁(yè)面。

我們想要應(yīng)用我們的效果的圖像將具有以下樣式：

img.ih_image{	margin:10px 0px;	position:relative;	-moz-box-shadow:1px 1px 4px #000;	-webkit-box-shadow:1px 1px 4px #000;	box-shadow:1px 1px 4px #000;	opacity:0.7;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

這很簡(jiǎn)單，我們只是添加一些盒子陰影。

在我們的JavaScript中，我們將創(chuàng)建一個(gè)包含我們所徘徊的圖像的克隆的包裝器。它將獲得與當(dāng)前圖像相同的位置。這就是為什么我們不在這里定義頂部和左側(cè)，而是動(dòng)態(tài)地在JS中。

.ih_image_clone_wrap{	position:absolute;	z-index:11;}

我們還將添加一些圖標(biāo)，可以顯示放大鏡，加載圖像或十字的跨度。我們定義所有的共同屬性如下：

.ih_image_clone_wrap span.ih_zoom,.ih_image_clone_wrap span.ih_loading,.ih_image_clone_wrap span.ih_close{	position:absolute;	top:10px;	right:10px;	width:24px;	height:24px;	-moz-border-radius:6px;	-webkit-border-radius:6px;	border-radius:6px;	opacity:0.8;	cursor:pointer;	-moz-box-shadow:1px 1px 2px #000;	-webkit-box-shadow:1px 1px 2px #000;	box-shadow:1px 1px 2px #000;	z-index:999;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}

每個(gè)類的具體屬性，如背景，將被定義如下：

.ih_image_clone_wrap span.ih_zoom{	background:#000 url(../icons/zoom.png) no-repeat center center;}.ih_image_clone_wrap span.ih_loading{	background:#000 url(../icons/loader.gif) no-repeat center center;}.ih_image_clone_wrap span.ih_close{	background:#000 url(../icons/close.png) no-repeat center center;}.ih_image_clone_wrap img{	opacity:0.7;	-moz-box-shadow:1px 1px 10px #000;	-webkit-box-shadow:1px 1px 10px #000;	box-shadow:1px 1px 10px #000;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

我們將在縮略圖上加載的全尺寸圖像將具有以下樣式：

.ih_image_clone_wrap img.preview{	opacity:1;	position:absolute;	top:0px;	left:0px;}

現(xiàn)在，讓我們添加一些魔法！

JavaScript

在我們的jQuery函數(shù)中，我們將首先定義一個(gè)變量來(lái)控制高亮效果的時(shí)間。

當(dāng)我們將鼠標(biāo)懸停在具有特定類的圖像上時(shí)，我們使用類ih_image_clone_wrap創(chuàng)建div，并通過(guò)獲取當(dāng)前圖像的位置來(lái)定義其位置。

/*** timeout to control the display of the overlay/highlight*/var highlight_timeout;/*** user hovers one image:* create a absolute div with the same image inside,* and append it to the body*/$('img.ih_image').bind('mouseenter',function () {		var $thumb = $(this);
var $clone = $('<div />',{			'id'		: 'ih_clone',			'className'	: 'ih_image_clone_wrap',			'html' 	: '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',			'style'		: 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
});
var highlight = function (){
$('#ih_overlay').show();
$('BODY').append($clone);
}
//show it after some time ...
highlight_timeout = setTimeout(highlight,700);
/**
* when we click on the zoom,
* we display the image in the center of the window,
* and enlarge it to the size of the real image,
* fading this one in, after the animation is over.
*/
$clone.find('.ih_zoom').bind('click',function(){			var $zoom = $(this);
$zoom.addClass('ih_loading').removeClass('ih_zoom');			var imgL_source = $thumb.attr('alt');
$('<img class="ih_preview" style="display:none;"/>').load(function(){				var $imgL = $(this);
$zoom.hide();
var windowW = $(window).width();				var windowH = $(window).height();				var windowS = $(window).scrollTop();
$clone.append($imgL).animate({
'top'			: windowH/2 + windowS + 'px',					'left'			: windowW/2 + 'px',					'margin-left'	: -$thumb.width()/2 + 'px',					'margin-top'	: -$thumb.height()/2 + 'px'
},400,function(){					var $clone = $(this);					var largeW = $imgL.width();					var largeH = $imgL.height();
$clone.animate({
'top'			: windowH/2 + windowS + 'px',						'left'			: windowW/2 + 'px',						'margin-left'	: -largeW/2 + 'px',						'margin-top'	: -largeH/2 + 'px',						'width'			: largeW + 'px',						'height'		: largeH + 'px'
},400).find('img:first').animate({						'width'			: largeW + 'px',						'height'		: largeH + 'px'
},400,function(){						var $thumb = $(this);						/**
* fade in the large image and
* replace the zoom with a cross,
* so the user can close the preview mode
*/
$imgL.fadeIn(function(){
$zoom.addClass('ih_close')
.removeClass('ih_loading')
.fadeIn(function(){
$(this).bind('click',function(){
$clone.remove();
clearTimeout(highlight_timeout);
$('#ih_overlay').hide();
});
$(this).bind('click',function(){
$clone.remove();
clearTimeout(highlight_timeout);
$('#ih_overlay').hide();
});
});
$thumb.remove();
});
});
});
}).error(function(){				/**
* error loading image
* maybe show a message like
* 'no preview available'?
*/
$zoom.fadeOut();
}).attr('src',imgL_source);
});}).bind('mouseleave',function(){	/**
* the user moves the mouse out of an image.
* if there's no clone yet, clear the timeout
* (user was probably scolling through the article, and
* doesn't want to view the image)
*/
if($('#ih_clone').length) return;
clearTimeout(highlight_timeout);});/*** the user moves the mouse out of the clone.* if we don't have yet the cross option to close the preview, then* clear the timeout*/$('#ih_clone').live('mouseleave',function() {	var $clone = $('#ih_clone');	if(!$clone.find('.ih_preview').length){
$clone.remove();
clearTimeout(highlight_timeout);
$('#ih_overlay').hide();
}});

就這樣！我們希望你喜歡這個(gè)教程，并覺得它有用！

、HTML文本結(jié)構(gòu)

瀏覽器通常會(huì)為其文本元素添加不同的樣式，以區(qū)別于普通文本。例如 em 和 cite 元素中的文本都是斜體的。又如，code 元素專門用來(lái)格式化腳本或程序中的代碼，該元素中的文本默認(rèn)使用等寬字體。內(nèi)容顯示的樣子與其使用的標(biāo)記沒有關(guān)系。因此不應(yīng)該為了讓文字變?yōu)樾斌w就使用 em 或 cite，添加樣式是 css 的事情。相反，應(yīng)該選擇能描述內(nèi)容的 HTML 元素。

添加段落：要在網(wǎng)頁(yè)中開始一個(gè)新的段落，使用 p元素。（通過(guò) css 可以為段落添加樣式，包括字體、字號(hào)、顏色等。以及控制內(nèi)行間距，段落文本對(duì)齊方式等。）

<p> HTML <small> HyperText Markup Language </small> </p>

指定細(xì)則：small元素表示細(xì)則一類的旁注，通常是文本中的一小塊。

<p> HTML <small> HyperText Markup Language </small> </p>

3.標(biāo)記重要和強(qiáng)調(diào)文本：strong元素 表示內(nèi)容的重要性，而 em元素 表示內(nèi)容的著重點(diǎn)。

   <p> <strong> Warning:Do not approach the ... <em>
     under any... </em> </strong> just because... </p>

瀏覽器通常將 strong 文本以粗體顯示，em 文本以斜體顯示。可以用 CSS 將任何文本變?yōu)榇煮w或斜體，也可以覆蓋 strong 和 em 等元素的瀏覽器默認(rèn)顯示樣式。

4.創(chuàng)建圖：圖可以是圖表、照片、圖形、插圖、代碼片段以及其他類似的獨(dú)立內(nèi)容。通過(guò)引入 figure 和 figcaption，figcaption 是 figure 的標(biāo)題。

<figure>
<figcaption>
 [標(biāo)題內(nèi)容]
</figcaption>
 [插入內(nèi)容]
<img src = "xxx.png" width = "180" height = "143" 
 alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>

figcaption 元素并不是必須的，但是只有包含它，就必須是 figure 元素內(nèi)嵌的第一個(gè)或最后一個(gè)，且只能有一個(gè)。 5.指明引用或參考：使用 cite元素 可以指明對(duì)某內(nèi)容源的引用或參考。默認(rèn)以斜體顯示（不因使用 cite 引用人名）

 <p> he Listend to <cite> Abbey Road </cite> </p>

6.引述文本：有兩個(gè)特殊的元素用以標(biāo)記引述的文本。blockquote元素 表示單獨(dú)存在的引述，其默認(rèn)顯示在新的一行。而 q元素 則用于短的引用，如句子里面的引述。由于q元素存在夸瀏覽器問(wèn)題，應(yīng)該避免使用，而是直接輸入引號(hào)。

<blockquote>
 text...
</blockquote>
瀏覽器對(duì)應(yīng)q元素中的文本自動(dòng)加上語(yǔ)音的引號(hào)。
<p> And then she said,<q lang ="" > Have you read... </q> </p>

7.指定時(shí)間：使用 time元素 標(biāo)記時(shí)間、日期或時(shí)間段。輸入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。

<time> 16:20 </time>  <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>

8.解釋縮寫詞：使用 abbr元素 標(biāo)記縮寫詞并解釋其含義。（通常是使用括號(hào)提供縮寫詞的全稱是解釋縮寫詞最直接的方式）

<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>

9.定義術(shù)語(yǔ):在HTML中定義術(shù)語(yǔ)時(shí)，使用 dfn元素 對(duì)其作語(yǔ)義上的區(qū)分，首次定義術(shù)語(yǔ)通常會(huì)對(duì)其添加區(qū)別于其他文本格式，后續(xù)在使用術(shù)語(yǔ)時(shí)不再需要使用dfn對(duì)其進(jìn)行標(biāo)記。（默認(rèn)以斜體顯示）

  <p> The contesttant ... <dfn> pleonasm </dfn> </p>

10.創(chuàng)建上標(biāo)和下標(biāo):比主體文本稍高或稍低的字母或數(shù)字分別成稱為上標(biāo)和下標(biāo)。可以使用 sub元素 創(chuàng)建下標(biāo)， sup元素 創(chuàng)建上標(biāo)。上標(biāo)和下標(biāo)字符會(huì)輕微地?cái)_亂行與行之間的均勻間距，但可以使用 CSS 修復(fù)這個(gè)問(wèn)題。

<p> ... <a href = "#footnote-1" title = "REad footnote 1"> 
    Text   <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
    Text <sup> 1 </sup> </a> </p>

11.添加作者聯(lián)系方式: address元素 用以定于與 HTML 頁(yè)面或頁(yè)面一部分有關(guān)的作者、相關(guān)人士信息或組織聯(lián)系信息，通常位于頁(yè)面底部或相關(guān)部分內(nèi)。

 <footer role = "contentinfo">
  <p> <small> ? 2021 The Paper of ... </small> </p>
 <address>
  Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
  </address>		
</footer>

12.標(biāo)注編輯和不再準(zhǔn)確的文本:有時(shí)可能需要將在前一版本之后對(duì)頁(yè)面的編輯標(biāo)出來(lái)，或者對(duì)不再準(zhǔn)確、不再相關(guān)的文本進(jìn)行標(biāo)記。有兩種用于標(biāo)注編輯的元素：代表添加內(nèi)容的 ins元素 和標(biāo)記已經(jīng)刪除內(nèi)容的 del元素。

  <li> <del> desks </del> </li>
  <li> <ins> bicycle </ins> </li>

通常對(duì)已刪除的文本加上刪除線，對(duì)插入的文本加入下劃線。標(biāo)記不再準(zhǔn)確或不再相關(guān)的文本

  <li> <s> 5 p.m </s> SOLD </li>

13.標(biāo)記代碼:如果你的內(nèi)容包含代碼示例或文件名，使用 code元素。

 <p> The <code> showPhoto() </code> ... <code> < ;ul 
 id = "thumbanil" > </code> list </p>

14.使用預(yù)格式化的文本：通常瀏覽器會(huì)將所有額外的回車和空格壓縮，并根據(jù)窗口大小自動(dòng)換行，預(yù)格式化的文本可以保持固有的換行和空格。pre元素。

<pre>
 <code>
  abbr[title] {
    border-boottom: 1px dotted #000;
  }
</code>

如果要顯示包含 HTML 元素內(nèi)容，應(yīng)將包圍元素名稱的 < 和 > 分別改為對(duì)應(yīng)的字符實(shí)體<和 >否則瀏覽器就會(huì)試著顯示這些元素。大多數(shù)情況下推薦隊(duì) div 元素使用 white-space:pre 以替代 pre，因?yàn)榭崭窨赡軐?duì)這些內(nèi)容的語(yǔ)義非常重要。

15.突出顯示文本：類似文本中的熒光筆！HTML5 使用新的 mark元素 實(shí)現(xiàn)，引起讀者對(duì)特定文本片段的注意。對(duì)原生支持的瀏覽器將對(duì)該元素文字默認(rèn)加上黃色背景。

<p> GSL is <mark> YYDS! </mark>

16.創(chuàng)建換行：當(dāng)我們希望在文本中手動(dòng)強(qiáng)制文字進(jìn)行換行時(shí)，可以使用 br元素 (空元素).

<p> 123 <br />
    456 <br />
</p>

17.創(chuàng)建span：同 div 一樣，span元素 是沒有任何語(yǔ)義的，不同的是，span 只適合包圍字詞或短語(yǔ)內(nèi)容，而 div 適合包含塊級(jí)內(nèi)容。

 <p> Gaudi's work was essentially useful.
 <span lang ="es"> La Casa Mila </span> is an ...
 </p>

18.其他元素：

U元素：用來(lái)為文本添加下劃線。

wbr元素：表示可換行處。讓瀏覽器知道在哪里可以根據(jù)需要進(jìn)行換行（存在跨版本問(wèn)題）。

ruby元素：旁注標(biāo)記是一種慣用符號(hào)，通常用于表示生僻字的發(fā)音。

bdi和bdo元素：如果某些頁(yè)面中混合了從左至右書寫的字符（如拉丁字符）和從右至左書寫的字符（如阿拉伯語(yǔ)）, 就可能使用到bdi和bdo元素。

meter元素：用 meter 元素表示分?jǐn)?shù)的值或已知范圍的測(cè)量結(jié)果。

  <p> Project completion status: <meter value="0.60">80% completed </meter> </p>

progress元素:表示某項(xiàng)任務(wù)完成的進(jìn)度，可用它表示一個(gè)進(jìn)度條。不能與 meter 混在一起使用。

<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>

二、 HTML圖片

在頁(yè)面插入圖片：輸入 <img src=image.url" />

<img src="xxx.jpg" alt="" />

提供替代文本：在 img 標(biāo)簽內(nèi)，src 屬性及值的后面，輸入 alt=""；輸入圖像出于某種原因沒有顯示時(shí)應(yīng)該出現(xiàn)的文本。指定圖像的尺寸：在 img 標(biāo)簽內(nèi)，src 屬性后輸入width="x", heigth="y"; 以像素為單位指定 x 和 y。

三、 HTML鏈接

創(chuàng)建一個(gè)指向另一個(gè)網(wǎng)頁(yè)的鏈接：

輸入 <a href="URL"> 此處輸入鏈接標(biāo)簽 </a>
    
<a href = "http://www.baidu.com"> 百度一下 </a>

創(chuàng)建錨并鏈接到錨：通常激活一個(gè)鏈接會(huì)將用戶帶到對(duì)應(yīng)網(wǎng)頁(yè)的頂端。如果想用戶跳至網(wǎng)頁(yè)特定區(qū)域，可以創(chuàng)建一個(gè)錨，并在鏈接中引用該錨。

1.創(chuàng)建錨：輸入 id="anchor-name",其中 name 是在內(nèi)部用來(lái)標(biāo)識(shí)網(wǎng)頁(yè)中這部分內(nèi)容的文字。

2.創(chuàng)建錨鏈接到特定錨鏈接：輸入 <a href="#"anchor-name>，其中 anchor-name 是目標(biāo)的 id 屬性值。

3.輸入標(biāo)簽文本（默認(rèn)帶下劃線藍(lán)色字體），用戶激活該字體時(shí)將用戶帶到（1）步中引用的區(qū)域文本。

```<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Creating and Linking to Anchors</title>
</head>
<body>

<article>
	<header>
		<h1>Frequently Asked Questions (FAQ)</h1>
		
		<nav>
			<ul>
				<li><a href="#question-01">Can an id have more than one word?</a></li>
				<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
				<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
				<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
			</ul>
		</nav>
	</header>

	<h2 id="question-01">Can an id have more than one word?</h2>
	<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>

	<h2 id="question-02">Can visitors bookmark anchor links?</h2>
	<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>

	<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
	<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>

	<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
	<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>

</body>
</html>

作者：excavate
https://juejin.cn/post/6988467705909248014

在線咨詢

上一篇：簡(jiǎn)單小程序：登錄頁(yè)面（html）
下一篇：10個(gè)對(duì)web開發(fā)人員有用的HTML文件上傳技巧

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS3實(shí)現(xiàn)鼠標(biāo)滑過(guò)高光凸起展示效果

、HTML文本結(jié)構(gòu)

二、 HTML圖片

三、 HTML鏈接

您的項(xiàng)目需求