当前位置: 首页 > 工具软件 > jQzoom > 使用案例 >

jqzoom

陶超
2023-12-01
放大镜效果<br/>
<style type="text/css">
    img{max-width:none;}
    .zxx_image_zoom_list{display:inline-block; width:1.2em; height:1.1em; text-align:center; font-size:128px;}
    .zxx_image_zoom_list img.zxx_zoom_image{padding:3px; border:1px solid #cccccc; background:white; vertical-align:middle; position:relative;}
    .zxx_image_zoom_list:hover,.zxx_image_zoom_list:hover img.zxx_zoom_image{border-color:#ff3300;}
    .zxx_image_zoom_div{width:300px; height:300px; padding:3px; background:white; border:1px solid #cccccc; text-align:center; position:absolute; z-index:1000; left:0; top:0; overflow:hidden;}
</style>

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" class="zxx_image_zoom_list">
    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg">
</a>
<a href="http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg" class="zxx_image_zoom_list">
    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg">
</a>
<a href="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg" class="zxx_image_zoom_list">
    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg">
</a>
<a href="http://image.zhangxinxu.com/image/study/s/s512/mm4.jpg" class="zxx_image_zoom_list">
    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg">
</a>
<a href="http://image.zhangxinxu.com/image/study/s/s512/mm5.jpg" class="zxx_image_zoom_list">
    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm5.jpg">
</a>
<a href="http://image.zhangxinxu.com/image/study/s/s512/mm6.jpg" class="zxx_image_zoom_list">
    <img class="zxx_zoom_image" src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg">
</a>

<script type="text/javascript">
    $("img.zxx_zoom_image").jqueryzoom();
</script>
 类似资料:

相关阅读

相关文章

相关问答