Java SSH 项目总结——JS实现图片悬浮

前言

先说下要实现什么功能,页面上有图片,当鼠标移动到图片上时,图片呈放大悬浮的效果.试验了几种方法,比如用鼠标事件控制div中图片的显示和隐藏，还有其它方法，最后采用了开源的JS来实现图片的悬浮效果。

效果

先看下效果图，当鼠标移动到图片上时，图片就会放大悬浮到页面中间，鼠标移走时，图片就会从悬浮的页面中间消失，页面上原有的样式也不会有任何改变。

Java SSH 项目小结——JS实现图片悬浮

实现

看完效果图，我们来看下实现过程：

<span style="font-family:KaiTi_GB2312;">//引用js和css文件
<head>
<link rel="stylesheet" type="text/css" href="css/default.include.b2676e.css" media="all" />
<script type="text/javascript" src="js/default.include.c78d4e.js"></script>
<script type="text/javascript" src="js/async-share.js?ver=3.5.2"></script>
<script type="text/javascript" src="js/default.include-footer.304291.js"></script>
</head>

<body >

				//页面图片
				<div id="sit-simple-demo">
					<a class="sit-preview" href="images/cat.jpg">
					<img alt="" src="images/cat-small.jpg" data-preview-url="images/cat-big.jpg" /></a>
					<a class="sit-preview" href="images/bumbleebee.jpg">
					<img alt="" src="images/bumbleebee-small.jpg" data-preview-url="images/bumbleebee-big.jpg" /></a>
					<a class="sit-preview" href="images/corals.jpg">
					<img alt="" src="images/corals-small.jpg" data-preview-url="images/corals-big.jpg" /></a>
					<a class="sit-preview" href="images/flower.jpg">
					<img alt="" src="images/flower-small.jpg" data-preview-url="images/flower-big.jpg" /></a>
					<a class="sit-preview" href="images/kittens.jpg">
					<img alt="" src="images/kittens-small.jpg" data-preview-url="images/kittens-big.jpg" /></a>
				</div>
			
		
	//js控制
	<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#sit-simple-demo .sit-preview").smartImageTooltip({previewTemplate: "simple", imageWidth: "480px"});
        jQuery("#sit-caption-demo .sit-preview").smartImageTooltip({previewTemplate: "caption", scaleDesktop: 70, scaleMobile: 55});
        jQuery("#sit-envato-demo .sit-preview").smartImageTooltip({previewTemplate: "envato", imageWidth: "500px"});
        jQuery("#sit-envato-link-demo .sit-preview").smartImageTooltip({previewTemplate: "envato"});
        jQuery("#sit-nolink-demo img.sit-small").smartImageTooltip({previewTemplate: "caption", imageWidth: "480px"});
    });
</script>
</body>

</html></span>

这只是实现图片悬浮的一个demo，在demo中同样的图片其实是两张，一张是大图、一张是小图，其实一张图片也可以实现，只要我们设置图片的大小即可，如果我们项目中需要使用的话，只需要加载相应的图片即可。

关于js的代码的书写，这里只是设置了悬浮效果显示的位置和图片大小，而悬浮效果的具体实现是在相应的js中。

小结

我们想实现某一个功能时，方法一定会有很多种。我们要学会站在巨人的肩膀上，没有必要说我们自己也一定要去封装这么一套js来实现各种各样的功能，站在巨人的肩膀上，更加方便和快捷的来实现我们的功能。

3楼u010121883昨天 19:36: 如果改变图片的大小会不会影响图片的清晰度呀！

2楼tang_huan_11昨天 19:34: 站在巨人的肩膀上，更加方便和快捷的来实现我们的功能。

1楼dingding_12345昨天 17:23: 用一张照片加载速度是否更快。

Java SSH 项目小结——JS实现图片悬浮

前言

效果

实现

小结

相关推荐