关于使用superSlide完成卡片的横向滚动

最新推荐文章于 2023-03-23 09:49:07 发布
最新推荐文章于 2023-03-23 09:49:07 发布
阅读量643 收藏
点赞数
分类专栏： javaweb积累 文章标签： jsp jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DING135DING/article/details/42738011
版权

话不多说，贴上自己的代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML >
<html ><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>

<body>
		<style type="text/css">
		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }
		a:hover{ color:#1974A1;  }
		
		/* 本例子css */
		.txtScroll-left .hd{position:absolute; padding:10px; width:430px;hight:300; overflow:hidden;}
		.txtScroll-left .prev{position:absolute;background:url("img/zongh_58.png") no-repeat;background-position:center center;display:inline;width:30px;height:40px; float:left; left:470px;top:30px; cursor:pointer;background-color:#EAEDF2;opacity: 0.7;filter:alpha(opacity=70)}
		.txtScroll-left .next{position:absolute;background:url("img/zongh_55.png") no-repeat;background-position:center center;display:inline;width:30px;height:40px; float:left; left:10px;top:30px; cursor:pointer;background-color:#EAEDF2;opacity: 0.7;filter:alpha(opacity=70)}
		
		.txtScroll-left .bd{ padding:10px; width:430px;hight:100px; overflow:hidden; display:inline;float:left;z-index:2;}
		.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
		.txtScroll-left .bd ul li{ margin-right:20px;  float:left; height:24px; line-height:24px;  text-align:left; _display:inline;}
		.content_div{width: 92%;height: 100%;float: left;}
		.card_content_change{border:1px solid #EAEDF2;background-color:blue}
		</style>
		
		<script type="text/javascript">
		$(document).ready(function(){
			$(".li").mouseenter(function(){
				$(this).addClass("card_content_change");
			});	
			$(".li").mouseleave(function(){
				$(this).removeClass("card_content_change");
			});
		});
			
		</script>
		
		<!--<div class="txtScroll-left">
			 <div class="next"></div>
			<div class="bd">
				<ul class="infoList">
					<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
					<li><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a><span>[11-11]</span></li>
					<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a><span>[11-11]</span></li>
					<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
					<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
					<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
				</ul>
			</div>
			<div class="prev"></div>
			</div> -->
			
			<div  class="content_div" style="overflow: auto;">
   				<div style="height:150px; width:49%;">
   					<div style="width:100%;height:20%;background-color:#EAEDF2;"><div style="font-size: 14px;padding: 5px;">入院记录</div></div>
   					<div  style="width:100%;height:80%;background-color:white;">
   						<div  style="width:100%;height:10%;"></div>	
   						<div  class="txtScroll-left" style="width:100%;height:90%;background-color:white;position:relative">					
						<div class="bd" style="width:80%;height:100%;overflow: hidden;float:left;display:inline;">
	   						<ul class="infoList" style="height:100px">
							<li  style="list-style-type:none;">
							<div  style="width:110px;height:80px;float:left;background-color:#F5F6FB;">
								<div class="li" style="float:left;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录1</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录2</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录3</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录4</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录5</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录6</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录7</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
							<li style="list-style-type:none;">
							<div style="width:110px;height:80px;float:left">
								<div style="float:left;background-color:#F5F6FB;width:100px;height:80px;cursor: pointer;" οnclick="showBlobContent()">
									<div style="color:#1A8770;text-align:center;height: 100%;font-size: 14px;"><div style="padding: 10px">记录8</div></div>	     							
								</div>
								<div style="float:left;width:10px;height:100%;"></div>
							</div>
							</li>
	   						</ul>
   						</div>
   						<div class="next" ></div>
   						<div class="prev" ></div>
   						</div>
				</div>
			</div>
			</div>
		<script type="text/javascript">
		 	jQuery(".txtScroll-left").slide({mainCell:" .bd ul",autoPage:true,effect:"left",scroll:1,vis:4,trigger:"click"});
		</script>
</body>
</html>

关于superSilde的一些参数
可以参考：http://www.superslide2.com/param.html

DING135DING
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery商品图片横向轮播代码
06-24
jQuery商品图片横向轮播代码是一款带左右按钮控制的商品图片自动轮播滚动展示，悬停图片透明高亮效果代码。
SuperSlide 知识点一
weixin_49982989的博客
02-17 463
SuperSlide 参数： 新手理解： 参数 版本 默认值 说明 type 2.1 slide 效果类型，可选"slide"||“menu”，引入type:“menu"专门处理菜单/导航效果 defaultPlay 2.1 true 默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单 returnDefault 2.1 false 鼠标移出容器，是否返回默认状态，常用于导航/菜单 mouseOverStop 2.1 true 鼠标移到容器层（无缝滚动是mainCell）是否停止播放 playSta
vue实现卡片滚动效果
L15550932101的博客
03-23 2520
vue实现左右切换卡片展示效果
vue2.0 使用 swiper 实现PC端卡片左右虚拟slides滑动
GotYoung的博客
08-11 3622
vue2.0 使用 swiper 实现PC端卡片左右虚拟slides滑动
【Vue移动端实现横向排列内容，超出部分隐藏，并且滚动展示】
weixin_48240707的博客
02-21 1964
vue移动端如何实现横向排列内容，并且滚动展示
iOS使用UICollectionView实现横向滚动照片效果
08-26
主要为大家详细介绍了iOS使用UICollectionView实现横向滚动照片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android使用GridView实现横向滚动效果
08-27
主要为大家详细介绍了Android使用GridView实现横向滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯文字横向滚动组件 marquee.vue
01-07
JavaScript ，前端，vue
jQuery文字横向滚动效果的实现代码
10-22
下面小编就为大家带来一篇jQuery文字横向滚动效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于superSlide的轮播-实用插件教程-源码-
qq_42250281的博客
03-08 1221
superrSlide实用案例加源码 轮播图篇 jquery以及superslide插件下载: https://pan.baidu.com/s/1z-446DTMdJ0o7R450BxYXw 提取码：sige1、 横向全屏焦点轮播图成品效果图2、W3c首页焦点图成品效果图3、真~全屏焦点图成品效果图4、前后图片预览-焦点图成品效果图 jquery以及superslide插件下载: https://pan.baidu.com/s/1z-446DTMdJ0o7R450BxYXw 提取码：sige 1、 横向
Vue2CSwipeMobile一个简单的Vue2x移动端卡片滑动组件
08-12
Vue2-C-Swipe Mobile 一个简单的移动端卡片滑动组件，适用于Vue2.x
vue --- 横向滚动菜单
zxsy19966的博客
06-18 8510
【vue】横向滚动菜单
无缝滚动
diebaiying3731的博客
06-18 122
Html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>banner</title> <!-- <script type="text/javascript" src="http://ap...
vue 实现数字滚动卡片
Now_li的博客
11-24 1633
工作场景需求一个数字滚动的卡片展示，具体实现功能： html页面代码： 因为场景是五位数字的场景，但是data定义number不能00000又懒的string去转number，所以定义了六位数然后投了个巧v-show直接去除第一位数。 :style="{transform: translateY(-${item*39}px)}" 是滚动的关键，其中39px是自定义的view高度 <view class="num_view" v-for="(item, index) in this.realTime"
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 2万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
Vue+跑马灯样式实现文字横向滚动
m0_48607837的博客
11-22 2361
Vue+跑马灯样式实现文字左右滚动 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 可以自己封装一个组件,也可以自己写,也可以复制以下代码 封装完成以后要在所需的组建中引入,注册,并使用 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="
vue 实现横向滚筒滚动
TZ1284063988的博客
01-13 1149
标题引入 vue-seamless-scroll 命令行执行： npm install vue-seamless-scroll --save 然后在main.js中引用： import scroll from 'vue-seamless-scroll' Vue.use(scroll) 页面内使用 <template> <div class="laboratory"> <div class="title"> <span>实验室信
android卡片层叠效果_3个超秀的 Vue 卡片翻动组件Vue-Card-Slide
weixin_39772652的博客
11-20 937
今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。1、vue-tantan-stack一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。功能分析堆叠滑动的功能很简单，用一张图概括就是堆叠效果堆叠图片效果在网上有大量的实例，实现的方法大同小异，主要通过在父层设定 perspective 及 perspective-origin，来实现子...
vue实现卡片式上下滑动_小卡片左右滑动的实现
weixin_39551554的博客
12-20 3365
背景项目需求，要实现卡片左右滑动的功能，类似这样：在实现过程中遇到了如下问题：卡片角标实现边距问题安卓手机适配问题翻页问题角标实现角标及文字可以采用绝对定位和css3的rotate来实现，注意点是在父元素上要overflow：hidden.recomm-item-sup{position: absolute;/*background-color: aquamarine;*/color: #fff;...
小程序实现卡片横向滚动 滚动到中间的卡片变大
最新发布
06-06
1. 在小程序的wxml文件中，使用scroll-view组件来实现卡片的横向滚动。设置scroll-x属性为true，表示支持横向滚动。 2. 在scroll-view内部使用一个view组件包裹每一个卡片，并设置每个卡片的宽度和高度。 3. 在每...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值