간단한 자바스크립트 이미지 확대 효과 code_image 특수 효과

간단한 이미지 확대 효과:
매개변수 설명:
1.berviary:String, 확대해야 하는 이미지의 ID
2.expand:object, 확대 영역, 이 항목 또는 ID인 경우 이 항목이 설정되지 않은 경우 기본값은 커서 따르기 모드이며, 확대된 영역을 표시하기 위한 div가 자동으로 생성됩니다.
3.clip:object, 즉 자르기 영역의 크기. 확대해야 할 사진 위로 마우스를 이동합니다. 하이라이트는 넓은 영역이어야 합니다
4.opacity:float, 확대 시 이미지의 마스크된 영역의 투명도
효과 1:

JS 코드 호출:

코드 복사 코드는 다음과 같습니다.

$E ({berviary:"currentPic",expand:{id:"expand",style:{ }},clip:{width:"50px",height:"50px"},opacity:"0.2"})

html 코드:

코드 복사 코드는 다음과 같습니다.

데모 효과:

<style type="text/css"> .img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;} .img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/} .img_warp .current{ width:318px;height:199px} </style> <div id="img_warp" class="img_warp"> <img id="currentPic1" class="current" border="0" alt="" src="http://files.jb51.net/demoimg/201008/20100809.jpg" style="max-width:90%" style="max-width:90%"> </div> <div style="border-bottom: #555 1px solid; border-left: #555 1px solid; margin: -200px 0px 0px 400px; width: 400px; height: 400px; overflow: hidden; border-top: #555 1px solid; border-right: #555 1px solid" id="expand" class="expand"> </div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

효과 2:

JS 코드 호출: 코드 복사

코드는 다음과 같습니다.

$E({ berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"})

html 코드: 코드 복사

코드는 다음과 같습니다.

class="img_warp" id="img_warp" >