代碼簡介：

JavaScript 算法生成彈性透明的圖片放大效果，代碼值得看一下哦，彈性和緩沖是一個意思，JS緩沖效果在網頁中使用很頻繁，使用緩沖技術可以制作出超多的精美特效來。

代碼內容：

?

View Code < html >
< head >
< title > JavaScript彈性透明的圖片放大代碼_網頁代碼站(www.webdm.cn) </ title >
< style?type = " text/css " >
????html?{
????????overflow:?hidden;
????}

????body?{
????????margin:?0px;
????????padding:?0px;
????????background:?# 000 ;
????????position:?absolute;
????????cursor:?crosshair;
????}

????#diapoContainer?{
????????position:?absolute;
????????left:? 10 % ;
????????top:? 10 % ;
????????width:? 80 % ;
????????height:? 80 % ;
????????background:?# 222 ;
????????overflow:?hidden;
????}

????.imgDC?{
????????position:?absolute;
????????cursor:?pointer;
????????border:?# 000 ?solid?2px;
????????filter:?alpha(opacity = 90 );
????????opacity:? 0.9 ;
????????visibility:?hidden;
????}

????.spaDC?{
????????position:?absolute;
????????filter:?alpha(opacity = 20 );
????????opacity:? 0.2 ;
????????background:?# 000 ;
????????visibility:?hidden;
????}

????.imgsrc?{
????????position:?absolute;
????????width:?120px;
????????height:?67px;
????????visibility:?hidden;
????????margin:? 4 % ;
????}

????#bkgcaption?{
????????position:?absolute;
????????bottom:?0px;
????????left:?0px;
????????width:? 100 % ;
????????height:? 6 % ;
????????background:#1a1a1a;
????}
????#caption?{
????????position:?absolute;
????????font - family:?arial,?helvetica,?verdana,?sans - serif;
????????white - space:?nowrap;
????????color:?#fff;
????????bottom:?0px;
????????width:? 100 % ;
????????left:? - 10000px;
????????text - align:?center;
????}

</ style >
< script?type = " text/javascript " >
var?xm;
var?ym;
document.onmousemove? = ?function(e){
???? if (window. event )?e = window. event ;
????xm? = ?(e.x? || ?e.clientX);
????ym? = ?(e.y? || ?e.clientY);
}

function?resize()?{
???? if (diapo)diapo.resize();
}
onresize? = ?resize;

setOpacity? = ?function(o,?alpha){
???? if (o.filters)o.filters.alpha.opacity? = ?alpha? * ? 100 ;? else ?o.style.opacity? = ?alpha;
}
diapo? = ?{
????O?:?[],
????DC?:? 0 ,
????img?:? 0 ,
????txt?:? 0 ,
????N?:? 0 ,
????xm?:? 0 ,
????ym?:? 0 ,
????nx?:? 0 ,
????ny?:? 0 ,
????nw?:? 0 ,
????nh?:? 0 ,
????rs?:? 0 ,
????rsB?:? 0 ,
????zo?:? 0 ,
????tx_pos?:? 0 ,
????tx_var?:? 0 ,
????tx_target?:? 0 ,
????attraction?:? 2 ,
????acceleration?:?. 9 ,
????dampening?:?. 1 ,
????zoomOver?:? 2 ,
????zoomClick?:? 6 ,
????transparency?:?. 8 ,
????font_size:? 18 ,
????resize?:?function(){
????????with( this ){
????????????nx? = ?DC.offsetLeft;
????????????ny? = ?DC.offsetTop;
????????????nw? = ?DC.offsetWidth;
????????????nh? = ?DC.offsetHeight;
????????????txt.style.fontSize? = ?Math.round(nh? / ?font_size)? + ? " px " ;
???????????? if (Math.abs(rs - rsB) < 100 )? for (var?i = 0 ;?i < N;?i ++ )?O[i].resize();
????????????rsB? = ?rs;
????????}
????},

????CDiapo?:?function(o){
???????? this .o???????? = ?o;
???????? this .x_pos???? = ? this .y_pos???? = ? 0 ;
???????? this .x_origin? = ? this .y_origin? = ? 0 ;
???????? this .x_var???? = ? this .y_var???? = ? 0 ;
???????? this .x_target? = ? this .y_target? = ? 0 ;
???????? this .w_pos???? = ? this .h_pos???? = ? 0 ;
???????? this .w_origin? = ? this .h_origin? = ? 0 ;
???????? this .w_var???? = ? this .h_var???? = ? 0 ;
???????? this .w_target? = ? this .h_target? = ? 0 ;
???????? this .over????? = ? false ;
???????? this .click???? = ? false ;
???????? this .spa? = ?document.createElement( " span " );
???????? this .spa.className? = ? " spaDC " ;
????????diapo.DC.appendChild( this .spa);
???????? this .img? = ?document.createElement( " img " );
???????? this .img.className? = ? " imgDC " ;
???????? this .img.src? = ?o.src;
???????? this .img.O? = ? this ;
????????diapo.DC.appendChild( this .img);
????????setOpacity( this .img,?diapo.transparency);
???????? this .img.onselectstart? = ? new ?Function( " return?false; " );
???????? this .img.ondrag? = ? new ?Function( " return?false; " );
???????? this .img.onmouseover? = ?function(){
????????????diapo.tx_target = 0 ;
????????????diapo.txt.innerHTML = this .O.o.alt;
???????????? this .O.over = true ;
????????????setOpacity( this , this .O.click ? diapo.transparency: 1 );
????????}
???????? this .img.onmouseout? = ?function(){
????????????diapo.tx_target =- diapo.nw;
???????????? this .O.over = false ;
????????????setOpacity( this ,diapo.transparency);
????????}
???????? this .img.onclick? = ?function()?{
???????????? if ( ! this .O.click){
???????????????? if (diapo.zo? && ?diapo.zo? != ? this )?diapo.zo.onclick();
???????????????? this .O.click? = ? true ;
???????????????? this .O.x_origin? = ?(diapo.nw? - ?( this .O.w_origin? * ?diapo.zoomClick))? / ? 2 ;
???????????????? this .O.y_origin? = ?(diapo.nh? - ?( this .O.h_origin? * ?diapo.zoomClick))? / ? 2 ;
????????????????diapo.zo? = ? this ;
????????????????setOpacity( this ,diapo.transparency);
????????????}? else ?{
???????????????? this .O.click? = ? false ;
???????????????? this .O.over? = ? false ;
???????????????? this .O.resize();
????????????????diapo.zo? = ? 0 ;
????????????}
????????}
???????? this .resize? = ?function?(){
????????????with?( this )?{
????????????????x_origin? = ?o.offsetLeft;
????????????????y_origin? = ?o.offsetTop;
????????????????w_origin? = ?o.offsetWidth;
????????????????h_origin? = ?o.offsetHeight;
????????????}
????????}

???????? this .position? = ?function?(){
????????????with?( this )?{
????????????????w_target? = ?w_origin;
????????????????h_target? = ?h_origin;
???????????????? if (over){
????????????????????w_target? = ?w_origin? * ?diapo.zoomOver;
????????????????????h_target? = ?h_origin? * ?diapo.zoomOver;
????????????????????x_target? = ?diapo.xm? - ?w_pos? / ? 2 ? - ?(diapo.xm? - ?(x_origin? + ?w_pos? / ? 2 ))? / ?(diapo.attraction * (click ? 10 : 1 ));
????????????????????y_target? = ?diapo.ym? - ?h_pos? / ? 2 ? - ?(diapo.ym? - ?(y_origin? + ?h_pos? / ? 2 ))? / ?(diapo.attraction * (click ? 10 : 1 ));
????????????????}? else ?{
????????????????????x_target? = ?x_origin;
????????????????????y_target? = ?y_origin;
????????????????}
???????????????? if (click){
????????????????????w_target? = ?w_origin? * ?diapo.zoomClick;
????????????????????h_target? = ?h_origin? * ?diapo.zoomClick;
????????????????}
????????????????x_pos? += ?x_var? = ?x_var? * ?diapo.acceleration? + ?(x_target? - ?x_pos)? * ?diapo.dampening;
????????????????y_pos? += ?y_var? = ?y_var? * ?diapo.acceleration? + ?(y_target? - ?y_pos)? * ?diapo.dampening;
????????????????w_pos? += ?w_var? = ?w_var? * ?(diapo.acceleration? * ?. 5 )? + ?(w_target? - ?w_pos)? * ?(diapo.dampening? * ?. 5 );
????????????????h_pos? += ?h_var? = ?h_var? * ?(diapo.acceleration? * ?. 5 )? + ?(h_target? - ?h_pos)? * ?(diapo.dampening? * ?. 5 );
????????????????diapo.rs? += ?(Math.abs(x_var)? + ?Math.abs(y_var));
????????????????with(img.style){
????????????????????left??? = ?Math.round(x_pos)? + ? " px " ;
????????????????????top???? = ?Math.round(y_pos)? + ? " px " ;
????????????????????width?? = ?Math.round(Math.max( 0 ,?w_pos))? + ? " px " ;
????????????????????height? = ?Math.round(Math.max( 0 ,?h_pos))? + ? " px " ;
????????????????????zIndex? = ?Math.round(w_pos);
????????????????}
????????????????with(spa.style){
????????????????????left??? = ?Math.round(x_pos? + ?w_pos? * ?. 1 )? + ? " px " ;
????????????????????top???? = ?Math.round(y_pos? + ?h_pos? * ?. 1 )? + ? " px " ;
????????????????????width?? = ?Math.round(Math.max( 0 ,?w_pos? * ? 1.1 ))? + ? " px " ;
????????????????????height? = ?Math.round(Math.max( 0 ,?h_pos? * ? 1.1 ))? + ? " px " ;
????????????????????zIndex? = ?Math.round(w_pos);
????????????????}
????????????}
????????}
????},
????run?:?function(){
????????diapo.xm? = ?xm? - ?diapo.nx;
????????diapo.ym? = ?ym? - ?diapo.ny;
????????diapo.tx_pos? += ?diapo.tx_var? = ?diapo.tx_var? * ?. 9 ? + ?(diapo.tx_target? - ?diapo.tx_pos)? * ?. 02 ;
????????diapo.txt.style.left? = ?Math.round(diapo.tx_pos)? + ? " px " ;
???????? for (var?i? in ?diapo.O)?diapo.O[i].position();
????????setTimeout( " diapo.run(); " ,? 16 );
????},

????images_load?:?function(){
????????var?M? = ? 0 ;
???????? for (var?i = 0 ;?i < diapo.N;?i ++ )?{
???????????? if (diapo.img[i].complete)?{
????????????????diapo.img[i].style.position? = ? " relative " ;
????????????????diapo.O[i].img.style.visibility? = ? " visible " ;
????????????????diapo.O[i].spa.style.visibility? = ? " visible " ;
????????????????M ++ ;
????????????}
????????????resize();
????????}
???????? if (M < diapo.N)?setTimeout( " diapo.images_load(); " ,? 128 );
????},

????init?:?function()?{
????????diapo.DC? = ?document.getElementById( " diapoContainer " );
????????diapo.img? = ?diapo.DC.getElementsByTagName( " img " );
????????diapo.txt? = ?document.getElementById( " caption " );
????????diapo.N? = ?diapo.img.length;
???????? for (i = 0 ;?i < diapo.N;?i ++ )?diapo.O.push( new ?diapo.CDiapo(diapo.img[i]));
????????diapo.resize();
????????diapo.tx_pos? = ? - diapo.nw;
????????diapo.tx_target? = ? - diapo.nw;
????????diapo.images_load();
????????diapo.run();
????}
}
</ script >
</ head >
< body >
< div?id = " diapoContainer " >
???? < img? class = " imgsrc " ?src = " http://www.webdm.cn/images/wal1.jpg " >
???? < img? class = " imgsrc " ?src = " http://www.webdm.cn/images/wall2.jpg " >
???? < img? class = " imgsrc " ?src = " http://www.webdm.cn/images/wall3.jpg " >
???? < div?id = " bkgcaption " ></ div >
???? < div?id = " caption " ></ div >
</ div >
< script?type = " text/javascript " >
function?dom_onload()?{
???? if (document.getElementById( " diapoContainer " ))?diapo.init();? else ?setTimeout( " dom_onload(); " ,? 128 );
}
dom_onload();
</ script >
</ div >
</ body >
</ html >
< br? />
< p >< a?href = " http://www.webdm.cn " > 網頁代碼站 </ a > ? - ?最專業的網頁代碼下載網站? - ?致力為中國站長提供有質量的網頁代碼！ </ p >
</ body >
</ html >
代碼來自：http: // www.webdm.cn/webcode/e1197397-1bd2-4c9a-9c57-c3ea9c7c4b94.html

?

轉載于:https://www.cnblogs.com/webdm/archive/2011/08/04/2127084.html

總結

以上是生活随笔為你收集整理的JavaScript弹性透明的图片放大代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。