js实现图片的大小自适应效果】的更多相关文章

需求是传过来一个图片,根据外层div的大小自动进行缩放效果. function ShowSecondImg(v) { var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例 var imgW, imgH; var centerW = $(window).width() - $("#alarmQueue").width() - $("#presInfo").width() - 40; var centerH = $(w…
){ clearInterval(global_timename4pool); } } //由于无法判断图片显示完整的时机,只好用定时器来做,计算完成后再关掉定时器. global_timename4pool = setInterval("show_prize_pool()",1500); //页面大小改变后,要再次计算奖池元素的高度. $(window).resize(function(){ show_prize_pool(); }); 简单说明下: 1.$('img.pool_li…
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu…
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个参数是函数,用于定时器的执行,第二个参数是数字,表示多少毫秒之后执行函数.它们的不同点在于setTimeout只执行一次指定的函数,而setInterval则每隔规定的时间就执行一次指定的函数. 在定时器后面我们还要知道清除定时器的方法:clearTimeout和clearInterval.它们都只…
摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten…
门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid #ccc; overflow: hidden; height: 110px; margin: 50px auto; white-space: nowrap; position: relative; } .con1{ width: 1000px; height: 110px; overflow: h…
echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为啥. 于是自己采用了如下解决方案,直接贴代码了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie…
插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" /> <img src="images/cartoon/2.jpg" /> <img src="images/cartoon/3.jpg" /> <img src="images/cartoon/4.jpg" /&…
<form id="financialForm" action="<%=basePath%>riskcontrol/website/review_borrow!financialUplaod.ds"  method="post"  enctype="multipart/form-data" onsubmit="return checkusertype()" >          &l…
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="hidden" name="MAX_FILE_SIZE" id="MAX_FILE_SIZE" value="8000000" /> <input type="file" n…