这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示:
HTML结构部分:
先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径。
2 |
<li><a href= "http://stylechen.com/" class = "smallimage" rel= "images/001_big.jpg" ><img src= "images/001_small.jpg" alt= "" ></a></li> |
4 |
<li><a href= "http://stylechen.com/" class = "smallimage" rel= "images/002_big.jpg" ><img src= "images/002_small.jpg" alt= "" ></a></li> |
6 |
<li><a href= "http://stylechen.com/" class = "smallimage" rel= "images/003_big.jpg" ><img src= "images/003_small.jpg" alt= "" ></a></li> |
CSS样式表部分:
bigimage是用jQuery创建的一个p标签的id,用来存放大图片,设置其样式为绝对定位,并先隐藏。给a标签添加一个黑色的背景,是为了给图片变暗的效果做铺垫。就这样,一个简单的相册效果就做好了。
1 |
ul#gallery { list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; } |
3 |
ul#gallery li { width:200px; height:200px; float :left; margin:20px 20px 20px 0; } |
5 |
ul#gallery li a.smallimage { background:#333; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; width:200px; height:200px; } |
7 |
#bigimage { position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ } |
9 |
#bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; } |
jQuery代码部分:
先声明2个变量x,y用来存放大图片离鼠标的距离。在body中追加一个id为bigimage的p标签,用来存放大图片,大图片的路径就包含在了a标签的rel属性中。当鼠标在小图片悬停的时候,将获取到的鼠标在浏览器中的坐标赋值给大图片绝对定位的坐标,并以淡入的效果显示。之后,再给小图片绑定一个mousemove事件,也就是当鼠标移动的时候,大图片就会跟着鼠标移动了。看以下的代码:
02 |
<script type= "text/javascript" > |
09 |
$( "a.smallimage" ).hover(function(e){ //绑定一个鼠标悬停时事件 |
10 |
//新建一个p标签来存放大图片,this.rel就是获取到a标签的大图片的路径,然后追加到body中 |
11 |
$( "body" ).append( "<p id=" bigimage "><img src=" " this.rel " " alt=" " /></p>" ); |
13 |
//改变小图片的透明度为0.5,结合上面的CSS,看起来就象是图片变暗了 |
14 |
$( this ).find( "img" ).stop().fadeTo( "slow" ,0.5); |
16 |
//将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,然后以fadeIn的效果显示 |
17 |
$( "#bigimage" ).css({top:(e.pageY - y ) "px" ,left:(e.pageX x ) "px" }).fadeIn( "fast" ); |
22 |
$( this ).find( "img" ).stop().fadeTo( "slow" ,1); |
25 |
$( "#bigimage" ).remove(); |
28 |
$( "a.smallimage" ).mousemove(function(e){ //绑定一个鼠标移动的事件 |
30 |
//将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,这样大图片就能跟随图片而移动了 |
31 |
$( "#bigimage" ).css({top:(e.pageY -y ) "px" ,left:(e.pageX x ) "px" }); |
到这一步,效果已经差不多了,但是正如蓝秋枫同志提到的,效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条,这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。
先分析下思路,默认情况下,弹出的大图片的位置始终是在当前鼠标指针的右侧,如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时,就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度,然后再根据这个判断来显示。
有了上面的思路就好办了,为了使代码更简洁,提高复用性,我新增了一个widthJudge函数用于判断宽度:
01 |
function widthJudge(e){ |
02 |
//页面的总宽度减去鼠标当前的X坐标得到右侧边界的宽度 |
03 |
var marginRight = document.documentElement.clientWidth - e.pageX; |
06 |
var imageWidth = $( "#bigimage" ).width(); |
08 |
//如果右侧边界的宽度小于弹出的大图片的宽度 |
09 |
if (marginRight < imageWidth) |
14 |
//此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值 |
15 |
$( "#bigimage" ).css({top:(e.pageY - y ) "px" ,left:(e.pageX - x ) "px" }); |
17 |
//仍将x定义为22,这一步千万不能省略,因为之前x的值已经改变 |
20 |
//如果右侧的宽度值够显示大图片,将仍然按照原来的位置显示 |
21 |
$( "#bigimage" ).css({top:(e.pageY - y ) "px" ,left:(e.pageX x ) "px" }); |
最后再结合上面的代码,完整的jQuery代码部分如下:
01 |
<script type= "text/javascript" > |
08 |
$( "a.smallimage" ).hover(function(e){ |
09 |
$( "body" ).append( "<p id=" bigimage "><img src=" " this.rel " " alt=" " /></p>" ); |
10 |
$( this ).find( "img" ).stop().fadeTo( "slow" ,0.5); |
11 |
widthJudge(e); //调用宽度判断函数 |
12 |
$( "#bigimage" ).fadeIn( "fast" ); |
14 |
$( this ).find( "img" ).stop().fadeTo( "slow" ,1); |
15 |
$( "#bigimage" ).remove(); |
18 |
$( "a.smallimage" ).mousemove(function(e){ |
19 |
widthJudge(e); //调用宽度判断函数 |
22 |
function widthJudge(e){ |
23 |
var marginRight = document.documentElement.clientWidth - e.pageX; |
24 |
var imageWidth = $( "#bigimage" ).width(); |
25 |
if (marginRight < imageWidth) |
28 |
$( "#bigimage" ).css({top:(e.pageY - y ) "px" ,left:(e.pageX - x ) "px" }); |
31 |
$( "#bigimage" ).css({top:(e.pageY - y ) "px" ,left:(e.pageX x ) "px" }); |
解决了图片溢出浏览器的问题,这个效果还算不错了。如果你喜欢这个效果,你可以下载源文件。
- jQuery的鼠标悬停时放大图片的效果
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮
- 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 基于jQuery向下弹出遮罩图片相册
今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可
在前端循环中使用鼠标悬停事件 <div class="message-widget contact-widget"> <!-- Message --> {% ...
- 基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- Java入门到实践系列(2)——Java环境搭建
一.上集回顾 在<Java入门到实践系列(1)--Java简介>中提到过,Java程序是运行在Java虚拟机的,也展示过下面这张图. JDK:Java程序开发工具包. JRE:Java运行 ...
- C#LeetCode刷题之#28-实现strStr()(Implement strStr())
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3895 访问. 实现 strStr() 函数. 给定一个 hays ...
- java实现一个简单的爬虫小程序
前言 前些天无意间在百度搜索了一下以前写过的博客 我啥时候在这么多不知名的网站上发表博客了???点进去一看, 内容一模一样,作者却不是我... 然后又去搜了其他篇博客,果然,基本上每篇都在别的网站上有 ...
- 手动向Maven本地仓库添加ORACLE ojdbc6jar包
第一步: 把你的oracle中的ojdbc6.jar复制放到D盘首目录 这是我的D:\oracle\product\11.2.0\dbhome_1\jdbc\ D:ojdbc6.jar 但是Maven ...
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- IDEA_Shelve代码搁置与恢复
日常开发中,经常会遇到在当前分支开发到一半,但是需要Checkout上个版本解决bug或调查问题的情况.这个时候,我们是将代码提到Push远程?还是直接Rollback? 最理想的做法,就是将当前的开 ...
- ubuntu apt-mirror 同步源到本地
1.下载 apt-mirror apt-get install apt-mirror 2.修改配置 root@wangjq:/wangjq# cat /etc/apt/mirror.list##### ...
- 牛客网PAT练习场-个位数的统计
思路:每接受一个字符,便统计一次即可 题目地址:https://www.nowcoder.com/questionTerminal/a2063993dd424f9cba8246a3cf8ef445 # ...
- Spark-shell 报错:Failed to get database default, returning NoSuchObjectException
Spark-shell 执行sql查询报错: 20/08/24 15:33:59 WARN metastore.ObjectStore: Failed to get database default, ...
- 区块链入门到实战(32)之Solidity – 代码注释
Solidity 支持c风格和c++风格的注释. //之后到行尾的文本,都被看作注释,编译器忽略此内容 /* 与 */ 之间的文本被看作注释, 编译器忽略此内容 示例 注释示例. function g ...