response slider
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.custom.js"></script>
<style>
html, body, img, ul, p {
margin: 0;
padding: 0;
} body {
} .content {
position: fixed;
height: 100%;
width: 100%;
} .img {
height: 100%;
width: 100%;
position: relative;
} .img img {
position: absolute;
top: 50%;
left: 50%;
} .info {
position: fixed;
z-index: 999;
background: #000;
color: #fff;
left: 50%;
top: 50%;
} .super-slider {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
} .super-slider .super-content li {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
} .super-slider .super-content li img {
width: 100%;
border: 0;
} .super-content li > span {
position: absolute;
line-height: 1.5;
background: rgba(0,0,0,0.5);
bottom: 12px;
left: 0;
color: #fff;
padding: 0px;
width: 100%;
z-index: 999;
} .sp-slider-text {
padding: 20px;
display: block;
} .super-nav {
width: 20px;
display: block;
position: absolute;
right: 20px;
top:45%;
z-index: 999;
} .super-nav li {
list-style: none;
display: block;
height: 20px;
width:20px;
background: #ccc;
border-radius:50%; margin:5px; } .super-nav li:hover {
background: #aaa !important;
} .super-nav li.selected {
background: #aaa;
} .super-nav li:last-child {
border-right: 0;
}
</style> <script> ; (function ($) {
"use strict"
$.fn.superSlider = function (options) { var setting = $.extend({
bars: ".super-nav",
items: ".super-content li",
speed: 3000
}, options); var $_self = this,
$items = $(setting.items, $_self),
$bars = $(setting.bars, $_self),
count = 0,
sliterTimer = null,
bars = [],
itemCount = $items.length,
width = $(window).width(); for (var i = 0 ; i < itemCount; i++) {
bars.push("<li></li>");
} $bars.html(bars.join(" "));
var $barItems = $bars.find("li"); $barItems.eq(0).addClass("selected");
$items.css({ left: width }).eq(0).css({ left: 0 }); var _start = function () {
sliterTimer = setInterval(function () { console.log(count);
$barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)'); $items.eq(count % itemCount).removeClass("selected").stop().animate({
left: -$(window).width()
}, function () {
$items.css({ left: $(window).width(), "z-index": -1 }); var next = count % itemCount;
if (next == itemCount - 1) next = 0;
$items.eq(next).css({ "z-index": 1 });
}); $barItems.eq(count % itemCount).removeClass("selected").stop().animate({
backgroundColor: "rgba(220, 142, 34, 0.5)"
}); count++; $items.eq(count % itemCount).css({ "z-index": 1 }).addClass("selected").stop().animate({
left: 0
}); $barItems.eq(count % itemCount).addClass("selected").stop().animate({
backgroundColor: "rgba(220, 142, 34,1)"
}); count = count % 100; }, setting.speed);
} var _stop = function () {
window.clearInterval(sliterTimer);
sliterTimer = null;
} $barItems.on("click", function () { if (count == $(this).index()) return; $barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)');
$(this).css('background-color', 'rgba(220, 142, 34,1)');
count = $(this).index();
var next = count + 1;
if (next == itemCount) next = 0;
$items.siblings().css("z-index", "-1");
$items.eq(next).css("z-index", "99"); $items.each(function (i) {
if (i != count) {
$items.eq(i).stop().animate({
left: -$(window).width()
}, 300, function () {
$(this).css({ left: $(window).width() });
});
}
}); $items.eq(count).stop().animate({
left: 0
}, 300); }); $_self.start = _start;
$_self.stop = _stop;
$barItems.on("mouseenter", _stop).on("mouseleave", _start);
return this;
}; })(jQuery); ; (function ($) {
"use strict"
$.fn.responseImg = function (options) { var _cfg = $.extend({
width: 1920,
height: 1080
}, options); return this.each(function () { var $_self = $(this),
winWidth = $(window).width(),
winHeight = $(window).height(); var _resetImgSize = function () { winWidth = $(window).width();
winHeight = $(window).height(); var winWH = winWidth / winHeight;
var imgWH = _cfg.width / _cfg.height; if (winWH > imgWH) {
$_self.width(winWidth);
$_self.height(winWidth * _cfg.height / _cfg.width);
} else {
$_self.height(winHeight);
$_self.width(winHeight * _cfg.width / _cfg.height);
} var imgH = $_self.height();
var imgW = $_self.width(); $_self.css({ "margin-top": (-(imgH) / 2) + "px" });
$_self.css("margin-left", (-(imgW - 10) / 2) + "px"); $(".info").text(winWidth + "----" + winHeight + "dddd"); }; $(window).resize(_resetImgSize); $_self.resize = _resetImgSize; }); };
})(jQuery); $(function () { $("img").responseImg({
width: 1920,
height: 1080,
selector: 'img1'
}).resize(); $(".super-slider").superSlider({ speed: 3000 }).start(); });
</script>
</head>
<body>
<div id="info" class="info">
asdasd
</div>
<div class="content">
<div class="img">
<div class="super-slider">
<ul class="super-nav">
<li></li>
<li></li>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="super-content">
<li>
<span><span class="sp-slider-text">This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide1.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.2</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide2.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.3</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide3.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.4</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide4.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.6</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide6.jpg" />
</li>
</ul>
</div>
</div>
</div> </body>
</html>
response slider的更多相关文章
- 网络编程---(数据请求+slider)将网络上的大文件下载到本地，并打印其进度
网络编程---将网络上的大文件下载到本地,并打印其进度. 点击"開始传输"button.将网络上的大文件先下载下来,下载完毕后,保存到本地. UI效果图例如以下: watermar ...
- Response.Redirect引起的性能问题分析
现象: 最近做的一个系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到该系统的不同模块.而跳转的时间一直维持子啊几分钟左右. 分析步骤: 在问题复现时抓取Hang d ...
- windows charles response 乱码解决办法
使用windows 版本的charles来做代理,发现服务端返回的response会出现中文乱码的情况, 查看软件设置,遗憾的是并没有关于编码的选项. 好在charles windows版本安装目录下 ...
- 谈一谈Http Request 与 Http Response
写在前面的话:今天来总结一下http相关的request和response,就从以下几个问题入手吧. ======正文开始======== 1.什么是HTTP Request 与HTTP Respon ...
- ashx中Response.ContentType的常用类型
ashx中Response.ContentType的常用类型: text/plaintext/htmltext/xmlapplication/jsonimage/GIFapplication/x-cd ...
- 一个由Response.Redirect 引起的性能问题的分析
现象: 某系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到某系统的主页上面.而跳转的时间很长,约1分钟以上. 分析步骤: 在问题复现时抓取Hang dump 进行分 ...
- request 对象和 response 对象
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象 HttpServletResponse HttpServletR ...
- C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。
一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...
- response和request的区别以及常见问题解决
request是请求,即客服端发来的请求 response是响应,是服务器做出的响应 --------------------------------------------------------- ...
随机推荐
- 快速部署Apache服务静态网站
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可通过简单的API扩充, ...
- HaProxy 负载均衡集群
HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理,特别适用于那些负载特大的web站点,这些站点通常又需要会话保持或七层处理.H ...
- Java代码审计入门篇
作者:i春秋核心白帽yanzmi 原文来自:https://bbs.ichunqiu.com/thread-42149-1-1.html 本期斗哥带来Java代码审计的一些环境和工具准备. Java这 ...
- Swift5 语言指南(八) 控制流
Swift提供了各种控制流程语句.这些包括while多次执行任务的循环; if,guard和switch基于特定条件执行不同代码分支的语句; 和语句,如break和continue对执行流在你的代码转 ...
- 《机器学习实战（基于scikit-learn和TensorFlow）》第五章内容学习心得
本章在讲支持向量机(Support Vector Machine). 支持向量机,一个功能强大的机器学习模型,能够执行线性或非线性数据的分类.回归甚至异常值检测的任务.它适用于中小型数据集的分类. 线 ...
- 2-3 用组件改写Todolist案例
编写组件来改写2-2的Todolist案例
- 京东架构师的showtime京东个性化推荐系统实战
推荐系统核心任务是排序,从线上服务角度看,就是将数据从给定集合中数据选择出来,选出后根据一定规则策略方法进行排序. 线上服务要根据一定规则进行架构设计,架构设计是什么?每一次权衡取舍都是设计,设计需要 ...
- Linux学习笔记之十————Linux常用服务器构建之ftp服务器
p服务器介绍 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”. 用于Internet上的控制文件的双向传输. 同时,它也是一个应用程序(Ap ...
- vue 父子组件之间传参
父组件中有子组件 msg 为父组件向子组件传的内容, 子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...
- JConsole观察分析Java程序的运行状态
Java 自带性能监控工具:监视和管理控制台 jconsole,它可以提供 Java 某个进程的内存.线程.类加载.jvm 概要以及 MBean 等的实时信息. 通过Java SE Developme ...