jquery图片放大功能简单实现

代码如下:

<div class="jqzoom">
<img src="http://bfbnews.tw/images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://bfbnews.tw/images/test.jpg">
</div>
<script src="https://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>
<!--{include file="jqzoom_js.html"}-->

赞 (0)

相关推荐

  • jQuery+css实现图片滚动效果(附源码)

    jQuery+css实现图片滚动效果(附源码)

    源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒. auto_dir:自动滚动的方向,默认为next,你可以试下prev. next_image:向右滚方向按钮图片,可以用CSS设

  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

  • 一个jquery实现的不错的多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

  • jquery实现多行文字图片滚动效果示例代码

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

  • jquery图片滚动放大代码分享（2）

    jquery图片滚动放大代码分享（2）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:                 -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq

  • jquery实现图片滚动效果的简单实例

    复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title>jquery 图片自动无缝滚动</title>      

  • Jquery图片滚动与幻灯片的实例代码

    1.图片滚动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

  • jquery图片滚动放大代码分享（1）

    jquery图片滚动放大代码分享（1）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,带有左右箭头,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:        ----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-e

  • JQuery 图片滚动轮播示例代码

    完整的项目在附件中 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>图片切换</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" > va

  • jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

  • jQuery实现类似淘宝网图片放大效果的方法

    本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

随机推荐