基于jquery实现图片放大功能
本文实例为大家分享了jquery实现图片放大功能的具体实现代码，供大家参考，具体内容如下
图片放大功能类似于淘宝上的商品的查看，如果鼠标移动到小图上就会在相应的位置显示出大图。如果自己写这些代码，会很痛苦。官方网站上提供了一个类库——jquery.jqzoom.js；只需要引入次类库，引用此类库，添加一些css代码即可实现此功能；
HTML框架如下：
<div class="jqzoom"> <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/> </div>
注意，img中必须有jqimg属性，这个属性放的是大图的地址；
js代码如下：
<script type="text/javascript">
$(function () {
$(".jqzoom").jqueryzoom({
xzoom: 300, //放大图的宽度（默认是200）
yzoom: 300, //放大图的高度（默认是200）
offset: 10, //离原图的距离（默认是10）
position: "right", //放大图的定位（默认是"right"）
preload: 1
})
})
</script>
用法：$(".jqzoom").jqueryzoom
如果只添加这么多代码效果会出来，但是不是那么的理想。为了更加美观，必须添加如下的css代码：
<style type="text/css">
.jqzoom{
border:1px solid #BBB;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}
/*jQzoom*/
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 url(../images/zoomlens.gif) 50% top no-repeat;;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}
</style>
以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。
相关推荐
-
JQuery控制图片由中心点逐渐放大效果
有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的.如下图: 从中心点进行缩放 实现代码如下: <meta charset="utf-8"> <style type="text/css"> #div1{ width:600px; height:400px; margin:50px auto; position:rel
-
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="
-
Jquery实现鼠标移动放大图片功能实例
本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一会就把自己搞糊涂了,使用jquery技术直接根据标签的id,class等等,就可以辨识出来触发条件,直接作出回应(百度百科上说这是jquery很大的一
-
图片放大镜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.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
-
jQuery插件zoom实现图片全屏放大弹出层特效
1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo
-
jquery图片滚动放大代码分享（2）
本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq
-
基于jQuery仿淘宝产品图片放大镜代码分享
这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="
-
基于jquery实现图片放大功能
本文实例为大家分享了jquery实现图片放大功能的具体实现代码,供大家参考,具体内容如下 图片放大功能类似于淘宝上的商品的查看,如果鼠标移动到小图上就会在相应的位置显示出大图.如果自己写这些代码,会很痛苦.官方网站上提供了一个类库--jquery.jqzoom.js:只需要引入次类库,引用此类库,添加一些css代码即可实现此功能: HTML框架如下: <div class="jqzoom"> <img src="images/pro_img/blue_one
-
C#实现图片放大功能的按照像素放大图像方法
本文实例讲述了基于Visual C#实现的图片放大功能代码.可以直接放大像素,类似photoshop的图片放大功能,可用于像素的定位及修改,由于使用了指针需要勾选允许不安全代码选项,读者可将其用于自己的项目中! 关于几个参数说明: srcbitmap源图片 multiple图像放大倍数 放大处理后的图片 注意:需要在头部引用:using System.Drawing;using System.Drawing.Imaging; 至于命名空间读者可以自己定义. 主要功能代码如下: using Sys
-
jquery实现图片放大镜功能
实现原理: 这里用到了两张图片,一张小图,一张大图.将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置.两张图片大小最好是等比例的,这样才能达到最佳效果.当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此放大镜效果不明显,就跟没放大是一样的. 此插件用到了html5,css3的一些属性,ie8及以下版本不兼容,放大镜是方形的. 运行效果截图如下: 具体代码如下: (function () { $.fn.Magnifier = function (op
-
Vue press 支持图片放大功能的实例代码
介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好.然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA).当用户在浏览站点时,可以按需加载其他页面. 前两天接触到了 Vuepress ,颜值很高,界面简洁,容易上手.于是
-
基于jQuery实现图片推拉门动画效果的两种方法
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li></li> --> <li&g
-
基于jquery实现日历签到功能
在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
-
基于jQuery实现收缩展开功能
本文实例向大家分享了一款基于jQuery实现收起展开功能特效,供大家参考,具体内容如下 效果图: 点击倒三角可以进行展开操作 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-widt
-
一款基于jQuery的图片场景标注提示弹窗特效
今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"
-
微信小程序如何实现点击图片放大功能
这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 WXML: <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image&
-
Vue后台实现点击图片放大功能的示例代码
目录 需求 代码 父组件 子组件 dom.js util.js types.js 需求 点击小图可以放大,放大后,通过手势等比例放大缩小.左右切换图.旋转.关闭.由于element-ui版本较低不支持使用图片放大的image组件. 代码 父组件 <template> <div> <!-- 放大图 --> <el-image-viewer v-if="showImg" :on-close="closeViewer" :src=