文章目录

jquery鼠标移上显示大图简单实例

在设计web页面的时候,经常会遇到需要图片放大的效果,就是鼠标移到小图上显示大图,鼠标移开大图又隐藏,一般是在产品预览的时候会用到。

这里我作用jquery的mouseover和mouseout,它们的功能分别是鼠标移上和鼠标移除。

今天小编分享一个非常简单的鼠标移上显示大图的实例。

html代码<p>jquery鼠标移上显示大图,鼠标移开大图隐藏。</p>
<div class="box">
	<img src="{source}img_lights.jpg" class="img" style="width:200px; height:123px;" />
</div>
javascript代码$(".img").mouseover(function(){
	var src=$(this).attr("src");
	$(this).parent().append('<img src="'+src+'" class="bigpic" />');
});
$(".img").mouseout(function(){
	$(this).parent().find(".bigpic").remove();
});
css代码.box{ position:relative;}
.box .bigpic{ position:absolute;}

查看实例

本文网址:http://www.santii.com/article/5.html


数据更新时间:2018-09-21