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) ",5000);
//window.setTimeout( "window.clearInterval() ",5000);
}
function zoomOut(){
var zoom = $( 'test ').style.zoom;
if(zoom== ' '){
$( 'test ').style.zoom = '1.0 ';
}
timeID = window.setInterval( 'doZoom( "- ") ',75);
window.setTimeout( "window.clearInterval(timeID) ",5000);
//window.setTimeout( "window.clearInterval(window.setInterval( 'doZoom(\ '-\ ') ',100)) ",5000);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<img src= "http://www.csdn.net/Images/logo_csdn.gif " id= "test "/>
<a href= "# " onclick= "zoomIn() "> + </a> <a href= "# " onclick= "zoomOut() "> - </a>
</BODY>
</HTML>
[解决办法]
缩略图水印组件wsImage3.5
[解决办法]
CSS里的zoom在FF下是不行的
[解决办法]
amazon的那个效果太复杂了...
[解决办法]
Click the link to solve your problem.Good luck!