jQSlickWrap文字环绕图像技术

最新推荐文章于 2021-09-04 09:33:56 发布

原创最新推荐文章于 2021-09-04 09:33:56 发布 · 690 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用jQuery及deck.js实现演讲稿中图片和文字的动态排版效果，通过实例代码展示了如何加载jQuery库文件并利用jQuery插件slickWrap进行图文混排。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery学习网站： http://www.jq-school.com/

deckJs演讲稿： http://marujun.github.com/deckJs/slickwrape/slickwrape.html

主页面代码：

<html>
<head>
   <title>EGG</title>
   <meta charset="UTF-8">
   <link  href="jquery/index.css"type="text/css"rel="stylesheet">
   <script type="text/javascript"src="jquery/jquery-1.7.2.js"></script>
   <script src="jquery/jquery.slickwrap.js"type="text/javascript"></script><!-- 图像处理Js文件 -->
   <style type="text/css">
       .wrapReady{
         float:left;/*控制图像悬浮在文字左侧（右侧right）*/
          padding:25px;/*控制图像顶端文字*/
       }
   </style>
   <script type="text/javascript"charset="UTF-8">
      $(document).ready(function(){
          $('.wrapReady').slickWrap();
       });
   </script>
</head>
<body>
<table align ="center"width="80%" >
   <tr>
       <td align="center">
<h1 align="center">行为驱动开发</h1>
<div><!--要排版的图像和文字-->
<img src="zolotoe_yajco_gold_eggs.png" class="wrapReady"/>
<p>......若干文字</p>
<p>.......若干文字</p>
</div>
</td>
</tr>
</table>
</body>
</html>

相关技术链接： jQSlickWrap jquery.slickwrap.js jquery-1.7.2.js

效果图：