Jquery点击小图放大效果

最新推荐文章于 2018-01-24 22:25:00 发布
转载 最新推荐文章于 2018-01-24 22:25:00 发布 · 142 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/shcolo/p/4968713.html
文章标签：

#javascript #xhtml #ViewUI

本文提供了一个使用jQuery实现的图片放大显示功能的代码实例，展示了如何通过鼠标悬停触发图片放大效果，并提供了详细的代码实现步骤。 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery点击小图显示大图代码 - 源码之家</title>
<style type="text/css">
body{overflow-y:scroll;font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;background:#f4f4f4;padding:0;margin:0;}
h1{font-size:31px;line-height:32px;font-weight:normal;margin-bottom:25px;}
a,a:hover{border:none;text-decoration:none;}
img,a img{border:none;}
pre{overflow-x:scroll;background:#ffffff;border:1px solid #cecece;padding:10px;}
.clear{clear:both;}
.zoomed > .container{-webkit-filter:blur(3px);filter:blur(3px);}
.container{width:860px;margin:20px auto;}
.gallery{list-style-type:none;float:left;}
.gallery li{float:left;margin:10px; width:80px; height:80px;}
.gallery li:nth-child(6n){padding-right:0;}
.gallery li a,.gallery li img{float:left;}
</style>
<!--图片弹出层样式 必要样式-->
<link rel="stylesheet"  href="css/zoom.css" media="all" />
</head>
<body>
<div class="container">     
    <ul class="gallery">
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>
        <li><a href="images/b3.jpg"><img src="images/3.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b4.jpg"><img src="images/4.jpg" /></a></li>
        <li><a href="images/b5.jpg"><img src="images/5.jpg" /></a></li>
        <li><a href="images/b1.jpg"><img src="images/1.jpg" /></a></li>
        <li><a href="images/b2.jpg"><img src="images/2.jpg" /></a></li>         
    </ul>
     <div class="clear"></div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/zoom.min.js"></script>
</body>
</html>
源码下载：jQuery_zoom.zip

转载于:https://www.cnblogs.com/shcolo/p/4968713.html

jquery 点击小图放大图片
06-21
jquery 点击小图放大图片
js html页面点击小图弹出div放大查看原图
11-29
jquery.lightbox-0.5 点击小图放大效果； 修正了点击图片出现虚线框的问题； 修正了图像宽度比浏览器窗口大时，出现滚动条的问题，显示的大图片自动适应浏览器页面大小，不出现滚动条。 原效果地址 http://leandrovieira.com/projects/jquery/lightbox/
jquery实现移动端点击图片查看大图特效
11-22
本文的需求很简单：点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css"> .exampleImg { height:100px; cursor:pointer;} </style> [removed]
jQuery实现点击小图查看大图功能
dibengpo4955的博客
05-01 238
演示地址：点击查看前两天用Js实现在这个功能，现在在学习JQuery 也做了一下这个功能，多多练习，一切都会变的简单；<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ht...
jQuery实现点击小图显示大图效果
weixin_34378969的博客
03-02 163
项目中需要使用到点击小图展示大图，之前常用到的是lightbox，但这次却碰到了一个奇怪的问题，整合到项目中时，lightbox组件中的css文件失效。开初试图通过修改代码来调整好，无果。 于是baidu查找基于jquery的相关组件，找到了Fancybox，整合到项目中没有出现lightbox所碰到的问题，一切OK。对比两个组件，功能基本相同，但Fancybox可定制性强。 Fancybox...
jQuery点击图片拖动放大查看效果
04-07
3. **CSS样式设置**：为了使图片放大效果美观，可能需要定制一些CSS样式，如放大镜的形状、大小、透明度等。 4. **应用插件**：在jQuery的$(document).ready()函数中，选择要应用该效果的图片元素，并调用imageview...
jquery 实现点击图片放大效果
02-21
现在，我们可以编写 jQuery 代码来实现点击放大效果。在 `<script>` 标签内添加以下 JavaScript 代码： ```javascript $(document).ready(function() { $('#myImage').click(function() { var imgSrc = $(this)....
jquery实现列表图片放大效果
06-11
"jQuery实现列表图片放大效果"是一种常见的交互设计技术，它能够提升用户浏览图片时的沉浸感，让网页中的图片展示更具吸引力。这种技术通常被称为"轻盒"（Lightbox）效果，但在这里我们将探讨一个可能比Lightbox更...
jquery响应式图片点击弹出图片放大查看效果
10-04
在这个场景中，jQuery用于处理图片点击事件和弹出放大效果。 2. **响应式设计**：响应式设计是网页设计的一种方法，使网页能够根据用户使用的设备（如手机、平板电脑或桌面电脑）的屏幕尺寸和方向自动调整布局。在...
jQuery点击小图片显示大图片
泪光无悔
03-15 1545
.warp         {             width: 487px;             height: 194px;             overflow: hidden;             border: solid 1px #ccc;             position: relative;             top: 0px;
jquery左右按钮控制图片倒金字塔滚动中间图片放大显示
10-31
jquery左右按钮控制图片倒金字塔滚动中间图片放大显示 jquery左右按钮控制图片倒金字塔滚动中间图片放大显示
图片滚动中间放大效果
09-14
很漂亮的图片滚动中间放大效果 图片滚动 中间放大 效果 jquery滚动
jquery中间图片放大滚动切换.zip
07-04
jquery中间图片放大滚动切换是一款jquery左右按钮控制图片倒金字塔滚动中间图片放大显示特效代码。
jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)
02-26
jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)
图片显示--放大镜效果(JQuery)
03-06
jQZoom_v1.1.zip 博文链接：https://struts2.iteye.com/blog/195806
JQ实现点击小图显示大图
Hoodps的专栏
08-12 1万+
JQ实现点击小图显示大图代码块js，例如： /*图片*/ $('.imgJs').each(function() { var imgHeight = $(this).height(), aHeight = $(this).parent().height(); if(imgHeight<aHeight){ $(th
jquery放大镜以及点击小图查看大图
不吃鱼的猫
05-27 1479
第一：html页面 此处查看清晰图片 点击下面3张小图，在上面的大图中能显示，而且可以使用放大镜 "此处查看清晰图片"  使用弹出层显示大图
JQuery实现点击缩略图查看大图效果
热门推荐
tangtang5963的博客
05-18 2万+
function imgshow(){ var winW = $(window).width(); var winH = $(window).height(); var imgW = $('.imgclass').width(); var imgH = $('.imgclass').height(); console.log(winW,winH,imgW,imgH); va
jquery实现点击小图实现大图的案例
weixin_30808693的博客
01-24 441
今天的这个例子主要是实现点击小图能显示大图，来直接看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ...
Jquery实现网页图片点击放大效果
然后，通过简短的Jquery代码，我们就可以快速地为图片添加点击放大效果。 举一个简单的例子来说明如何使用Fancybox： ```javascript // 确保页面已加载完成 $(document).ready(function(){ // 为所有图片添加点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值