swiper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link href="http://cdn.bootcss.com/Swiper/3.4.1/css/swiper.css" rel="stylesheet">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin: 20px auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
</div>
</div>
<div id="bless">
<input id="bless-word" type="text">
<a id="share-button">立即分享</a>
</div>
<!-- Swiper JS -->
<script src="http://cdn.bootcss.com/Swiper/3.4.1/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
var shareBtn = document.getElementById("share-button");
var bless = document.getElementById("bless-word");
shareBtn.addEventListener("click",function(){
var blessWord = bless.value;
var url = "index2.html?word=" + blessWord;
shareBtn.setAttribute("href",url);
},false);
</script>
</body>
</html>
swiper的更多相关文章
- swiper插件 纵向内容超出一屏解决办法
1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...
- swiper的初步使用
1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...
- 关于移动端swiper的2种样式重置
手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- swiper框架,实现轮播图等滑动效果
http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.
- swiper.animate~之~可以执行两种动画的升级版的Swiper Animate
1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...
- swiper横向轮播--3d
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- swiper横向轮播(兼容IE8)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
- Swiper 中文API手册(share)
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
随机推荐
- 浅谈五大Python Web框架
转载:http://feilong.me/2011/01/talk-about-Python-web-framework 说到Web Framework,Ruby的世界Rails一统江湖,而Pytho ...
- apache https 伪静态
今天很是郁闷,配置了一个https成功了,但是伪静态不成功,经过多方面查看资料终于配置成功了: <VirtualHost *:443> DocumentRoot /var/www/juba ...
- 05_整理String类的Length()、charAt()、 getChars()、replace()、 toUpperCase()、 toLowerCase()、trim()、toCharArray()使用说明
Question: 整理String类的Length().charAt(). getChars().replace(). toUpperCase(). toLowerCase().trim().toC ...
- 字符串hash算法
http://www.cnblogs.com/zyf0163/p/4806951.html hash函数对大家来说不陌生吧 ? 而这次我们就用hash函数来实现字符串匹配. 首先我们会想一下二进制数. ...
- Membership基本用法
MemberShip简介: Membership是Asp.Net框架,用于管理网站的用户Membership,角色Roles以及配置信息Profile. System.Web.Security.Mem ...
- 微信在IOS7下无法分享图片
家里老大的iphone5在WWDC后第一时间升级了IOS7. 整体的UI风格和功能都很喜欢, 偶尔的crash还能接受. 但是最常用的软件之一微信,在IOS7下无法分享图片这点一直让她耿耿于怀. 从用 ...
- tomcat从 http转成https,并且去掉端口号
将 <Connector port=" URIEncoding="UTF-8"/> 改成 <Connector port=" URIEncod ...
- 未能加载文件或程序集 Microsoft.Web.Infrastructure, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad
没有 microsoft.web.infrastructure.dll 文件. 解决方式: ,第一种:在所发布的项目文件里面的 bin 文件目录下,添加 microsoft.web.infrastru ...
- 002. Centos7安装mysql5.5.37
下载cmake-2.8.12.2.tar.gz, 下载地址: https://pan.baidu.com/s/1qYtpX7m 下载mysql-5.5.37.tar.gz, 下载地址: http:// ...
- Redis -- 02 配置文件解析
redis的配置文件为 redis.conf, 使用 ./redis-server /path/to/redis.conf 可以根据自定义的配置启动redis实例 include // 引入其他配置文 ...