当前位置 CSS模版园 >> 酷炫特效 >> css3/jquery图片放大镜动画效果

css3/jquery图片放大镜动画效果

css3/jquery图片放大镜动画效果

jquery.smoothproducts.js插件,直接支持在原始图片位置上放大图片,

而不是像其他的普通的放大镜效果那样另外在旁边开辟一个新的位置

使用方式非常简单,首先引入css和js文件

html代码:

<div class="page">
	<div class="sp-loading"><img src="images/loading.gif" /><br>加载中...</div>
	<div class="sp-wrap">
		<a href="images/1.jpg"><img src="images/1_tb.jpg" /></a>
		<a href="images/2.jpg"><img src="images/2_tb.jpg" /></a>
		<a href="images/3.jpg"><img src="images/3_tb.jpg" /></a>
		<a href="images/4.jpg"><img src="images/4_tb.jpg" /></a>
		<a href="images/5.jpg"><img src="images/5_tb.jpg" /></a>
		<a href="images/6.jpg"><img src="images/6_tb.jpg" /></a>
	</div>
</div>

js加载:

<script src="js/jquery.min.js"></script>
<script src="js/smoothproducts.min.js"></script>
<script>
/* wait for images to load */
$(window).load(function() {
	$('.sp-wrap').smoothproducts();
});
</script>

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-35.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)