简易的图片浏览功能

最新推荐文章于 2021-01-15 13:01:07 发布
最新推荐文章于 2021-01-15 13:01:07 发布
阅读量333 收藏
点赞数
文章标签： function javascript border server filter xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzan0123/article/details/7624204
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowPicInfo.aspx.cs" Inherits="WebRoot.PictureScore.ShowPicInfo" %>

<!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 runat="server">
<title></title>
<script src="../ClientRes/jquery-1.6.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
页面构建begin
var SellerScroll = function (options) {
this.SetOptions(options);
this.lButton = this.options.lButton;
this.rButton = this.options.rButton;
this.oList = this.options.oList;
this.showSum = this.options.showSum;
this.pList = this.options.pList;
this.pWidth = $("#" + this.pList).width();
this.iList = $("#" + this.options.oList + " > li");
this.iListSum = this.iList.length;
this.iListWidth = this.iList.outerWidth(true);
this.moveWidth = this.iListWidth * this.showSum;
this.dividers = Math.ceil(this.iListSum / this.showSum); //共分为多少块
this.moveMaxOffset = (this.dividers - 1) * this.moveWidth;

this.LeftScroll();
this.RightScroll();
};

SellerScroll.prototype = {
SetOptions: function (options) {
this.options = {
lButton: "leftbtn",
rButton: "rightBtn",
oList: "carousel_ul",
pList: "carousel_inner",
showSum: 1 //一次滚动多少个items
};
$.extend(this.options, options || {});

},
ReturnLeft: function () {
return isNaN(parseInt($("#" + this.oList).css("left"))) ? 0 : parseInt($("#" + this.oList).css("left"));
},
LeftScroll: function () {
var one=<%=index %>;
if (this.dividers == 1&&one==1) return;
var _this = this, currentOffset;
currentOffset = _this.ReturnLeft();

$("#" + this.lButton).click(function () {
currentOffset = _this.ReturnLeft();
if (currentOffset < 0) {
$("#" + _this.oList + ":not(:animated)").animate({ left: "+=" + _this.moveWidth }, "slow");
} else {
var a=<%=index %>;
if (a!='1') {//如果是不是第一页则调用上一页的方法
__doPostBack('btnPreviousGroup', '');
}

}
});
},
RightScroll: function () {

if (this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.rButton).click(function () {
currentOffset = _this.ReturnLeft();
if (_this.moveMaxOffset - Math.abs(currentOffset) >= _this.pWidth) {
$("#" + _this.oList + ":not(:animated)").animate({ left: "-=" + _this.moveWidth }, "slow");
} else {
var a=<%=index %>;
var b=<%=Session["sum"] %>;
if (a!=b) {//如果是不是最后一页则调用下一页的方法
__doPostBack('btnNextGroup', '');
}

}
});
}
};
页面构建end
</script>
<style type="text/css">
#carousel_inner
{
width: 802px;
height: 602px;
overflow: hidden;
position: relative;
}
#carousel_ul
{
width: 99999px;
height: 600px;
position: relative;
}
#carousel_ul li
{
float: left;
width: 802px;
height: 602px;
display: inline;
}
</style>
</head>
<body style="height: 100%; margin: 10px; padding: 0px; font-size: 12px;">
<form id="form1" runat="server">

<div style="padding: 10 0 10 0; border: solid 1px silver; border-top: 0; margin: 1px;
height: 100%">
<div id="carousel_inner" style="margin: 0 auto; text-align: center; vertical-align: middle;">
<div id="leftbtn" style="position: absolute; z-index: 99999; height: 600px; width: 400px;
cursor: pointer; filter: alpha(opacity=0); opacity: 0; background-color: #FFFFFF;">
</div>
<div id="rightBtn" style="position: absolute; z-index: 99999; height: 600px; width: 400px;
cursor: pointer; left: 401px; filter: alpha(opacity=0); opacity: 0; background-color: #FFFFFF;">
</div>
<div style="width: 50px; z-index: 888; margin-top: 270px; left: 50px; position: absolute;">
<img id="leftbtn1" style="cursor: pointer; display: none; width: 70px;" alt="上一张"
src="../ClientRes/images/prev.png" />
</div>
<div id="carousel_ul" runat="server">
</div>
<div style="width: 50px; z-index: 999; margin-top: -330px; position: absolute; right: 90px;">
<img style="cursor: pointer; display: none; width: 70px;" alt="下一张" id="rightBtn1"
src="../ClientRes/images/next.png" />
</div>
</div>
</div>
<!-- 小图列表 -->
<div id="one" style="padding: 10 0 10 0; border: solid 1px silver; border-top: 0;
margin: 1px; height: 100%;" runat="server">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr align="center">
<td align="center">
<div style="width: 12px; z-index: 888; margin-top: -25px; position: absolute; top: 693px;">
<!--小图上一组 -->
<button dojotype="dijit.form.Button" id="btnPreviousGroup" iconclass="dijitEditorIcon dijitEditorIconSave"
showlabel="true" runat="server" onserverclick="btnPreviousGroup_Click" style="background: url(../ClientRes/images/goleft2.gif);
width: 11px; height: 56px; border-style: none; cursor: pointer; background-repeat: no-repeat;" οnclick="javascript:if(1==1){__doPostBack('btnPreviousGroup_Click','');}">
</button>
</div>
</td>
<td align="center">
<!--小图缩略图列表 -->
<div id="minImg" runat="server" style="text-align: center; margin-top: 10px; padding: 0px 0px 20px 0px;
margin-bottom: 20px; text-align: center; margin-left: 20px; margin-right: 10px;">
</div>
</td>
<td align="center" style="margin-left: 20px;">
<!--小图下一组 -->
<div style="width: 12px; z-index: 888; margin-top: -25px; position: absolute;">
<button dojotype="dijit.form.Button" id="btnNextGroup" iconclass="dijitEditorIcon dijitEditorIconSave"
showlabel="true" runat="server" onserverclick="btnNextGroup_Click" style="background: url(../ClientRes/images/goright2.gif);
width: 11px; height: 56px; border-style: none; cursor: pointer; background-repeat: no-repeat;" οnclick="javascript:if(1==1){__doPostBack('btnNextGroup_Click','');}">
</button>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(function () {
var width = 796;
var height = 596;
$("#carousel_ul img").each(function () {
if ($(this).get(0).offsetWidth > $(this).get(0).offsetHeight) {
$(this).width(width + "px");
var vspace = height - $(this).get(0).offsetHeight;
$(this).css({ padding: vspace / 2 + "px " + "0px " + vspace / 2 + "px " + "0px" });
} else {
$(this).height(height + "px");
}
});
});
</script>
</form>
</body>
</html>

yuzan0123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的JS图片浏览功能
05-26
NULL 博文链接：https://vikki.iteye.com/blog/497147
实现图片浏览器功能
u011927449的博客
08-29 311
实现图片浏览器功能 效果: 此教程涉及到较多的category的使用,注意. 思路: 1. 获取一个view在UIWindow中的frame值 2. 获取这个view的快照 3. 对这个快照进行动画全屏 4. 全屏消失后移除掉这个快照 源码: NSObject+WeakRelated.h 与NSObject+WeakRelated.m (让两个对象之间产生关联) // // NSObject+WeakRelated.h // ScrollViewShowImage // // Crea...
vue简易切换图片案例
xtho62的博客
01-15 547
考察：v-show集合数组，以及使用this关键字操作data里的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> </head>
照片浏览器
05-29 141
昨天写了个图片浏览器，很简单，主要就是用一个JFileChooser导入一个文件，然后在文件父目录下导入下一个 或者上一个图像。 东西做好了，但是还有一个问题，就是我界面图片的路径设置有问题，在打成Jar包后就不能正常显示我的UI图片了。留着以后再解决吧。 package ImageScanner; import java.awt.FlowLayout; import java.awt.Gra
Android实现网页图片浏览功能
08-30
Android 实现网页图片浏览功能 Android 实现网页图片浏览功能是 Android 开发中的一种常见需求，本文将详细介绍如何实现网页图片浏览功能，包括输入图片的 URL，然后点击按钮加载出来图片。 知识点一：Activity 的...
Android 图片浏览全屏缩放
05-10
综上所述，实现“Android 图片浏览全屏缩放”的功能涉及到了图片加载库的选择与使用，自定义ImageView处理手势检测，以及使用ViewPager实现图片的滑动切换。通过这些技术的组合，我们可以创建出流畅、高性能的图片...
实现图片浏览功能
04-02
这是一款非常不错的实现图片浏览功能的类库源码，该功能齐全，不但可以支持网络下载图片，图片缓存，图片pinch缩放，而且还可以实现如果图片下载出错，会显示预定义的placeholder图片，源码比较完整，大家可以参考...
图片浏览+切图功能
09-21
超级影像浏览
原生JS实现切换图片demo
白默若的博客
05-06 472
原生JS实现切换图片demo 一个小小的学习页面，运用html、css、js基本知识，做一个切换图片的页面。
html-实现图片的预览功能
cnkeysky的博客
02-02 5487
html 实现图片的预览功能
图片预览功能的实现
前端御书房
11-21 1932
图片预览功能 图片预览功能在日常中也很常见就是在提交图片时，可以在选中文件之后在页面中显示其内容的功能。 那么怎么实现呢。 目前我所知有两种方式 文件读写 我们可以利用文件读写来讲上传的文件内容获取到在渲染到页面中。 document.getElementById("btn").onclick = function() { var reader = new FileReader(); reader.onload = function(e) { c
js+css3 3D倾斜图片列表布局点击放大切换特效
qq_43434300的博客
08-26 428
style.css代码： body,p{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: middle; } body{ background: #000000; color: #fff; overflow-x: hidden; /* 旋转后会出现横向的滚动条 */ } /*works*/ #wrap{margin-top: 150p
Android实现图片浏览功能（图片器原理实现）
zkbilian的博客
04-12 6914
项目开发中做图片浏览的时候会用到这个功能，用原理实现的小工具 效果图： public class MainActivity extends AppCompatActivity implements View.OnClickListener { int imgs[] = {R.mipmap.ceshi, R.mipmap.ceshi2, R.mipmap.ceshi3, R.mi...
简单的图片库浏览页面
Lucine_mm的博客
10-13 1591
功能描述： 点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面。 代码实现： //html代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Image Gallery&lt;/title&gt;
图片预览功能实现
住在城北的猫
04-27 1940
图片上传预览图片的上传在目前的项目中几乎都会用到，上传图片使如果能够及时的预览到上传图片，对于提高用户体验是相当的中，本博客就以此为基础，撰写上传图片使得预览功能。
Swiper实现带两侧带遮罩层的滑动效果
u010289111的专栏
09-26 4681
swiper 3我原来采用的是swiper3实现的 主要代码我po一下 html: div class="swiper-container">                                    div class="swiper-wrapper">                                        div class="swiper-
MATLAB 图片浏览（简易版）
yancy的专栏
04-17 1543
新建一个GUI界面；拖入一个“轴”axes(我命名为show_picture);在拽入一个按钮（命名为打开图片；）界面如下： 在代码里添加这么一段就可以了function open_picture_Callback(hObject, eventdata, handles) % hObject handle to open_picture (see GCBO) % eventdata r
Jquery实现图片左右滚动，没有头尾的，一直循环
weixin_30919919的博客
09-10 103
Jquery实现图片左右滚动，没有头尾的，一直循环。这样子的例子我已经发了很多了，这边放两个链接 http://www.corange.cn/archives/2010/06/3654.html http://www.corange.cn/archives/2010/06/3649.html http://www.corange.cn/archives/2010/06/3650.html ...
android studio简易图片浏览代码
最新发布
06-06
在Android Studio中创建一个简单的图片浏览功能，你可以使用`GridLayoutManager`和`ImageView`结合`RecyclerView`来展示一组图片。以下是一个简化的步骤和代码片段： 1. 首先，确保你的项目已经添加了RecyclerView依赖。如果还没有，可以在build.gradle文件中添加： ```gradle dependencies { implementation 'com.android.support:recyclerview-v7:28.0.0' // 使用较旧版本是为了兼容，实际应用请使用最新版本 } ``` 2. 创建一个新的布局文件（例如：`activity_main.xml`），定义RecyclerView： ```xml <androidx.recyclerview.widget.RecyclerView android:id="@+id/image_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" /> ``` 3. 在Activity或Fragment中设置布局，并初始化RecyclerView： ```java RecyclerView recyclerView = findViewById(R.id.image_recycler_view); recyclerView.setLayoutManager(new GridLayoutManager(this, 2)); // 2表示每行显示2张图片 // 假设你有一个图片列表 List<String> imagePaths = ...; // 这里应该替换成实际的图片路径集合 // 创建一个适配器 ImageAdapter adapter = new ImageAdapter(imagePaths, this); recyclerView.setAdapter(adapter); ``` 4. 创建一个`ImageAdapter`，继承自`RecyclerView.Adapter`： ```java public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> { private List<String> imagePaths; private Context context; public ImageAdapter(List<String> imagePaths, Context context) { this.imagePaths = imagePaths; this.context = context; } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_image, parent, false); return new ViewHolder(itemView); } @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { holder.imageView.setImageResource(imagePaths.get(position)); } @Override public int getItemCount() { return imagePaths.size(); } class ViewHolder extends RecyclerView.ViewHolder { ImageView imageView; ViewHolder(@NonNull View itemView) { super(itemView); imageView = itemView.findViewById(R.id.image_view); } } } ``` 在这个例子中，每个`item_image.xml`布局文件通常包含一个ImageView用于显示图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值