Jquery分享插件
效果图如下：
代码如下：
<!DOCTYPE HTML>
<html style="padding-bottom: 54px;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>jQuery分享插件jquery.share.js</title>
<meta name="description" content="jQuery分享插件jquery.share.js享到QQ、微信、微博、google、in、tweeter等" />
<meta name="keywords" content="分享插件,社会化分享,jquery.share.js，jquery,jquery插件" />
<link rel="Shortcut icon" href="http://www.jq22.com/favicon.ico" />
<link href="css/demo.css?v3" rel="stylesheet" media="all" />
<!--[if IE]> <style type="text/css">
li.purchase a {
padding-top: 5px;
background-position: 0px -4px;
} li.remove_frame a {
padding-top: 5px;
background-position: 0px -3px;
}
</style> <![endif]-->
<style>
.fdad a {
color: #000;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .fdad {
top: 66px;
} .xgcj li {
font-size: 14px;
line-height: 20px;
list-style-type: none;
transition: all 1s ease 0s;
border-radius: 5px;
} .xgcj li:hover {
background-color: #e4e4e4;
} .xgcj {
background-color: rgba(255,255,255,.3);
overflow-x: hidden;
} .xgcj ul {
padding: 10px
} .xgcj h3 {
line-height: 30px;
} .xgcj p {
padding-left: 20px;
font-size: 13px;
display: none;
} .xgcj span {
font-family: "宋体";
} .xgcj li:hover p {
display: block;
}
</style>
<script type="text/javascript">
var txt = "http://www.jq22.com/demo/myshare201704242303";
window.g1 = txt.substr(0, 3);
window.g2 = txt.substr(0, 19);
</script>
<script src="js/pace.min.js" charset="gbk"></script>
<link href="css/pace-theme-barber-shop.css" rel="stylesheet" />
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<script type="text/javascript"> var theme_list_open = false; $(document).ready(function () {
function fixHeight() {
var headerHeight = $("#switcher").height();
$("#iframe").attr("height", $(window).height() - 54 + "px");
}
$(window).resize(function () {
fixHeight();
}).resize(); $('.icon-monitor').addClass('active'); $(".icon-mobile-3").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width-3');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
}); $(".icon-mobile-2").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width-2');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
}); $(".icon-mobile-1").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width');
$('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
}); $(".icon-tablet").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('tablet-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
}); $(".icon-monitor").click(function () {
$("#by").css("overflow-y", "hidden");
$('#iframe-wrap').removeClass().addClass('full-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
});
</script>
<script type="text/javascript">
function Responsive($a) {
if ($a == true) $("#Device").css("opacity", "100");
if ($a == false) $("#Device").css("opacity", "0");
$('#iframe-wrap').removeClass().addClass('full-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
};
</script>
</head>
<body id="by" style="overflow-y: hidden">
<div id="switcher">
<div class="center">
<ul>
<li class="logoTop" id="sj2"><a href="http://www.jq22.com/jquery-info13612">jQuery分享插件jquery.share.js</a></li>
<div id="Device">
<li class="device-monitor"><a href="javascript:">
<div class="icon-monitor">
</div>
</a></li>
<li class="device-mobile"><a href="javascript:">
<div class="icon-tablet">
</div>
</a></li>
<li class="device-mobile"><a href="javascript:">
<div class="icon-mobile-1">
</div>
</a></li>
<li class="device-mobile-2"><a href="javascript:">
<div class="icon-mobile-2">
</div>
</a></li>
<li class="device-mobile-3"><a href="javascript:">
<div class="icon-mobile-3">
</div>
</a></li>
</div>
<li class="top2" id="sj"><a href="#">手机二维码预览</a><div class="vm">
<div id="output"></div>
<p style="color: #808080">扫一扫，直接在手机上打开</p>
</div>
</li>
<script>
jQuery('#output').qrcode({ width: 150, height: 150, text: window.location.href });
</script>
<li class="remove_frame" style="display:n"><a href="http://www.jq22.com/demo/myshare201704242303" title="移除框架"></a></li>
</ul>
</div>
</div>
<div id="iframe-wrap">
<iframe id="iframe" src="http://www.jq22.com/demo/myshare201704242303" frameborder="0" width="100%"></iframe>
</div>
<div class="fdad">
<div class="fdl">Advertisement</div>
<div class="fdr">x</div>
<div class="fdadnr">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-2935286260943234" data-ad-slot="6063645905"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="xgcj">
<ul>
<div style="width:100%">
<div style="float:left"><h3>相关插件</h3></div>
<div style="clear: left;"></div>
</div>
<li>
<a href="http://www.jq22.com/jquery-info18298"><span>></span> jQuery前端excel导入插件xlsx.core.js</a>
<p>此插件作用可以把excel表，导入到网页中用table显示出来</p>
</li>
<li>
<a href="http://www.jq22.com/jquery-info14085"><span>></span> jQuery社会华分享插件</a>
<p>jQuery社会华分享插件支持微信，QQ，新浪，人人等</p>
</li>
<li>
<a href="http://www.jq22.com/jquery-info761"><span>></span> jQuery网站引导插件joyride</a>
<p>jQuery网站引导插件joyride</p>
</li>
<li>
<a href="http://www.jq22.com/jquery-info9389"><span>></span> html5读取二维码</a>
<p>手机端web调用摄像头读取解析二维码</p>
</li>
<li>
<a href="http://www.jq22.com/jquery-info17899"><span>></span> CSS3开关切换按钮</a>
<p>多组超具创意的CSS3开关切换按钮</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".fdr").click(function () {
$(".fdad").hide();
});
});
</script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?b3a3fc356d0af38b811a0ef8d50716b8";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
Jquery分享插件的更多相关文章
- 分享7款非常实用的jQuery/CSS3插件演示和源码
上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...
- 分享8款绚丽的HTML5/jQuery特效插件
有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...
- 分享一款页面视差滚动切换jquery.localscroll插件
今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- 15 款 jQuery 社交分享插件
过去几年中社交媒体越来越流行了,能够分享音乐.视频.图像甚至是其他的 docs 文档到互联网上去,这样子还能够提高页面的点击量.通常,一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台 ...
- 雷林鹏分享：jQuery EasyUI 插件
jQuery EasyUI 插件 jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格).treegrid(树形表格). panel(面板 ...
- 使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
随机推荐
- request.setCharacterEncoding()、response.setCharacterEncoding()的区别
request.setCharacterEncoding()是你设置获得数据的编码方式.response.setCharacterEncoding()是你响应时设置的编码.response.setCo ...
- 22.doublewrite/ChangeBuffer/AHI/FNP
一. Double Write1 Double Write介绍 • Double Write的目的是为了保证数据写入的可靠性, 避免partial write 的情况 ◦ partial write( ...
- 经典文摘：饿了么的 PWA 升级实践（结合Vue.js）
自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...
- termios结构体的内容
一.结构体成员 struct termios { tcflag_t c_iflag; tcflag_t c_oflag; tcflag_t c_cflag; tcflag_t c_lflag; cc_ ...
- spring 循环依赖问题
今天碰到一个问题,项目启动,初始化bean的时候,报下面的错: Bean with name ‘*********’ has been injected into other beans [***** ...
- C# EF框架调用数据库的函数
1.在数据库中创建一个自定义函数: REATE FUNCTION [dbo].[f_IsOriginsDisabled] ( ), @needPPTV bit ) RETURNS bit AS BEG ...
- linux系统下python升级安装
1.安装gcc gcc-c++ yum install -y gcc gcc-c++ #提前检查是否安装 2.下载python3.5.2安装包 cd /usr/local/src/ wget http ...
- zabbix系列 ~ mongo监控相关
,一 简介: 我们来谈谈mongo的监控二 核心命令 rs.status() 关注复制集群是否健康 db.serverStatus() 关注实例整体性能三 目标解读 主要来解读下db. ...
- keepalived高可用系列~ keepalived+proxysql
一 简介:介绍下高可用通用的方案 二 目的:一个中间件提供服务,故障后,另一个中间件提供服务 三 手段: 应用keepalived的vrrp_scripts服务 四 具体配置 global_defs ...
- Springboot配置时间格式
方法一: 可以在apllication.property加入下面配置就可以 #时间戳统一转换 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring ...