整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS3实现鼠标滑过高光凸起展示效果

似一些大型电商网站，一般很多产品展示图都加上了很多炫酷的效果来增强用户体验。当鼠标移上去就会出现特效是常见的一种动作，下面主要说说鼠标经过图片时候出现高光的特效。效果如下：

红色指向是出现高光的部分

重要的CSS3样式：

主要用来背景的渐变来实现那条高光，然后再运用动画来实现运动的距离位置！

本教程中，我们将向您展示如何突出显示和预览集成在文章中或分布在页面上的图像。这是允许用户查看与某个上下文相关的图像的更大版本的好方法。我们将在延迟悬停的情况下突出显示图像，并提供预览模式，将屏幕上放大和居中图像的较大版本。

开始吧！

标记

对于HTML结构，我们只需要考虑图像及其类。该图像可以放置在您的网站的任何地方：

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

我们使用alt属性将引用添加到较大的图像。

我们还将在正文结束之前添加一个叠加元素：

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

我们将用JavaScript创建的结构如下所示：

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

这个结构不会被放置在我们的HTML中 - 它将被动态创建。

现在，我们来看看风格。

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中应用透明度。为了始终显示，我们使覆盖层固定，即使我们滚动页面。

我们想要应用我们的效果的图像将具有以下样式：

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);}

这很简单，我们只是添加一些盒子阴影。

在我们的JavaScript中，我们将创建一个包含我们所徘徊的图像的克隆的包装器。它将获得与当前图像相同的位置。这就是为什么我们不在这里定义顶部和左侧，而是动态地在JS中。

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

我们还将添加一些图标，可以显示放大镜，加载图像或十字的跨度。我们定义所有的共同属性如下：

.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);}

每个类的具体属性，如背景，将被定义如下：

.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;}

现在，让我们添加一些魔法！

JavaScript

在我们的jQuery函数中，我们将首先定义一个变量来控制高亮效果的时间。

当我们将鼠标悬停在具有特定类的图像上时，我们使用类ih_image_clone_wrap创建div，并通过获取当前图像的位置来定义其位置。

/*** 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();
}});

就这样！我们希望你喜欢这个教程，并觉得它有用！

、HTML文本结构

浏览器通常会为其文本元素添加不同的样式，以区别于普通文本。例如 em 和 cite 元素中的文本都是斜体的。又如，code 元素专门用来格式化脚本或程序中的代码，该元素中的文本默认使用等宽字体。内容显示的样子与其使用的标记没有关系。因此不应该为了让文字变为斜体就使用 em 或 cite，添加样式是 css 的事情。相反，应该选择能描述内容的 HTML 元素。

  1. 添加段落：要在网页中开始一个新的段落，使用 p元素。（通过 css 可以为段落添加样式，包括字体、字号、颜色等。以及控制内行间距，段落文本对齐方式等。） 
<p> HTML <small> HyperText Markup Language </small> </p>
  1. 指定细则：small元素 表示细则一类的旁注，通常是文本中的一小块。
<p> HTML <small> HyperText Markup Language </small> </p>

3.标记重要和强调文本：strong元素 表示内容的重要性，而 em元素 表示内容的着重点。

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

浏览器通常将 strong 文本以粗体显示，em 文本以斜体显示。可以用 CSS 将任何文本变为粗体或斜体，也可以覆盖 strong 和 em 等元素的浏览器默认显示样式。

4.创建图：图可以是图表、照片、图形、插图、代码片段以及其他类似的独立内容。通过引入 figure 和 figcaption，figcaption 是 figure 的标题。

<figure>
<figcaption>
 [标题内容]
</figcaption>
 [插入内容]
<img src = "xxx.png" width = "180" height = "143" 
 alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>

figcaption 元素并不是必须的，但是只有包含它，就必须是 figure 元素内嵌的第一个或最后一个，且只能有一个。 5.指明引用或参考：使用 cite元素 可以指明对某内容源的引用或参考。默认以斜体显示（不因使用 cite 引用人名）

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

6.引述文本：有两个特殊的元素用以标记引述的文本。blockquote元素 表示单独存在的引述，其默认显示在新的一行。而 q元素 则用于短的引用，如句子里面的引述。由于q元素存在夸浏览器问题，应该避免使用，而是直接输入引号。

<blockquote>
 text...
</blockquote>
浏览器对应q元素中的文本自动加上语音的引号。
<p> And then she said,<q lang ="" > Have you read... </q> </p>

7.指定时间：使用 time元素 标记时间、日期或时间段。输入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。

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

8.解释缩写词：使用 abbr元素 标记缩写词并解释其含义。（通常是使用括号提供缩写词的全称是解释缩写词最直接的方式）

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

9.定义术语:在HTML中定义术语时，使用 dfn元素 对其作语义上的区分，首次定义术语通常会对其添加区别于其他文本格式，后续在使用术语时不再需要使用dfn对其进行标记。 （默认以斜体显示）

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

10.创建上标和下标:比主体文本稍高或稍低的字母或数字分别成称为上标和下标。可以使用 sub元素 创建下标， sup元素 创建上标。上标和下标字符会轻微地扰乱行与行之间的均匀间距，但可以使用 CSS 修复这个问题。

<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.添加作者联系方式: address元素 用以定于与 HTML 页面或页面一部分有关的作者、相关人士信息或组织联系信息，通常位于页面底部或相关部分内。

 <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.标注编辑和不再准确的文本:有时可能需要将在前一版本之后对页面的编辑标出来，或者对不再准确、不再相关的文本进行标记。有两种用于标注编辑的元素：代表添加内容的 ins元素 和标记已经删除内容的 del元素。

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

通常对已删除的文本加上删除线，对插入的文本加入下划线。标记不再准确或不再相关的文本

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

13.标记代码:如果你的内容包含代码示例或文件名，使用 code元素。

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

14.使用预格式化的文本：通常浏览器会将所有额外的回车和空格压缩，并根据窗口大小自动换行，预格式化的文本可以保持固有的换行和空格。pre元素。

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

如果要显示包含 HTML 元素内容，应将包围元素名称的 < 和 > 分别改为对应的字符实体<和 >否则浏览器就会试着显示这些元素。大多数情况下推荐队 div 元素使用 white-space:pre 以替代 pre，因为空格可能对这些内容的语义非常重要。

15.突出显示文本：类似文本中的荧光笔！HTML5 使用新的 mark元素 实现，引起读者对特定文本片段的注意。对原生支持的浏览器将对该元素文字默认加上黄色背景。

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

16.创建换行：当我们希望在文本中手动强制文字进行换行时，可以使用 br元素 (空元素).

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

17.创建span：同 div 一样，span元素 是没有任何语义的，不同的是，span 只适合包围字词或短语内容，而 div 适合包含块级内容。

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

18.其他元素：

U元素：用来为文本添加下划线。

wbr元素：表示可换行处。让浏览器知道在哪里可以根据需要进行换行（存在跨版本问题）。

ruby元素：旁注标记是一种惯用符号，通常用于表示生僻字的发音。

bdi和bdo元素：如果某些页面中混合了从左至右书写的字符（如拉丁字符）和从右至左书写的字符（如阿拉伯语）, 就可能使用到bdi和bdo元素。

meter元素：用 meter 元素表示分数的值或已知范围的测量结果。

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

progress元素:表示某项任务完成的进度，可用它表示一个进度条。不能与 meter 混在一起使用。

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

二、 HTML图片

在页面插入图片：输入 <img src=image.url" />

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

提供替代文本：在 img 标签内，src 属性及值的后面，输入 alt=""； 输入图像出于某种原因没有显示时应该出现的文本。指定图像的尺寸：在 img 标签内，src 属性后输入width="x", heigth="y"; 以像素为单位指定 x 和 y。

三、 HTML链接

创建一个指向另一个网页的链接：

输入 <a href="URL"> 此处输入链接标签 </a>
    
<a href = "http://www.baidu.com"> 百度一下 </a>

创建锚并链接到锚： 通常激活一个链接会将用户带到对应网页的顶端。如果想用户跳至网页特定区域，可以创建一个锚，并在链接中引用该锚。

1.创建锚： 输入 id="anchor-name",其中 name 是在内部用来标识网页中这部分内容的文字。

2.创建锚链接到特定锚链接：输入 <a href="#"anchor-name>，其中 anchor-name 是目标的 id 属性值。

3.输入标签文本（默认带下划线蓝色字体），用户激活该字体时将用户带到（1）步中引用的区域文本。

```<!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


在线咨询
上一篇：简单小程序：登录页面（html）
下一篇：10个对web开发人员有用的HTML文件上传技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 福泉市 伊宁县 千山区 理塘县 柘荣县 进贤县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服