<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link href="s_common.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<style type="text/css">
#k_img_ul{ float:left; width:1000px; padding:18px 0 0 0; }/*通过这个ul来控制这个部分与外部的距离*/
#k_img_ul li{ float:left; width:64px; padding:0 5px; text-align:center;}
#k_img_ul li span{ width:60px; height:120px;
padding:2px; display:block; border:1px solid #ccc; }/*如果不带边框可以不要这个span*/
#k_img_ul li span a{ display:block; width:60px; height:120px;
overflow:hidden; }/*重点是红色部分*/
#k_img_ul p{ height:24px; line-height:24px;}
</style>
</head>
<body>
<ul id="k_img_ul">
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="new.jpg" id="another" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="na.jpg" id="im" /></a></span><p>king</p></li>
<li><span><a href="#"><img src="5.jpg" /></a></span><p>king</p></li>
<br class="clear" />
</ul>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
//长宽任意设定
function makeMid(className,width,height){//参数为要对其进行操作的图片元素，设定的高度，设定的宽度
var h=className.height();//图片原本的高度
var w=className.width();//图片原本的宽度
// alert("h:"+h+"w:"+w);
if((h<height)&&(w>width))//图片原本高度小于定值，而宽度大于定值
{
var marginT=Math.round(height/2-h/2);
marginT=marginT+"px 0 0 0";
className.css({width:width,height:h,margin:marginT
});//这种情况下宽度为指定宽度
return;
}
else if((h<height)&&(w<width))//图片原本的宽高均小于定值
{
var marginTT=Math.round(height/2-h/2);
marginTT=marginTT+"px 0 0 0";
className.css({width:w
,height:h,margin:marginTT});//当宽高均小于定宽时，宽度为原图片宽度
return;
}
}
window.onload=function(){
$("#k_img_ul>li>span>a>img
").each
(function(){//这里要注意要把元素层级写明，一个也不能少还有就是each相当于循环的功能
makeMid($(this),Number(60),Number(120));
});
}
});
</script>
效果图如下：
分享到：
相关推荐
3.5.1 图片的边框 3.5.2 图文混排 3.6 CSS设置页面背景 3.6.2 背景图片 3.6.3 背景图的重复 3.6.4 背景样式综合设置 3.7 CSS设置超链接效果 3.8 CSS制作实用菜单 3.8.1 项目列表 3.8.2...
3.5.1 图片的边框 3.5.2 图文混排 3.6 CSS设置页面背景 3.6.2 背景图片 3.6.3 背景图的重复 3.6.4 背景样式综合设置 3.7 CSS设置超链接效果 3.8 CSS制作实用菜单 3.8.1 项目列表 ...
轻量级图文混排 , 实现图片文字混排 , 可显示常规链接比如网址,@,话题等 , 可以自定义链接字,设置关键字高亮等功能 . 适用于微博,微信,IM聊天对话等场景 . 仅需几百行代码
3、概念车系：图文混排、动画载入、概念车详情介绍 4、创新科技：启迪未来、创新体验、创新未来、虚拟现实 5、名车俱乐部功能 6、年度评估功能：用户评价、品牌排行、用户喜好、调研品牌专区、车辆相关配置介绍 7、...
jQuery图文混排tab选项卡 jQuery图文混排tab选项卡网页特效.zip
用CSS实现图文混排 图片，文字，混排，CSS， img， font，下载，.rar
jQuery适于餐饮网站的图片切换和图文混排特效，可用于网站尾部的关于我们，联系方式，产品图片等，在左侧有菜单导航，RestaurantTemplate 可以分组图片，带导航效果。效果截图如上所示。
4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例：八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...
文字排版，特别是在Pad上，由于屏幕大，所以经常会用到图文混排的方式。该项目就是基于Android开发的非html实现的图文混排。注释详细，一看就懂！
android 文字图片混排，在一个TextView中显示文字穿插图片，文字变色效果
Delphi源码支持图片文字混排的jvrichedit..rar
在TextView中要显示HTML文字是比较轻松的事，但是在其中混上网络图片就变的复杂了起来。本文通过重写getDrawable方法得到drawable实现图文混排效果!
CSS文章列表滑动门混排、文字、滚动效果
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
图文轮播(js+css+html) 左右滚动的代码内容层中可以填写任何内容
第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.2 使用CSS控制页面 1.3 体验CSS 第2章 CSS的基本语法 2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承 第3章 用...
4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例：八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...
4.2.1 横向对齐方式 4.2.2 纵向对齐方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置图片与文字间距 4.4 图文实例：八仙过海 第5章 用CSS设置网页中的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...