jquery图片放大功能简单实现_Javascript教程-查字典教程网
jquery图片放大功能简单实现
jquery图片放大功能简单实现
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:body{margin:0px;}div.zoomdiv{z-index:999;position:absolute;to...

复制代码 代码如下:

<div>

<img src="http://bfbnews.tw/images/test.jpg" id="bigImg" jqimg="http://bfbnews.tw/images/test.jpg">

</div>

<script src="http://www.jb51.net/ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<style type="text/css">

body{margin:0px;}

div.zoomdiv {

z-index: 999;

position : absolute;

top:0px;

left:0px;

width : 200px;

height : 200px;

background: #ffffff;

border:1px solid #CCCCCC;

display:none;

text-align: center;

overflow: hidden;

}

div.jqZoomPup {

z-index : 999;

visibility : hidden;

position : absolute;

top:0px;

left:0px;

width : 50px;

height : 50px;

border: 1px solid #aaa;

background: #ffffff;

opacity: 0.5;

-moz-opacity: 0.5;

-khtml-opacity: 0.5;

filter: alpha(Opacity=50);

}

</style>

<script type="text/javascript">

$(document).ready(function(){

$(".jqzoom").jqueryzoom({

xzoom: 400, //设置放大 DIV 长度(默认为 200)

yzoom: 400, //设置放大 DIV 高度(默认为 200)

offset: 10, //设置放大 DIV 偏移(默认为 10)

position: "right", //设置放大 DIV 的位置(默认为右边)

preload:1,

lens:true

});

});

</script>

<>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类