水平滑动的图片浏览器

水深无声 2022-07-16 14:14 159阅读 0赞

以下是较为简单的水平滑动的图片浏览器，主要用CSS来实现的

<!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>无标题文档</title>  
<style>  
.leng\{  
width:500px;  
overflow:scroll;//如果图片满溢的话，就用滚动条来显示其他的内容。  
margin:auto;  
  
\}  
.images\{  
width:790px; /\*关键在这里，因为将宽度设置为能够容纳所有图片的大小，滚动条才会实现水平滚动条\*/  
margin:auto;  
\}  
  
  
</style>  
</head>  
  
  
<body>  
<div class="leng">  
<div class="images">  
<img src="file:///G|/web/images/4.jpg" width=150px heignt=150px/>  
<img src="3.jpg" width=150px heignt=150px/>  
<img src="file:///G|/web/images/1.jpg" width=150px heignt=150px/>  
<img src="file:///G|/web/images/18.jpg" width=150px heignt=150px/>  
<img src="file:///G|/web/images/19.jpg" width=150px heignt=150px/>  
</div>  
</div>  
</body>

</html>

![Center][]

[Center]: /images/20220709/cea6b54919b9427b94894b96dd7aee6e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android ListView列表中的子item随手指水平左右滑动，滑动删除基础

package zhangphil.app; import android.app.ListActivity; import android.

「爱情、让人受尽委屈。」/ 2022年12月19日 06:22/ 0 赞/ 161 阅读

相关 CSS设置水平滑动动画实现文字水平播放

我将动画属性animation设置在class里可行，设置在style里无效，这是为什么呢 <div class="textG"> <span>{

小灰灰/ 2022年12月01日 14:22/ 0 赞/ 123 阅读

相关 Android 图片滑动练习

练习：放入三张图片，使其滑动显示，并在最后一张跳转到另一个界面。布局： <?xml version="1.0" encoding="utf-8"?> <R

Love The Way You Lie/ 2022年09月24日 15:16/ 0 赞/ 129 阅读

相关 UI--单行文本水平触摸滑动效果

1.初衷　　最近做应用的时候有用到TextView单行长文本，当文本内容过长时候又想实现触摸水平滑动效果。网上找了很多，都没有看到有效解决方案。　　其中，看到最

爱被打了一巴掌/ 2022年08月19日 12:13/ 0 赞/ 124 阅读

相关水平滑动的图片浏览器

以下是较为简单的水平滑动的图片浏览器，主要用CSS来实现的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

水深无声/ 2022年07月16日 14:14/ 0 赞/ 160 阅读

相关 JS实例-图片上下滑动

JS练习实例-自动上下滑动图片效果图： ![图片上下滑动][20161007100502577] <!DOCTYPE html> <html>

水深无声/ 2022年07月16日 05:12/ 0 赞/ 169 阅读

相关简易图片浏览器！

加上命名空间 using system.io;拖一个PICTUREBOX，两个TEXTBOX string fold = "";//用来存不包含文件后缀名的路

亦凉/ 2022年06月02日 00:39/ 0 赞/ 218 阅读

相关图片无缝滑动

图片的无缝滑动效果，可以用到很多地方，自己可以啦代码。首先是 css样式： html,body\{ margin: 0; padding: 0; width

港控/mmm°/ 2022年05月20日 01:26/ 0 赞/ 169 阅读

相关两列图片可滑动

做了一个只显示两列的可滑动的view，可以根据图片多少来添加宽度，反正只是显示两列。这种类似的只有两种样式，一个是单列，一个是多列。话不多说 ![watermark_

青旅半醒/ 2022年04月22日 04:04/ 0 赞/ 158 阅读

相关滑动鼠标图片缩放

<img id="chgImg" src="img/1.jpg" width="760"

悠悠/ 2021年11月05日 15:26/ 0 赞/ 361 阅读