web 图片缩放的效果,哪位高手能实现
日期：2014-05-16 浏览次数：20580 次
web 图片缩放的效果,谁能实现?
http://www.amazon.com/gp/product/images/B000EDH5QU/ref=dp_otherviews_z_4/102-5038758-2453723?ie=UTF8&s=apparel&img=4
效果类似.分析了下,不知道怎么实现.
换了图片,似乎不行.
请各位高手出马~
------解决方案--------------------
<style>
#idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;}
#idDiv{width:80%;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:9px;zoom:1.00;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_doAdd(e){
var oCodeDiv=document.all( "idCodeDiv ");
var oDiv=document.all( "idDiv ");
var oNum=document.all( "idNum ");
var iValue=parseInt(oNum.value*1000+10) / 1000;
oNum.value=oDiv.style.zoom=iValue.toString();
oCodeDiv.innerText= "zoom : "+iValue.toString()+ " ; ";
}
function rdl_doDvv(e){
var oCodeDiv=document.all( "idCodeDiv ");
var oDiv=document.all( "idDiv ");
var oNum=document.all( "idNum ");
var iValue=parseInt(oNum.value*1000-10) / 1000;
if (iValue <0) iValue=0.00;
oNum.value=oDiv.style.zoom=iValue.toString();
oCodeDiv.innerText= "zoom : "+iValue.toString()+ " ; ";
}
</script>
<div id=idParentDiv>
<div id=idDiv> <img src= "images/rdl_body0.jpg " style= "float:left;border:1px solid #000000; "> 请从下方选择 <b> zoom </b> 属性的值。 </div>
</div>
<br>
<table> <tr> <td>
<input id=idNum type=text value= "1 " size=19 readonly>
</td> <td>
<input type=button onclick= "rdl_doAdd(); " value= " + " id=idBtn1>
</td> <td>
<input type=button onclick= "rdl_doDvv(); " value= " - " id=idBtn2>
</td> </tr> </table>
<div id=idCodeDiv> zoom : 1.00 ; </div>
------解决方案--------------------
和上面的例子差不多吧......
------解决方案--------------------
给你个例子，你可以在这个基础上改改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function $(ID){
return document.getElementById(ID);
}
function doZoom(flag){
if(flag== '+ '){
var zoom = $( 'test ').style.zoom;
zoom = parseFloat(zoom) + 0.05;
$( 'test ').style.zoom = zoom.toString();
} else {
var zoom = $( 'test ').style.zoom;
zoom = parseFloat(zoom) - 0.05;
$( 'test ').style.zoom = zoom.toString();
}
}
var timeID = null;
function zoomIn() {
var zoom = $( 'test ').style.zoom;
if(zoom== ' '){
$( 'test ').style.zoom = '1.0 ';
}
timeID = window.setInterval( 'doZoom( "+ ") ',75);
window.setTimeout( "window.clearInterval(timeID) &qu
http://www.amazon.com/gp/product/images/B000EDH5QU/ref=dp_otherviews_z_4/102-5038758-2453723?ie=UTF8&s=apparel&img=4
效果类似.分析了下,不知道怎么实现.
换了图片,似乎不行.
请各位高手出马~
------解决方案--------------------
<style>
#idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;}
#idDiv{width:80%;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:9px;zoom:1.00;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<script>
function rdl_doAdd(e){
var oCodeDiv=document.all( "idCodeDiv ");
var oDiv=document.all( "idDiv ");
var oNum=document.all( "idNum ");
var iValue=parseInt(oNum.value*1000+10) / 1000;
oNum.value=oDiv.style.zoom=iValue.toString();
oCodeDiv.innerText= "zoom : "+iValue.toString()+ " ; ";
}
function rdl_doDvv(e){
var oCodeDiv=document.all( "idCodeDiv ");
var oDiv=document.all( "idDiv ");
var oNum=document.all( "idNum ");
var iValue=parseInt(oNum.value*1000-10) / 1000;
if (iValue <0) iValue=0.00;
oNum.value=oDiv.style.zoom=iValue.toString();
oCodeDiv.innerText= "zoom : "+iValue.toString()+ " ; ";
}
</script>
<div id=idParentDiv>
<div id=idDiv> <img src= "images/rdl_body0.jpg " style= "float:left;border:1px solid #000000; "> 请从下方选择 <b> zoom </b> 属性的值。 </div>
</div>
<br>
<table> <tr> <td>
<input id=idNum type=text value= "1 " size=19 readonly>
</td> <td>
<input type=button onclick= "rdl_doAdd(); " value= " + " id=idBtn1>
</td> <td>
<input type=button onclick= "rdl_doDvv(); " value= " - " id=idBtn2>
</td> </tr> </table>
<div id=idCodeDiv> zoom : 1.00 ; </div>
------解决方案--------------------
和上面的例子差不多吧......
------解决方案--------------------
给你个例子，你可以在这个基础上改改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function $(ID){
return document.getElementById(ID);
}
function doZoom(flag){
if(flag== '+ '){
var zoom = $( 'test ').style.zoom;
zoom = parseFloat(zoom) + 0.05;
$( 'test ').style.zoom = zoom.toString();
} else {
var zoom = $( 'test ').style.zoom;
zoom = parseFloat(zoom) - 0.05;
$( 'test ').style.zoom = zoom.toString();
}
}
var timeID = null;
function zoomIn() {
var zoom = $( 'test ').style.zoom;
if(zoom== ' '){
$( 'test ').style.zoom = '1.0 ';
}
timeID = window.setInterval( 'doZoom( "+ ") ',75);
window.setTimeout( "window.clearInterval(timeID) &qu
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
