【jquery插件】改zoom-info为flip-info

最新推荐文章于 2024-09-19 16:08:49 发布

luokebi24

最新推荐文章于 2024-09-19 16:08:49 发布

阅读量516

点赞数

分类专栏： jquery插件文章标签： jquery插件 class function float safari firefox

本文链接：https://blog.csdn.net/luokebi24/article/details/7545811

版权

本文介绍如何将使用jquery的zoom-info插件修改为flip-info效果，利用CSS3的transform 3d特性实现在Chrome, Safari和Firefox上的图片翻转展示信息。通过改造，减少了使用JavaScript实现相同效果的复杂度。" 135516469,7337247,利用BERT和Hugging Face进行语义相似度实战,"['自然语言处理', '深度学习', 'BERT模型', 'Python', '语义相似度计算']

摘要由CSDN通过智能技术生成

前几天看到zoom-info这个jquery插件觉得很有创意，简单的几句就实现了这个效果，当时就使用了。效果很不错。后来在看css3的时候发现了翻转这个效果，需要用到transform 3d的东西，虽然说现在transform 3d的支持只有chrome ，safari和firefox,但是效果确实很好，以前用js实现这个效果恐怕这个代码量就大了。

于是就想到了把这个插件改一下，让原本的缩放效果变成翻转效果，翻转之后就可以看见这个图片的信息

HTML:

<div class="galleryContainer">

<div class="hover flipBox">

		<div class="frontImage">

			<img src="image/image01.jpg">

		</div>

		<div class="backInfo">

			<div class="pad">

				<h2>