`
lihong11
  • 浏览: 457004 次
  • 性别: Icon_minigender_2
  • 来自: 湖南
社区版块
存档分类
最新评论

单击查看放大图片js效果

图片放大 
阅读更多 
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testPicbig.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<style type="text/css">
		li{
			width:380px;
			float:left;
			list-style: none;
		}
		ul li img{
			width:240px;
			border:1px solid red;
			cursor: pointer;
		}
		#show{
			position: absolute;
			width:426px;
			height:293px;
			z-index: 200;
		}
		#info{
			position: absolute;
			top:380px;
			left:10px;
			margin-left: 28px;
			padding: 5px;
			width:416px;
			height: 45px;			
		}
		#photo{
			position: absolute;
			top:35px;
			left:35px;
			border:3px solid red;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
		//找到li下所有img的值,单击图片事件
			$("div li:has(img)").click(function(){
				$("#show").fadeIn(300);  //显示图片效果
				//设置显示放大后的图片位置
				document.getElementById("show").style.left=$(window).width()/2-300;
				document.getElementById("show").style.top=$(window).height()/2-100;
				//获得图片路径
				var photo_url=$(this).find("img").attr("src");
				//设置图片路径
				$("#photo").find("img").attr("src",photo_url);
				//单击放大后的图片消失
				$("#photo").click(function(){
					$("#show").fadeOut(300); //图片消失效果
				});
			});
		});
	</script>
  </head>
  
  <body>
    <div>
    	<ul>
    	<li>
	    <img src="01.gif"></img></li>
		<li>
	    <img src="02.gif"></img>
		</li>
    	</ul>
    </div> 
    <div id="show" style="display: none;">
    	<div id="photo" style="height: 320px;">
    		<img style="height: 320px"/>
    	</div>
    	<div id="info"></div>
    </div>
  </body>
</html>
  • 大小: 980 Bytes
  • 大小: 910 Bytes
0
顶
0
踩
分享到：
| HTML5的常用标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现单击图片放大

    创建一个名为`jquery-图片放大.js`的文件，并输入以下JavaScript代码： ```javascript $(document).ready(function(){ // 当图片被点击时 $("#myImg").click(function(){ var img = $(this); var modal = $("#...

    图片列表单击放大效果

    总结来说，"图片列表单击放大效果"是网页设计中提升用户体验的一种常见手法，通过结合CSS3、JavaScript和可能的第三方库，可以实现各种丰富的交互效果。同时，设计师和开发者还需要关注性能优化和无障碍性，以满足...

    js实现点击图片放大照片

    通常，我们会创建一个新的弹出层或者改变图片的CSS属性来实现放大效果。例如，我们可以创建一个新的`&lt;div&gt;`作为放大镜容器，然后将原图片复制一份并调整大小放置其中： ```javascript var img = document....

    javascript经典特效---jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载.rar

    LightBox是一种常见的图片查看模式，当用户点击图片时，图片会在当前页面上以半透明背景下的全屏或放大视图显示，提供了一种沉浸式的浏览体验。这种效果常用于照片画廊、产品展示等场景，使得用户可以更清晰地查看...

    TweenMax.js实现的鼠标单击放大镜图片局部放大效果源码.zip

    在“TweenMax.js实现的鼠标单击放大镜图片局部放大效果源码.zip”这个项目中，我们看到的是一个利用TweenMax.js来实现的一种常见UI交互——图片放大镜效果。 首先，我们需要理解这个效果的基本原理：当用户鼠标悬停...

    产品图片放大效果制作视频教程

    很多电商平台在展示产品图片的时候，都有一个放大镜的效果，放大产品图片看产品的细节。很多网友也给我留言，问我产品图片放大效果如何制作，虽然网上有插件可以实现，但是插件的功能是固定的，只能按他指定的结构和...

    手机js手势放大缩放图片插件

    总结来说，"手机js手势放大缩放图片插件"通过JavaScript和CSS3技术实现了移动设备上的手势交互，提供了平移和缩放图片的功能。它的核心包括手势识别、坐标转换、性能优化以及可配置性，是移动Web应用中提升图片浏览...

    鼠标点击图片、图片放大

    这个功能允许用户通过点击图片来查看更详细的图像信息，通常用于产品展示、摄影网站或者任何需要突出图片细节的场景。下面将详细解释这一功能的实现原理和技术要点。 1. 图片点击事件处理： 在HTML中，图片通常是`...

    Jquery相册鼠标经过放大图片插件实例源码

    而鼠标经过放大图片的功能则是提升用户体验的一种常见手法，当用户将鼠标悬停在图片上时，图片会自动放大，让用户能够更清晰地查看细节。 实现这个功能，我们主要依赖于jQuery库提供的事件监听和CSS操作。在...

    图片滚动展示单击放大代码（prettyPhoto）

    在IT领域，网页设计与开发中的用户体验至...通过以上步骤，你可以轻松地在自己的网页上实现图片滚动展示和单击放大的效果，提升用户的浏览体验。prettyPhoto的灵活性和易用性使其成为网页设计师和开发者们的热门选择。

    jquery单击文字或图片内容放大显示效果插件

    "jQuery单击文字或图片内容放大显示效果插件"正是一种用于提升这一体验的工具。jQuery，一个广泛使用的JavaScript库，使得前端开发更加简便，尤其在处理动态效果和用户交互方面。这个插件利用jQuery的功能，实现了...

    js实现单击图片放大图片的方法

    在网页开发中，有时我们需要为用户提供一种交互体验，即单击图片时图片会放大，以供用户更好地查看细节。这个功能可以通过JavaScript轻松实现。本文将详细介绍如何使用JavaScript来实现单击图片放大图片的方法，以及...

    javascript 图片放大效果函数

    本篇文章将详细解析一个简单的JavaScript图片放大效果函数，帮助读者理解其实现原理及如何在项目中应用。 #### 二、代码分析 ##### 1. CSS样式定义 首先，通过CSS对页面的基本样式进行定义，包括字体大小、字体...

    移动端图片放大滑动查看-photoswipe的使用

    "移动端图片放大滑动查看-photoswipe的使用"这个主题聚焦于如何利用Photoswipe这个JavaScript库来提升用户查看和交互图片的体验。Photoswipe是一款强大的轻量级库，专为移动设备设计，能够实现图片的滑动查看、放大...

    jQuery仿QQ空间图片查看特效（全屏，放大，缩小，旋转，镜像，鼠标滚轮缩放）

    本文将详细解析如何使用jQuery实现一个仿QQ空间的图片查看特效，其中包括全屏显示、图片放大缩小、旋转、镜像以及通过鼠标滚轮进行缩放等高级功能。 首先，我们需要在项目中引入jQuery库。可以下载jQuery的最新版本...

    jQuery mobile图片放大技术

    1. 单击放大：用户点击图片后，图片会在原位置以弹出层的形式放大显示，提供更好的查看细节。 2. 双击放大：用户双击图片时，图片在当前视窗内放大，通常会平移以保持图片中心可见。 3. 滑动手势放大：用户可以通过...

    jQuery-单击文字或图片内容放大显示且含圆角投影效果

    在网页设计中，为了提升用户体验，常常会使用到一些交互效果，例如“jQuery-单击文字或图片内容放大显示且含圆角投影效果”。这种效果可以让用户点击元素后，元素以放大并带有圆角和投影的形式展示，模拟出类似放大...

    jQuery特效单击文字或图片放大插件

    jQuery特效单击文字或图片放大插件是一种常见的前端交互设计，它增强了网页的用户体验，使得用户在点击文字或图片时可以预览更大的视图。这种效果常见于产品展示、图片库或者任何需要突出细节的场景。jQuery作为...

Magicbox
Global site tag (gtag.js) - Google Analytics