新浦京81707con > 首页 > 附demo源码下载,jQuery实现仿腾讯视频列表分页效

原标题:附demo源码下载,jQuery实现仿腾讯视频列表分页效

浏览次数:185 时间:2019-08-21

正文实例陈述了jQuery插件JWPlayer录制播放器用法。分享给我们供我们参照他事他说加以考察,具体如下:

正文实例汇报了jQuery完毕仿Tencent录制列表分页效果的法门。分享给大家供大家参照他事他说加以考察。具体如下:

正文实例陈说了jquery插件jquery.LightBox.js完毕点击放大图片并左右点击切换效果。分享给我们供大家参谋,具体如下:

JWPlayer 插件播放录像播放器 使用方法:

此处运用jQuery仿Tencent摄像列表分页效果,无刷新分页特效,点击分页按键,无刷新步入下一页内容列表。

该插件乃小说小编所写,意在进步笔者的js才具,也给一部分js菜鸟在动用插件时提供一些方便,老司机就没事地飞过吧。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
  <meta content="telephone=no, address=no, email=no" name="format-detection">
  <title>快讯视频预览</title>
  <style>
    .jwlogo{
      display: none;
    }
    #container{
      margin: auto;
    }
    #videoDiv{
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <section id="videoDiv">
    <div id="container">Loading the player ...</div>
  </section>
</body>
<script type="text/javascript" src="/wamei/pages/js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="/wamei/pages/js/jwplayer/jwplayer.js"></script>
<script>
$(function(){
  var videoUrl = getUrlParam("videoUrl");
  var videoCover = getUrlParam("videoCover");
  if(videoUrl){
    jwplayer("container").setup({
      flashplayer : "/wamei/pages/js/jwplayer/player.swf",
      levels: [{file: videoUrl}],
      image: videoCover,
      height : 270,
      width : 480
    });
  }
});
//获取url中的参数
function getUrlParam(name) {
  var reg = new RegExp("(^|&)"   name   "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
  var r = window.location.search.substr(1).match(reg); //匹配目标参数
  if (r != null) return unescape(r[2]); return null; //返回参数值
}
</script>
</html>

运作效果截图如下:

此插件意在达成最近比较流行的点击放大图片并左右点击切换图片的功力,您能够依照本人的实际需要来设置是还是不是丰盛左右切换图片的效果。全体代码如下:

更多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery常用插件及用法总计》、《jQuery扩充工夫总结》、《jQuery切换特效与手艺计算》、《jQuery遍历算法与本领总结》、《jQuery常见精粹特效汇总》、《jQuery动画与特功用法计算》及《jquery选拔器用法总计》

图片 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.item{margin:20px;}
.item ul li{float:left;margin-right:20px;}
.item ul li img{width:100px;cursor:pointer;}
.lb_wrap{display:none;}
.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}
.lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;}
.lightbox p.next{left:auto;background-position:right top;right:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.LightBox.js"></script>
</head>
<body>
<div class="item">
 <ul>
  <li><img src="01.jpg" /></li>
  <li><img src="02.jpg" /></li>
  <li><img src="03.jpg" /></li>
  <li><img src="04.jpg" /></li>
  <li><img src="05.jpg" /></li>
  <li><img src="06.jpg" /></li>
 </ul>
</div>
<script>
$(function(){
  $(".item").LightBox({
    controls : true //上一张、下一张按钮是否显示,默认是显示true
    });
  })
</script>
</body>
</html>

本文由新浦京81707con发布于首页,转载请注明出处:附demo源码下载,jQuery实现仿腾讯视频列表分页效

关键词: 新浦京81707con

上一篇:设置方法详解,APACHE实现网址伪静态

下一篇:没有了