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是响应,是服务器做出的响应 --------------------------------------------------------- ...
随机推荐
- Word中带圈数字
写论文时常常要求输入带圈数字,先在Word中输入代码,选中代码后按Alt+X(然后再粘贴到Excel中) 符号 代码⓪ 24ea① 2460② 2461③ 2462④ 2463⑤ 2464⑥ 2465 ...
- 背水一战 Windows 10 (75) - 控件（控件基类）: FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, VerticalAlignment
[源码下载] 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, Vertical ...
- workman的学习总结
我们知道php主要是用来做web应用的,而且平时使用的都是都是和其他的web服务器来结合使用,比如和apache,nginx和apache的时候,是作为apache的一个动态模块来加载,和nginx的 ...
- InnoDB体系架构（三）Checkpoint技术
Checkpoint技术 前篇 InnoDB体系架构(二)内存 从缓冲池.缓冲池的管理.重做日志缓冲.额外内存缓冲这四个点介绍了InnoDB存储引擎的内存结构,而在将缓冲池的数据刷新到磁盘的过程中使用 ...
- React.js 三周 -- 入门到搭建团队基础项目
吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...
- 夜神模拟已开启，adb命令检测不了设备解决方法
日常APP测试中,很难拥有多种机型和各种安卓版本的手机,此时可以借助模拟器. 命令返回结果只有 “List of devices attached”,即代表检测不了模拟器 最近在使用夜神模拟器的时候, ...
- [视频]K8飞刀 BadUSB Teensy自动种马演示教程
[视频]K8飞刀 Teensy USB自动种马演示教程 链接: https://pan.baidu.com/s/13bM1XSLrhlf90FDmPGfo1g 提取码: gy2q 源码:https:/ ...
- 启动elasticsearch报错
could not find java; set JAVA_HOME or ensure java is in PATH 首先需要安装java 1.yum list installed |grep j ...
- Migrate from ASP.NET Core 2.0 to 2.1
http://www.talkingdotnet.com/migrate-existing-aspnet-core-2-application-aspnet-core-2-1/ https://doc ...
- Android_注解+反射代替findViewById()
最近没啥事,前段时间看到一个框架是使用的注解来代替findViewById()的然后就研究了,发现还是蛮容易的,下面就是注解的代码: import java.lang.annotation.Docum ...