jQuery的鼠标悬停时放大图片的效果
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示:
HTML结构部分:
先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径。
<UL id=gallery sizcache="6" sizset="7"> <LI sizcache="6" sizset="7"><A class="smallimage" href="http://stylechen.com/" rel=images/001_big.jpg><IMG alt="" src="data:images/001_small.jpg"></A> <LI sizcache="6" sizset="8"><A class="smallimage" href="http://stylechen.com/" rel=images/002_big.jpg><IMG alt="" src="data:images/002_small.jpg"></A> <LI sizcache="6" sizset="9"><A class="smallimage" href="http://stylechen.com/" rel=images/003_big.jpg><IMG alt="" src="data:images/003_small.jpg"></A> </LI></UL>
CSS样式表部分:
bigimage是用jQuery创建的一个p标签的id,用来存放大图片,设置其样式为绝对定位,并先隐藏。给a标签添加一个黑色的背景,是为了给图片变暗的效果做铺垫。就这样,一个简单的相册效果就做好了。
ul#gallery { list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; } ul#gallery li { width:200px; height:200px; float:left; margin:20px 20px 20px 0; } ul#gallery li a.smallimage { background:#333; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; width:200px; height:200px; } #bigimage { position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ } #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事件,也就是当鼠标移动的时候,大图片就会跟着鼠标移动了。看以下的代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 22; var y = 20; $("a.smallimage").hover(function(e){ //绑定一个鼠标悬停时事件 //新建一个p标签来存放大图片,this.rel就是获取到a标签的大图片的路径,然后追加到body中 $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>'); //改变小图片的透明度为0.5,结合上面的CSS,看起来就象是图片变暗了 $(this).find('img').stop().fadeTo('slow',0.5); //将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,然后以fadeIn的效果显示 $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}).fadeIn('fast'); },function(){ //鼠标离开后 //将变暗的图片复原 $(this).find('img').stop().fadeTo('slow',1); //移除新增的p标签 $("#bigimage").remove(); }); $("a.smallimage").mousemove(function(e){ //绑定一个鼠标移动的事件 //将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,这样大图片就能跟随图片而移动了 $("#bigimage").css({top:(e.pageY -y ) + 'px',left:(e.pageX + x ) + 'px'}); }); }); //]]> </script>
到这一步,效果已经差不多了,但是正如蓝秋枫同志提到的,效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条,这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。
先分析下思路,默认情况下,弹出的大图片的位置始终是在当前鼠标指针的右侧,如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时,就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度,然后再根据这个判断来显示。
有了上面的思路就好办了,为了使代码更简洁,提高复用性,我新增了一个widthJudge函数用于判断宽度:
function widthJudge(e){ //页面的总宽度减去鼠标当前的X坐标得到右侧边界的宽度 var marginRight = document.documentElement.clientWidth - e.pageX; //获取弹出的大图片的宽度 var imageWidth = $("#bigimage").width(); //如果右侧边界的宽度小于弹出的大图片的宽度 if(marginRight < imageWidth) { //重新计算变量x的值 x = imageWidth + 22; //此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值 $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'}); }else{ //否则 //仍将x定义为22,这一步千万不能省略,因为之前x的值已经改变 x = 22; //如果右侧的宽度值够显示大图片,将仍然按照原来的位置显示 $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}); }; }
最后再结合上面的代码,完整的jQuery代码部分如下:
<script type="text/javascript"> //<![CDATA[ $(function(){ var x = 22; var y = 20; $("a.smallimage").hover(function(e){ $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>'); $(this).find('img').stop().fadeTo('slow',0.5); widthJudge(e); //调用宽度判断函数 $("#bigimage").fadeIn('fast'); },function(){ $(this).find('img').stop().fadeTo('slow',1); $("#bigimage").remove(); }); $("a.smallimage").mousemove(function(e){ widthJudge(e); //调用宽度判断函数 }); function widthJudge(e){ var marginRight = document.documentElement.clientWidth - e.pageX; var imageWidth = $("#bigimage").width(); if(marginRight < imageWidth) { x = imageWidth + 22; $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'}); }else{ x = 22; $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}); }; } }); //]]> </script>
解决了图片溢出浏览器的问题,这个效果还算不错了。如果你喜欢这个效果,你可以下载源文件。
jQuery的鼠标悬停时放大图片的效果的更多相关文章
- 基于jQuery的鼠标悬停时放大图片的效果制作
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...
- 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
:hover所有主流浏览器都支持(IE6.0以下支持不好,以后再学习用Javascript来实现悬停效果) 这是一个绿色底白色Icon的搜索按钮
- 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 在循环中使用鼠标悬停时表示当前悬停选中,传入this关键字即可
在前端循环中使用鼠标悬停事件 <div class="message-widget contact-widget"> <!-- Message --> {% ...
- 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?
了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- CSS控制当鼠标滑过时更换图片的效果
鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- Unity UGUI在鼠标位置不同时 图片浮动效果
/// <summary> /// 在鼠标位置不同时 图片浮动效果 /// </summary> public class TiltWindow : MonoBehaviour ...
随机推荐
- Struts 框架
struts简介 Struts是Apache软件基金会(ASF)赞助的一个开源项目.它最初是jakarta项目中的一个子项目,并在2004年3月成为ASF的顶级项目.它通过采用JavaServlet/ ...
- python scrapy 插入数据库的操作
需要安装这个 pymysql 写法还是很简单的 # -*- coding: utf-8 -*- # Define your item pipelines here # # Don't forget t ...
- vue 父组件中的数据如何传递给子组件
父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...
- matlab 矩阵拼接
E=[a,b]%水平方向上的拼接 E=[a :b] %垂直方向上的拼接
- maven打包报错:Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.5:test
mvn package的时候报如下错误: Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.5:test ...
- appium的内存泄露问题
appium的一个内存泄露的问题 标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...
- MVC001之mvcpager简单分页
描述:用mvcpager实现简单分页功能 参考网址: http://www.cnblogs.com/iamlilinfeng/archive/2013/03/11/2951460.html http: ...
- Beef的使用
应用普遍转移到B/S架构,浏览器成为统一客户端程序 通过注入JS脚本,利用浏览器攻击其他网站 ruby编写 攻击手段 利用网站XSS漏洞实现攻击 诱使客户端访问含有hook的伪造站点 结合中间人攻击注 ...
- oracle学习--循环语句
oracle学习--循环语句 loop循环: create or replace procedure pro_test_loop is i number; begin i:=0; loop i:=i ...
- Javascript之基本类型和引用类型
ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值,基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 在将一个值赋给变量时,解析器必须确定这个值是基本 ...