jQuery实现文字环绕图片的布局效果

　　自从网站改版为软件下载站后，烈火网（现在叫最火软件站）就很久没有给大家发布过网页特效了，今天有时间来补一课《jQuery实现文字环绕图片的布局效果》，这里说的文字环绕又叫画中画效果（之前有一个例子），今天的例子则不同，因为引入了jQuery框架，欢迎大家共同学习。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，最火软件特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html><br /> <html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /> <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.js"></script><br /> <title>jQuery文字环绕图片 - 最火软件站</title><br /> <style><br /> html,body{<br /> line-height:20px;<br /> }<br /> .img{<br /> background:url("http://www.veryhuo.com/uploads/common/images/veryhuo.com_xiao.jpg");<br /> width:300px;<br /> height:200px;<br /> position:absolute;<br /> left:270px;<br /> top:210px;<br /> /* border:1px solid #ccc;*/<br /> }<br /> .m1{<br /> width:840px;<br /> height:200px;<br /> overflow:hidden;<br /> }<br /> .m2{<br /> width:260px;<br /> height:230px;<br /> position:absolute;<br /> left:0px;<br /> top:200px;<br /> overflow:hidden;<br /> }<br /> .m3{<br /> width:260px;<br /> height:230px;<br /> position:absolute;<br /> left:580px;<br /> top:200px;<br /> }<br /> .m4{<br /> position:absolute;<br /> left:0px;<br /> top:422px;<br /> width:840px;<br /> height:200px<br /> }<br /> .lbl{<br /> width:840px;<br /> position:relative;<br /> clear:both;<br /> }<br /> .c{<br /> display:none;<br /> }<br /> p{<br /> padding:0px;<br /> margin:0px;<br /> }<br /> </style><br /> </head><br /> <div class="lbl clearx"><br /> <div class="m1 clearx"></div><br /> <div class="m2 clearx"></div><br /> <div class="m3 clearx"></div><br /> <div class="m4 clearx"></div><br /> <div class="img"></div><br /> </div><br /> <div class="c"><br /> 最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。最火软件站致力于提供免费软件下载，同时还有电脑教程、网页制作特效，这里给大家演示《文字环绕图片的布局效果》，欢迎大家学习哦。<br /> </div><br /> <body><br /> </body><br /> <script type="text/javascript"><br /> var c = $(".c").html();<br /> var length = 5<br /> for(var k = 1; k < length; k++){<br /> c = set(c,k,length - 1 == k);<br /> }<br /> function set(value,index,flg){<br /> var val = "";<br /> var v = null;<br /> var element = $(".m" + index);<br /> element.html("<p>" + value + "</p>");<br /> var element2 = element.find("p");<br /> if(flg){<br /> return"";<br /> }<br /> while(element.height() < element2.height()){<br /> v = element2.html();<br /> v = v.substring(0,v.length - 1);<br /> element2.html(v);<br /> }<br /> val = value.replace(new RegExp("^" + v),"");<br /> return val;<br /> }<br /> </script><br /> </html><br /> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

热点

jQuery实现文字环绕图片的布局效果

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

jQuery实现文字环绕图片的布局效果

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展