添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 图文相册 >

jQuery点击缩略图切换视频播放

时间:2014-02-07      来源:互联网     
特效说明:
一款jQuery点击缩略图切换视频播放网页特效,点击缩略图并选中当前选项,播放该缩略图对应视频网页特效。该特效调用优酷视频地址,也可以调用本地视频地址,兼容性好。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
添加HTML代码:
<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

JS代码编写:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 切换视频
    $(".video-list li").click(function(){
        var obj = $(this);
        var video_id = obj.attr("video");
        var path = obj.attr("id");
        var vid = obj.attr("vid");
        $(".js_videoCon").hide();
        $("#js_videoCon_"+vid).show();
        obj.addClass("now").siblings().removeClass("now");
    });
});
</script>
相关特效
  • HTML5科幻空间动画背景网页特效

    HTML5科幻空间动画背景网页特效

    一款HTML5科幻空间动画背景网页特效免费下载,该网页特效适用于游戏、科技类网站制作、网页设计背景代码素材。……
    2019-04-12
  • jQuery闪烁粒子动画背景特效

    jQuery闪烁粒子动画背景特效

    一款jQuery闪烁粒子动画背景特效免费下载,该特效基于jquery.parallax.js插件编写,闪烁星空动画背景,页面元素随鼠标运动而运动。……
    2016-12-23
  • jQuery手指滑动刻度尺选择值特效

    jQuery手指滑动刻度尺选择值特效

    一款jQuery手指滑动刻度尺选择值特效免费下载,该特效适用于微信网站、手机站等移动端触屏设备使用,可以用手指左右滑动选择刻度值。……
    2016-12-01
  • SVG制作旋转地图动画

    SVG制作旋转地图动画

    一款SVG制作旋转地图动画免费下载,该SVG地球特效自适应兼容主流浏览器。……
    2016-12-01
  • jQuery响应式层叠动画切换内容网页特效

    jQuery响应式层叠动画切换内容网页特效

    一款jQuery响应式层叠动画切换内容网页特效免费下载,该特效基于jquery.transit.js实现,支持PC、PAD、Phone设备浏览,兼容CSS3动画切换效果。……
    2016-11-14
  • jQuery+CSS3登录/注册动画窗口网页特效

    jQuery+CSS3登录/注册动画窗口网页特效

    一款jQuery+CSS3登录/注册动画窗口特效代码下载,该网页特效是一款采用UI界面设计风格,配合使用CSS3动画和少量jQuery代码来制作,整体感觉时尚大方。……
    2016-06-28
  • HTML5实现ppt全屏幻灯片演示网页模版

    HTML5实现ppt全屏幻灯片演示网页模版

    HTML5实现ppt全屏幻灯片演示网页模版下载,该HTML5网页模版是一款基于html5实现的网页旋转、移动切换PPT展示效果。……
    2016-06-28
  • HTML5网站开场动画网页特效

    HTML5网站开场动画网页特效

    一款HTML5网站开场动画网页特效免费下载,该特效基于HTML5+CSS3制作,利用background背景位置移动实现动画效果。……
    2016-06-24
  • jwplayer响应式多终端适配视频播放器

    jwplayer响应式多终端适配视频播放器

    一款jwplayer响应式多终端适配视频播放器免费下载,该JS视频插件适用于网页播放视频展示,这里整理了下分享给大家。……
    2016-05-26
  • CSS3绘制QQ小萌鹅动画图标

    CSS3绘制QQ小萌鹅动画图标

    一款CSS3绘制QQ小萌鹅动画图标下载,该CSS特效代码是画面上的企鹅可呈现出双手上下摆动的效果,HTML5+CSS3动画学习案例。……
    2016-05-22

最新更新特效

设计分享