The example code of the jquery image magnifier function. For more information, see
The Code is as follows:
/* Magnifier */
. ZoomMain {margin: 100px; width: 395px; height: 460px; float: left; position: relative ;}
. ZoomMain. zoom {height: 393px; width: 393px; position: relative; border: 1px solid # dcdddd ;}
. ZoomMain. zoom. move {position: absolute; left: 0; top: 0; display: none; width: 195px; height: 195px; background: #000; opacity: 0.2; filter: alpha (Opacity = 20 );}
. ZoomMain. zoomDetail {display: none; border: 1px solid # DCDDDD; width: 393px; height: 393px; position: absolute; right:-405px; top: 0px; overflow: hidden ;}
. LittleImg {margin-top: 10px; height: 54px; overflow: hidden; position: relative ;}
. LittleImg span {position: absolute; display: block; width: 10px; height: 55px; background: #999; cursor: pointer ;}
. LittleImg span em {display: none; width: 10px; height: 55px ;}
. LittleImg span. btnL {left: 0; background: url (oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top ;}
. LittleImg span. btnL em {background: url (oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left-57px ;}
. LittleImg span. btnR em {background: url (oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat-10px-57px ;}
. LittleImg span. btnR {right: 0; background: url (oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat-10px top ;}
. LittleImg span. hover em {display: block ;}
. LittleImg. slideMain {width: 343px; height: 55px; margin-left: 26px; overflow: hidden; position: relative ;}
. LittleImg. slideMain ul {position: absolute; left: 0; width: 355px; padding-top: 1px ;}
. LittleImg. slideMain ul li {float: left; margin-right: 6px; cursor: pointer; width: 50px; height: 50px; border: 1px solid # dbdbdb ;}
. LittleImg. slideMain ul li. selected {border-color: #999 ;}
. LittleImg. slideMain ul li img {float: left; width: 50px; height: 50px ;}
/* Magnifier end */
?