前言：
现时看官们对“jquery怎么获取dome结构class值”都比较看重，姐妹们都想要剖析一些“jquery怎么获取dome结构class值”的相关内容。那么小编也在网络上搜集了一些有关“jquery怎么获取dome结构class值””的相关内容，希望各位老铁们能喜欢，姐妹们快快来学习一下吧！背景
我们在浏览购物网站，遇到喜欢的商品，总想点击图片放大后看看详细内容，那么放大是怎么做的呢，写一个简单的例子，带大家了解一下。
效果代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多种形式放大镜</title><!--hizoom css样式--><link rel="stylesheet" type="text/css" href="../css/hizoom/normalize.css" /><link rel="stylesheet" type="text/css" href="../css/hizoom/htmleaf-demo.css"><link rel='stylesheet' href='../css/hizoom/main.css'><link rel='stylesheet' href='../css/hizoom/hizoom.min.css'><!--jquery.zoom css样式--><link rel="stylesheet" type="text/css" href="../css/zoom/normalize.css" /><link rel="stylesheet" type="text/css" href="../css/zoom/htmleaf-demo.css"><style>/*jquery.zoom必须样式，保证放大后的图片在原位置*/.zoom{display:inline-block;position: relative;}.zoom:after {content:'';display:block;width:33px;height:33px;position:absolute;top:0;right:0;/*background:url(img/icon.png);*/}.zoom img {display: block;}</style></head><body style="background-color: whitesmoke;text-align: center"><!--hizoom 展示部分--><div style="margin-top: 5%;margin-left: 5%"><div class='hizoom c2'><img src='../images/hizoom/hizoom-cs2.jpg'></div></div><!--jquery.zoom 展示部分--><div><div style="width: 900px;margin-left: 30%;margin-top: -350px"><span class='zoom' id='zoom-ex1'><img src='/images/zoom/zoom-horse.jpg' width='400' height='320' alt='horse'/></span><span class='zoom' id='zoom-ex2'><img src='/images/zoom/zoom-nvpu.jpg' width='400' height='320' alt='nvpu'/></span><span class='zoom' id='zoom-ex3'><img src='/images/zoom/zoom-cat.jpg' width='400' height='320' alt='cat'/></span><span class='zoom' id='zoom-ex4'><img src='/images/zoom/zoom-shanhe.jpg' width='400' height='320' alt='shanhe'/></span></div></div><script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script><script src='../js/hizoom/hizoom.min.js' type="text/javascript"></script><script src='../js/zoom/jquery.zoom.min.js'></script><script type="text/javascript">/*hizoom插件*/$('.c2').hiZoom({width: 300,//放大镜容器的宽高（目前只支持正方形放大镜），会同时修改原始图片的展示大小position: 'bottom',//被放大区域展示的位置distance:10,//被放大区域和放大镜容器间的距离background:'white',//放大镜背景色opacity:0.7//放大镜透明度 0~1});/*jquery.zoom插件*/$(function (){$('#zoom-ex1').zoom();//鼠标移动上去即可放大$('#zoom-ex2').zoom({ on:'grab' });//鼠标点击后不放手，移动鼠标$('#zoom-ex3').zoom({ on:'click', duration:100});//鼠标点击后放手，可以移动，在点击恢复原状态$('#zoom-ex4').zoom({ on:'toggle' });//点击指定位置放大})</script></body></html>hizoom放大镜插件的可用配置参数如下：
属性
描述
可选值
默认值
width
放大镜容器的宽高
任何正数
400
position
被放大区域的位置
left|right|top|bottom
right
background
放大镜背景色
合法CSS颜色值
#FFF
opacity
放大镜透明度
0~1（合法CSS值）
0.7
distance
被放大区域和放大镜容器间的距离
任何正数
20
jquery.zoom.js插件的可用配置参数有：
参数
默认值
描述
url
false
显示大图的url地址。如果没有提供，默认使用第一个img子元素的url地址。
on
'mouseover'
触发图片放大的事件。可用类型有：mouseover, grab, click, toggle。
duration
120
淡入淡出效果的持续时间。
target
false
要放大图片的父容器的选择器或DOM元素。
touch
true
是否允许移动触摸交互。
magnify
1
1表示图片放大为原尺寸的2倍。
callback
false
图片加载时的回调函数。
onZoomIn
false
图片放大时的回调函数。
onZoomOut
false
图片缩小时的回调函数。
你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery怎么获取dome结构class值 #jquery点击改背景颜色 #jquery动态加载css #jquerydiv的属性值 #jquery实现动态放大缩小
