浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例。
以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3和HTML,Java的小伙伴不要绕道~~~
言归正传,那么我们首先要完成什么样的图片处理呢?
一、CSS3图片的放大
css3中,有一个属性transform,官方的解释是:允许向元素应用2D或3D的转换。这些转换当然就包含旋转、缩放、移动或倾斜了。有兴趣的同学可以继续了解http://www.w3school.com.cn/cssref/pr_transform.asp
transform属性中的方法有很多,那么用于图片缩放的是:scale。多说无益,直接上代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div class="content">
<img src="img/5.jpg" class="pic"/>
</div>
</body>
</html>
上面这段代码是基本的页面结构,body下div,内部放入图片(5.jpg是我测试用的图片,并且放在了img路径下)。之后我们给它添加基本的css样式:
<style type="text/css">
*{
padding:;
margin:;/*去内外边界*/
}
.content {
margin: 40px auto;/*居中显示*/
width: 450px;
height: 301px;
border:10px solid #808080;/*给外部加一个边框*/
}
.content img {
width: 450px;
height: 301px;
}
</style>
添加完样式之后,界面看起来比较顺眼了,那么现在就开始利用上面提到的属性来完成我们标题提到的功能。
我们先用css来完成。既然提到鼠标悬浮,那么首先想到的应该是伪类:hover。(css中有很多伪类,有兴趣的伙伴可以之后查看)
添加如下的css代码:
.content img:hover{
transform:scale(1.2);
}
现在在页面浏览时,将鼠标放到图片上,就会出现图片放大的效果,当然这里是放大了原图片的1.2倍。等等,有的小伙伴会问,为什么我的图片没有放大呢?天呐,你用的浏览器是不是IE8啊?哈哈,柯南还没有说完。现在市面上主流的浏览器有很多,如:IE,Chrome,Safari,Opera和Firefox,CSS3为了分别适应他们,分别添加了前缀,那么上面的一段代码就要替换成:
.content img:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2); /*Safari 和 Chrome*/
-moz-transform: scale(1.2); /*Firefox*/
-ms-transform: scale(1.2); /*IE9*/
-o-transform: scale(1.2); /*Opera*/
}
这里在说说scale的其他用法,单单只有scale默认是2D转换的,想要3D转换呢,换成scale3d即可,用法一样。
官方的定义是scale(X,Y),意思是X轴和Y轴分别缩放的倍数,上面的例子是缩写的形式。
代码写到这里基本已经完成了标题所表示的功能,但是细心的同学会觉得,这样的效果显得过于突然,图片弹出的比较突兀,那么怎么让变化不那么突然呢?CSS3为我们提供了另外一个函数:transition-duration,默认的单位是秒并且允许小数。它的定义是过度效果需要花费的时间。喜欢专研的小伙伴可以参考http://www.w3school.com.cn/css3/css3_transition.asp
那么添加上之后,代码如下:
.content img {
width: 450px;
height: 301px;
transition-duration:0.5s; /*过度的时间为0,5秒*/
}
在页面浏览的时候,图片变大就不显得那么突兀和突然,并且动画效果更人性化。
最后我们再考虑一种情况,如果一个页面很复杂,要表达的信息非常多,按照上面的代码显示就会无意的遮挡住其他的图片或者文字,所以这个地方,需要继续优化一下,让图片放大,但是图片的边界不放大,防止页面中不必要的遮挡。这里用到一个重要的属性:overflow。最后将完整的外码列出如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中心点逐渐放大效果</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.content {
margin: 40px auto;
width: 450px;
height: 301px;
border:10px solid #808080;
overflow:hidden;
z-index:2;
}
.content img {
width: 450px;
height: 301px;
transition-duration:0.5s;
z-index:1;
}
.content img:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2); /*Safari 和 Chrome*/
-moz-transform: scale(1.2); /*Firefox*/
-ms-transform: scale(1.2); /*IE9*/
-o-transform: scale(1.2); /*Opera*/
}
</style>
</head>
<body>
<div class="content">
<img src="img/5.jpg" class="pic"/>
</div>
</body>
</html>
到这里就将CSS实现鼠标悬浮图片放大的效果了。
二、JQuery图片的放大
利用JQuery实现图片从中心向四周放大的效果的基本思路是:当鼠标悬停时,图片的高度和宽度更增加一定的像素,然后利用相对定位和绝对定位将图片控制向外扩散对应像素大小,最后利用animate属性实现动画效果即可。
jQuery animate() 方法用于创建自定义动画。语法:$(selector).animate({params},speed,callback);params参数定义形成动画的CSS属性并且它是必须的。speed参数规定效果的时长,它是后面的这个属性都是可选的,可以取以下值:"slow"、"fast" 或毫秒。callback 参数是动画完成后所执行的函数名称。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中心点逐渐放大效果</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.content {
margin: 40px auto;
width: 450px;
height: 301px;
position: relative;
z-index: 1000;
overflow: hidden;
border: 10px solid #808080;
}
.content img {
position: absolute;
width: 450px;
height: 301px;
top: 0;
left: 0;
cursor: pointer;
z-index: 100;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
var w = $(".pic").width();
var h = $(".pic").height();
var w2 = w + 20;
var h2 = h + 20; $(".pic").hover(function () {
$(this).stop().animate({ height: h2, width: w2, left: "-10px", top: "-10px" }, 400);
}, function () {
$(this).stop().animate({ height: h, width: w, left: "0px", top: "0px" }, 400);
});
});
</script>
</head>
<body>
<div class="content">
<img src="img/5.jpg" class="pic" />
</div>
</body>
</html>
以上代码就完成了同样的效果。
这里重点提一下:stop()的作用。因为图片变大都是有执行时间的,所以在用户快速的将鼠标不断的移入和移出时,会照成图片将所有的移入和移出的执行时间都执行完之后,图片才会停下来,这就给用户体验带来不好的影响。添加stop()之后,鼠标再次移入之前,会将上一次为执行完的时间立即执行掉,不会影响下一次鼠标移入地动画展示效果。
综合以上两种方法,个人觉得各有优缺点,CSS3为我们封装好了,使用起来了方便,代码量很少。jQuery呢,更能准确的把握图片放大的像素等,对页面的控制更方便。
欢迎各位针对技术上的问题共同交流,敬请留言。
浅谈CSS和JQuery实现鼠标悬浮图片放大效果的更多相关文章
- jQuery实现鼠标经过图片变亮效果
在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 头条PC端的鼠标经过图片放大效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
随机推荐
- Mask RCNN 简单使用
涉及到的知识点补充: FasterRCNN:https://www.cnblogs.com/wangyong/p/8513563.html RoIPooling.RoIAlign:https://ww ...
- 用NDK调用第三方库
用NDK调用第三方库遇到不少坑,总结一下. 1.添加JNI目录 参考: http://www.cnblogs.com/lanqie/p/7442668.html 2.文件介绍: 其中:JniFacto ...
- linux 中的 open() read() write() close() 函数
1. open()函数 功能描述:用于打开或创建文件,在打开或创建文件时可以指定文件的属性及用户的权限等各种参数. 所需头文件:#include <sys/types.h>,#includ ...
- jquery筛选数组之grep、each、inArray、map的用法及遍历son对象(转)
grep [传入的参数为返回bool类型的函数] <script type='text/javascript' src="/jquery.js"></script ...
- 【逆向笔记】OD工具使用-逆向TraceMe.exe
名词注释 System breakpoint:系统断点,OllyDbg用CreateProcessA加载DEBUG_ONLY_THIS_PROCESS参数执行,程序运行之后会触发一个INT13,在系统 ...
- hdfs haadmin命令
HA集群启动后,我们可以通过一些指令来管理HDFS集群."bin/hdfs haadmin -DFSHAAdmin"指令,其可选参数: 1.-transitionToActive ...
- linux新内核的freeze框架以及意义【转】
转自:https://blog.csdn.net/dog250/article/details/5303442 linux的电源管理发展非常迅速,比如在挂起到内存的时候,系统会冻结住所有的进程,也就是 ...
- mysql分组排序取最大值所在行,类似hive中row_number() over partition by
如下图, 计划实现 :按照 parent_code 分组, 取组中code最大值所在的整条记录,如红色部分.(类似hive中: row_number() over(partition by)) sel ...
- javaMelody监控javaWeb程序性能
JavaMelody应用监控使用指南 原文:<JavaMelody应用监控使用指南> 前言 本文参考JavaMelody的UserGuide编写,部分文字均来自文档,添加有个人理解.并进行 ...
- Myeclipse10.7安装git插件并将Java项目上传到码云(github)
注:本文来源:外匹夫的<Myeclipse10.7安装git插件并将Java项目上传到码云(github)> 一.先说说安装egit插件的步骤(安装egit不成功的原因主要是下载的egit ...