A simple javascript image amplification code

A simple image amplification effect:
Parameter description:
1. berviary: String, the id of the image to be enlarged
2. expand: object. If this item is not set or the id of this item is not set, the cursor follows mode by default. A div used to display the enlarged area is automatically created.
3. clip: object: Specifies the size of the cropping area. When you move the cursor over the image to be enlarged, the area to be enlarged is highlighted.
4. opacity: float, transparency of the area where the image is masked when it is enlarged
Effect 1:

The called js Code:
Copy codeThe Code is as follows:
$ E ({berviary: "currentPic", expand: {id: "expand", style: {}}, clip: {width: "50px", height: "50px"}, opacity: "0.2 "});

Html code:
Copy codeThe Code is as follows:
<Div>
<Div class = "img_warp" id = "img_warp">

</Div>
<Div class = "expand" id = "expand" style = "border: 1px solid #555; width: 400px; height: 400px; margin:-200px auto 0 auto; overflow: hidden; "> </div>
</Div>

Demo effect:
<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>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Effect 2:

The called js Code:
Copy codeThe Code is as follows:
$ E ({berviary: "currentPic", clip: {width: "100px", height: "100px"}, opacity: "0.4 "});

Html code:
Copy codeThe Code is as follows:
<Div>
<Div class = "img_warp" id = "img_warp">

</Div>
</Div>

Demo effect:
<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>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]