图片浏览

news/2024/10/17 16:29:15/

图片的浏览,经常会看见在图片的左边点一下转到上一张图片,点右边一下,转到下一张图片,而且鼠标在左边时鼠标是向左的方向,鼠标在右边时鼠标是向右方向。以下示例是用html做的静态的形式,如果用jsp则可以做成动态的形式。

准备图片:

6TP0TINF4E9G0005[1].jpg

65A0AB9531J70008[1].jpg

6TP4ICSU4E9G0005[1].jpg

left.cur

right.cur

新建html页面:Noname1.html

原代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
 #div1{
  cursor:url(left.cur);
 }
 #div2{
  cursor:url(right.cur);
 }
  </style>
  <script type="text/javascript">
  <!--
 function chgBackup(obj,imgsrc){
  var divobj = obj.parentNode;
  divobj.style.background = 'url(' + imgsrc + ')';
  divobj.style.backgroundRepeat = 'no-repeat';
  divobj.style.backgroundPosition = 'center';
 }
  //-->
  </script>
 </head>

 <body>
 
  <div style="background:url(6TP0TINF4E9G0005[1].jpg) center;background-repeat:no-repeat;width:900px;height:564px;border:solid red 1px">
 <div id="div1" style="float:left;width:50%;height:100%;" οnclick="chgBackup(this,'65A0AB9531J70008[1].jpg')">
 </div>
 <div id="div2" style="float:left;width:49%;height:100%;" οnclick="chgBackup(this,'6TP4ICSU4E9G0005[1].jpg')">
 </div>
  </div>
  <hr>
 
 </body>
</html>

效果图:

当鼠标在左边时,它会向左,如果鼠标在右边时,它会向右。

 源码下载地址:

http://download.csdn.net/source/3043926


http://www.ppmy.cn/news/150199.html

相关文章

windows的图片浏览器

windows的图片浏览器 之前用华为手机&#xff0c;截图什么的&#xff0c;windows 7都能正常打开&#xff0c;自从华为手机升级了以后&#xff0c;截图一律都在windows 7的图片浏览器里打不开&#xff0c;提示内存不足&#xff0c;网络上说要用第三方图片软件就可以&#xff0c;…

图片浏览器

ImageViewer 项目地址&#xff1a;albert-lii/ImageViewer 简介&#xff1a; :crystal_ball:图片浏览器&#xff0c;支持图片手势缩放、拖拽等操作&#xff0c;自定义 View的模式显示&#xff0c;自定义图片加载方式&#xff0c;更加灵活&#xff0c;易于扩展&#xff0c;同时…

一个简单的图片浏览

1、图源API 在问度娘之后发现了几个可用的API&#xff0c;主要来自下面几个博主的分享 在线随机美图API接口服务 可以获取随机图片的API收集 随机图片API接口 最终自己测试使用的是下面三个网址&#xff1a; https://uploadbeta.com/api/pictures/random //必应推荐 https://im…

ImageView组件的应用:图片浏览器

随时随地阅读更多技术实战干货&#xff0c;获取项目源码、学习资料&#xff0c;请关注源代码社区公众号(ydmsq666) 本实例用来练习ImageView组件的使用&#xff0c;实现一个图片浏览器&#xff0c;该图片浏览器可以改变所查看的图片的透明度&#xff0c;切换图片&#xff0c;而…

鲁大师2022年Q1季报公布,九号获得最智能电动车品牌

近日&#xff0c;鲁大师2022年Q1季报发布了智能电动车品牌排行榜&#xff0c;其中&#xff0c;备受瞩目的九号电动车品牌以627分的绝对优势夺得鲁大师2022年Q1季度最智能电动车品牌。 据专业人士了解&#xff0c;鲁大师智慧实验室的目标是建立以硬件产品数据采集为主要内容的数…

高德API JS 高德地图获取多个坐标点的中心点

高德API JS 高德地图获取多个坐标点的中心点 一、需求 我需要在地图上展示多个地点&#xff0c;并且展示的同时&#xff0c;地图缩放到合适的大小&#xff0c;要求刚好能显示全部点位&#xff0c;并且边缘留有一部分间隔。 做成如图所示这样。 二、需要用到的 AMap 类库 经…

鲁大师电动车智能化测评报告第九期

鲁大师第九期智能化电动车测评排行榜数据来源于鲁大师智慧实验室&#xff0c;测评的车型均为市面上主流品牌的主流车型&#xff0c;截止目前&#xff0c;鲁大师智能化电动车测评的车型高达40余种&#xff0c;且还在不断增加和丰富中。 一 测评依据 鲁大师电动车智能化测评体系包…

LNMP搭建过程详解,验证搭建论坛

LNMP搭建过程详解&#xff0c;验证搭建论坛 一、安装Nginx服务1、安装依赖包2、创建运行用户3、编译安装4、优化路径5、添加Nginx 系统服务 二、安装MySQL服务1、安装Mysql环境依赖包2、创建运行用户3、编译安装4、修改mysql配置文件5、更改mysql安装目录和配置文件的属主属组6…