鼠标悬浮图片放大特效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标悬浮图片放大特效</title><link rel="stylesheet" type="text/css" href="../../style/reset.css"><link rel="stylesheet" type="text/css" href="../../style/font-awesome.min.css"><script type="text/javascript" src="../../scripts/jquery-3.2.1.min.js"></script><style type="text/css"> #gallery{width: 1600px;margin: 100px auto;}#gallery>ul>li{width: 380px;height: 230px;float: left;margin: 0 10px;/*父元素相对定位*/position: relative;}#gallery>ul>li>a>img{width: 380px;height: 230px;z-index: 1;/*子元素绝对定位*/position: absolute;}#gallery>ul>li>a>img:hover{/*堆叠层级高于之前*/z-index: 2;}h1{clear:both;}</style>
</head>
<body><!--实现鼠标悬浮图片放大特效-->
<div id="gallery"><ul><li><a href="../../images/bvdk.jpg" class="tooltip" title="办公场景一"><img src="../../images/bvdk.jpg"/></a></li><li><a href="../../images/bxbt.jpg" class="tooltip" title="办公场景二"><img src="../../images/bxbt.jpg"/></a></li><li><a href="../../images/bxctr.jpg" class="tooltip" title="办公场景三"><img src="../../images/bxctr.jpg"/></a></li><li><a href="../../images/bxetc.jpg" class="tooltip" title="办公场景四"><img src="../../images/bxetc.jpg"/></a></li></ul>
</div><script type="text/javascript">/*注意 坑2018-6-111.不宜使用 mouseover()和mouseout()方法2.stop()方法阻止了动画叠加行为3.z-index千万别写在动画里面，堆叠顺序一定要写正确4.margin值的计算方法为(430-380)/2和(280-230)/25.要正确使用position定位*/$(function(){$("#gallery>ul>li>a>img").mouseenter(function(){$(this).stop().animate({"width":"430px","height":"280px","margin":"-25px"},200);}).mouseleave(function(){$(this).stop().animate({"width":"380px","height":"230px","margin":"0"});});});
</script></body>
</html>

鼠标悬浮图片放大特效相关推荐

html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟鼠标悬浮图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果代码结构 1. 引入CSS 2. HTML代码 va ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers";table.render({ ...
js实现鼠标悬浮图片放大预览
先上效果图: 鼠标悬浮直接大图浮现! 首先css代码: .big {overflow: hidden;display: none;position: absolute;top: 100px;left: ...
CSS鼠标悬浮图片放大效果
当鼠标移入图片时,图片变大.父容器宽高不变. 效果: 鼠标移入前: 鼠标移入后: 代码:
查看商品图片，鼠标悬浮图片放大js实现
2010-06-07 10:18:46|分类:Javascript|字号订阅 <%@pagelanguage="java"import="java.util.*&q ...
js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
用JS写出JS事件中京东图片放大特效
图片放大特效准备两张相同的图片,小图和大图. 小图显示在商品的展示区域. 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域. 编写HTML页面,展示小图.隐藏鼠标的遮罩及大图. 当鼠标在小图 ...
91 案例——图片放大特效
文章目录 1.HTML页面 2.显示与隐藏"遮罩"和"局部放大图" 3.遮罩的移动 4.限定遮罩的移动范围 5.按照比例移动大图在网站中,经常可以看到商品详情 ...

鼠标悬浮图片放大特效

鼠标悬浮图片放大特效相关推荐

最新文章

热门文章