css3实现的鼠标悬停特效，鼠标悬停给图片加边框ht

css3实现的鼠标悬停特效，鼠标悬停给图片加边框html页面前端源码

家好，今天给大家介绍一款，css3实现的鼠标悬停特效，鼠标悬停给图片加边框html页面前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

鼠标放在图像上，图像后面的边框就会上浮包住图像（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10191，需要的朋友，访问下面链接后，搜索10191，即可获取。

「链接」

家好，今天要跟大家分享的是当鼠标滑过时”图文动态显示“效果的CSS实现方法，下面我们来看下效果图：

相对前几期的内容今天的教程比较简单，主要知识点还是CSS3中关于动画属性的使用，从效果图中可以看出就是一个简单的上下移动，因此用到的还是是移动属性translate。

1、结构分析：

该示例主要有四个主体部分，每一部又是由图片和文字信息两部分组成，其中文字信息中含有一个标题一段文字和一个超链接，因此HTML结构可如下设置：

2、基本样式：

box-sizing: border-box;主要是为了后面给文字信息部分添加样式（如：添加边框边距）时父元素的尺寸不受影响。

3、单元主体样式：

主要设置overflow：hidden;用来隐藏向上移动时图片溢出部分。

4、图片和文字信息设置：

这里主要注意一点，图片的position为relative而文字信息部分的position为absolute。

5、文本样式设置：

这里不多赘述，根据个人喜好随便搞。

6、动态效果设置：

在此处需要先把文本信息部分向下移动100%的身位【translateY（100%）】配合上面的overflow：hidden实现隐藏，然后为图片和文本信息部分分别添加鼠标滑过时的动态效果，分别向上移动一定的距离，最后为每个动画都添加一个0.4秒的过渡时间transition:transform 0.4s即可。

易拖拽

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距离
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距离

oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序问题:鼠标拖拽过快,鼠标指针与拖拽div对象脱离

解决方法:直接给document加事件(因为div对象范围太小,鼠标移动就与拖拽div对象脱离)

将oDiv改成document对象

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

程序问题: FF下，空Div拖拽Bug(残影)

解决方法: 阻止默认事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');

var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)
{
var oEvent=ev||event;

oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false; //阻止默认事件(拖动残影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

防止拖出页面

在线咨询

上一篇：PDF转HTML后，表格排版全乱了是怎么回事？
下一篇：Jan 2 双语新闻精选：美国国家电影目录‘扩员’