自适应图片大小

  • L0_224862
    了解作者
  • 623.8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-03 08:56
    上传日期
web前端开发,自适应图片大小!web前端开发,自适应图片大小!
自适应图片大小.zip
  • jiaoben18402
  • images
  • cur-left.cur.ico
    3.2KB
  • img_3.jpg
    115.4KB
  • cur-right.cur.ico
    3.2KB
  • img_5.jpg
    78.8KB
  • img_7.jpg
    127.8KB
  • img_1.jpg
    111.1KB
  • img_4.jpg
    149.1KB
  • 5-121204193956-50.gif
    9.2KB
  • index.html
    2.3KB
  • js
  • jquery.js
    90.4KB
  • zzsc.js
    1.1KB
  • 说明.htm
    4.2KB
内容介绍
<!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> <meta http-equiv="refresh" content="0;URL=http://www.sxcffl.com/"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery自适应图片大小 </title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/zzsc.js"></script> <style> html{overflow:-moz-scrollbars-vertical ; overflow:scroll; overflow-x:hidden; overflow-y:hidden;} /*图片太高时出现了右侧滚动条 滚动条会让ul宽度变化的效果看起来有点震动! 所以这里去掉*/ *{padding:0 ; margin:0 ;} ul{list-style:none;} body{background:#CCCCCC;} .container{width:100%; height:100%; margin-top:3%;} .content{background:#ffffff; margin:0 auto; position:relative; width:220px; height:100px; border: 15px solid #ffffff;} .content li{position:absolute; top:0; left:0; display:none;} .content span{position:absolute; left:47%; top:45%;} .content .left,.content .right{position:absolute; top:0; z-index:11;} .content .left{cursor:url(images/cur-left.cur.ico), auto; left:0;} .content .right{right:0; cursor:url(images/cur-right.cur.ico), auto;} .bottom{height:0px; background:#ffffff; margin:0 auto; overflow:hidden; line-height:50px; padding: 0 15px;} </style> </head> <body> <div class="container"> <!-- 代码 开始 --> <ul class="content"> <span></span> <div class="left"></div> <div class="right"></div> <li style="background:url(images/img_1.jpg); width:856px; height:482px;"></li> <li style="background:url(images/img_3.jpg); width:816px; height:459px;"></li> <li style="background:url(images/img_4.jpg); width:860px; height:484px;"></li> <li style="background:url(images/img_5.jpg); width:960px; height:540px;"></li> <li style="background:url(images/img_7.jpg); width:960px; height:540px;"></li> </ul> <div class="bottom"> 共 <span id="imgdata">x</span> 张 / 第 <span id="xz">x</span> 张 </div> <!-- 代码 结束 --> </div> <div style="text-align:center;margin:50px 0"> <p>来源:<a href="http://www.lanrentuku.com/" target="_blank" rel='nofollow' onclick='return false;'>懒人图库</a></p> <p style="margin:20px 0"></p> </div> </body> </html>
评论