JS+CSS实现多张图片缩略预览效果 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Mar 12

JS+CSS实现多张图片缩略预览效果 不指定

tommyhu , 19:53 , 大前端 » CSS3 , Comments(1) , Trackbacks(0) , Reads(10949) , Via Original Large | Medium | Small
JS+CSS实现多张图片缩略预览效果,实现类似诸多购物网站产品图片预览的效果,推荐星级三星,要的下载了,解压密码:tommyhu.cn
Highslide JS

CSS常用小技巧:
1、使用border-collapse实现表格单线边框

<table width="300" border="1" cellpadding="0"
cellspacing="0" bordercolor="#FF0000"
  style="border-collapse:collapse;">

2、css自动截取字符串

<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
<div class="test">DIV+CSS模板、后台模板、图片图标下载,
CSS代码实例、CSS导航菜单、CSS图表,这后面的将省略为……显示
</div>

2、div浮于select之上的完美解决方案

<style type="text/css">
body { margin: 0; padding: 0; text-align: center;
background-color: #eee; }
#bd { margin: 20px auto;padding: 5px 20px 20px;
border:1px solid #bbb width:600px;background-color:#9CCE2E;}
#popup {width: 300px;height: 132px;padding: 10px;
position: absolute;left:443px;top:15px;border:1px solid blue;
background-color: #fff;filter:alpha(opacity=60);
opacity:0.4;}
#popup iframe{display:none;
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  filter:mask();
  width:3000px;
  height:3000px;}
</style>
<div id="bd">
  <h1>让div浮于select之上的完美解决方案</h1>
  <h3>www.865171.cn</h3>
  <div class="parameter">
    <label for="ddTest">下拉框</label>
    <select id="ddTest">
      <option>选项1</option>
      <option>选项2</option>
    </select>
  </div>
</div>
<div id="popup">让div浮于select之上的完美解决方案
  <!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>


▲返回顶部
Last modified by tommyhu on2010/03/12 20:07

互联网开发网友 Email Homepage
2012/02/21 16:20
男人,总是笑容满面,两眼放电,不是发病犯贱,就是坑蒙拐骗!女人丰胸细腰,放荡风骚,不是掏你腰包,就是放你黑刀!这年月男怪女妖,小心中招啊!
Pages: 1/1 First page 1 Final page
Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot