当前位置: 首页 > news >正文

上下左右滚动插件

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<div class="container">
	<div class="row">
		<div class="col-md-4 tb">
			<ul class="box list-unstyled">
				<li>
					<a href="#">新闻</a>
				</li>
				<li>
					<a href="#">体育</a>
				</li>
				<li>
					<a href="#">歌曲</a>
				</li>
				<li>
					<a href="#">文艺</a>
				</li>
			</ul>
		</div>
		<div class="col-md-8 lr">
			<ul class="box1 list-unstyled list-inline">
				<li>
					<a href="#">新闻</a>
				</li>
				<li>
					<a href="#">体育</a>
				</li>
				<li>
					<a href="#">歌曲</a>
				</li>
				<li>
					<a href="#">文艺</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<style>
.tb {
	height: 30px;
	overflow: hidden;
}

.tb ul li {
	height: 30px;
	line-height: 30px;
	background: #999;
	text-align: center;
	font-size: 14px;
}

.lr {
	padding: 0;
}

.lr ul li {
	padding: 0;
	font-size: 14px;
	line-height: 30px;
	background: #999;
	text-align: center;
}
</style>
<script>
	;
	(function($, window, docuemnt, undefined) {
		$.fn.autoScroll = function(config) {
			/*config*/
			config = $.extend({}, $.fn.autoScroll.defaults, config);
			/*this*/
			var $ele = this;
			$ele.css({
				"font-size" : "0"
			}).parent().css({
				"overflow" : "hidden"
			});
			if (config.direction == 2) {
				$ele.width($ele.parent().width() * $ele.children().size());
				$ele.children().width($ele.parent().width());
			}
			/*function*/
			function run() {
				$ele.children().eq(0).click(
						function() {
							console.info(this);
							var m_d = "";
							var m_d_d = 0;
							switch (config.direction) {
							case 1:
								m_d = "marginTop";
								m_d_d = $(this).height();
								break;
							case 2:
								m_d = "marginLeft";
								m_d_d = $(this).width();
								break;
							default:
								m_d = "marginTop";
								m_d_d = $(this).height();
								break;
							}

							var animateConfig = $.parseJSON('{\"' + m_d
									+ '\":\"-' + m_d_d + 'px\"}');
							var cssConfig = $.parseJSON('{\"' + m_d + '\":0}');

							$(this).stop().animate(animateConfig, config.speed,
									function() {
										var appendEle = $(this).css(cssConfig);
										$(this).remove();
										$ele.append(appendEle);

									});

						}).click();
			}
			/*自动运行*/
			var autoRun = setInterval(run, config.delay);
			/*hover*/
			$ele.hover(function() {
				clearInterval(autoRun);
			}, function() {
				autoRun = setInterval(run, config.delay);
			});

		};
		$.fn.autoScroll.defaults = {
			"delay" : 5000,
			"speed" : 800,
			"direction" : 1//1向上,2向左
		};
	})(jQuery, window, document);

	$(function() {
		$(".box").autoScroll();
		$(".box1").autoScroll({
			"direction" : 2
		});

	});
</script>

 

转载于:https://my.oschina.net/u/1773772/blog/707383

相关文章:

  • TableViewCell重影问题
  • HDU1048 The Hardest Problem Ever
  • CentOS下配置Hadoop集群:java.net.NoRouteToHostException: No route to host问题的解决
  • Linux 下vsftp配置文件
  • Flymeos插桩适配教程
  • 在liunx中构建DNS主从服务器的配置文档
  • httpd搭建虚拟主机、设置访问认证以及https相关的用法
  • 百度编辑器(Ueditor)最新版(1.4.3.3)插入锚点失败原因分析及BUG修复
  • Restore Volume 操作 - 每天5分钟玩转 OpenStack(60)
  • jsp页面实现局部刷新
  • k8s如何管理Pod
  • 全屏无标题栏解决方法
  • SQL Server 2008 中SQL查询语句中字段值不区分大小写问题处理
  • 初识JavaScript
  • iOS: 如何调节UITabbarItem的图片和文字位置
  • python3.6+scrapy+mysql 爬虫实战
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • go append函数以及写入
  • JavaScript 一些 DOM 的知识点
  • JavaScript新鲜事·第5期
  • JAVA之继承和多态
  • JS学习笔记——闭包
  • MySQL的数据类型
  • overflow: hidden IE7无效
  • PAT A1120
  • spring-boot List转Page
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 初识 beanstalkd
  • 复习Javascript专题(四):js中的深浅拷贝
  • 关于springcloud Gateway中的限流
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • ------- 计算机网络基础
  • 前端相关框架总和
  • 前端性能优化--懒加载和预加载
  • 使用docker-compose进行多节点部署
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 系统认识JavaScript正则表达式
  • Linux权限管理(week1_day5)--技术流ken
  • ​io --- 处理流的核心工具​
  • ​Linux·i2c驱动架构​
  • # 数据结构
  • #{} 和 ${}区别
  • #100天计划# 2013年9月29日
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (Forward) Music Player: From UI Proposal to Code
  • (八十八)VFL语言初步 - 实现布局
  • (十二)devops持续集成开发——jenkins的全局工具配置之sonar qube环境安装及配置
  • (一)基于IDEA的JAVA基础1
  • (译)2019年前端性能优化清单 — 下篇
  • (转)总结使用Unity 3D优化游戏运行性能的经验
  • .dwp和.webpart的区别
  • .NET 8.0 中有哪些新的变化?
  • .NET Core引入性能分析引导优化
  • .net知识和学习方法系列(二十一)CLR-枚举