web开发过程中经常会碰到内容区被客户上传的图片撑破的情况,高度还好说,主要是宽度了,如果直接将相机拍下的图片不经过任何处理直接传到网站上,也不规定图片宽度的情况下,网站的内容区域必然变形走样,下面我们就来看看如何在前台用jquery批量处理这些过宽的图片。
现在假设内容区div的 id="sitejs",即:
- <div id="sitejs"><?php echo $news['content'];?></div>
那么这个时候则可以在页面中加入如下代码:
- <script type="text/javascript" src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.1.min.js"></script>
- <script type="text/javascript">
- if($('#sitejs').length==1){
- var appropriate_width=720;/*设置内容区域的合适宽度值*/
- $('#sitejs img').each(function(){
- if(($(this).width()>appropriate_width)){
- $(this).css({'width':appropriate_width+'px','height':$(this).height()*appropriate_width/$(this).width()+'px'});
- $(this).attr('title','点击查看大图片').click(function(){
- window.open($(this).attr('src'));
- });
- }
- });
- }
- </script>
以上只是举例,具体根据自己的个人情况来调整了。
零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。