比较炫的图片播放器 js 焦点效果代码

图片播放器_图片轮换_焦点效果

#focus_m{position:relative; width:420px; height:384px; background:#133775}
.f_img_roll{width:350px; height:300px; position:relative;}
.f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}
.f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}
.f_img_tree div{position:absolute; z-index:201; top:3px; right:0; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}
.f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}
.f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}
.f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}
.f_con{color:#fff; height:70px;}
.f_con .f_title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}
.f_con .f_title a:link, .f_con .f_title a:visited{color:#fff; text-decoration:none}
.f_con .f_title a:hover{text-decoration:underline}
.f_con .f_con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}

function $A(iterable) {
var results = [];
for (var i = 0; i '+imgs[0].title+''; // 标题
this.con.innerHTML = imgs[0].con; //内容
var oThis = this;
for(var i=0; i';
li.i = i;
this.lis.push(li);
this.ul.appendChild(li);
}
var lis = this.ul.childNodes;
for(var i=0; i this.posTo? top = 1 : top = 0;
this.tb = setInterval(this.moveTo.bind(this, top), 25);
},
moveTo: function(top){
if(!top){
if((this.tem+1.8)>=this.posTo+1){
this.mask.style.top = this.posTo+'px';
clearInterval(this.tb);
this.img_swap();
return;
}
this.tem += (this.posTo-this.tem)*this.speed
}else{
if((this.tem-1.8)this.img_m2.style.zIndex){
t = this.img_m;
b = this.img_m2;
}else{
t = this.img_m2;
b = this.img_m;
}
this.title.innerHTML = ''+this.imgs[this.cur_i].title+'';
this.con.innerHTML = this.imgs[this.cur_i].con;
b.src = this.imgs[this.cur_i].max;
/MSIE/.test(navigator.userAgent) ? this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100 : this.tem = t.style.opacity ? t.style.opacity*100 : 100;
this.tm = setInterval(this.img_hid.bind(this, t, b), 25);
},
img_hid: function(t,b){
this.tem -= 5;
if(/MSIE/.test(navigator.userAgent))
t.style.filter = 'alpha(opacity='+this.tem+')';
else
t.style.opacity = this.tem/100;
if(this.tem

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码 代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA

  • 原生JS实现小小的音乐播放器

    前  言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!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"

  • JS HTML5 音乐天气播放器(Ajax获取天气信息)

    晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件 演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条

  • js的flv视频播放器插件使用方法

    使用非常简单,小伙伴们只要修改对应的参数即可,这里就不多废话了,直接奉上实例吧. <div class="txt1"> <script type="text/javascript"> var swf_width=307 var swf_height=182 var texts='快乐星汉堡' var files='http://v.78.cn/kuailexing/sp.flv' </script> <!--<scri

  • javascript 播放器 控制

    详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link href="style/style.css&quo

  • js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

    本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu

  • 运用js教你轻松制作html音乐播放器

    用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

  • js实现的万能flv网页播放器代码

    本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript"> var s5 = new SWFObject("FlvPlayer20

  • javascript实现简单的html5视频播放器

    效果: 代码很简单 js define("html5_video_player", [ '../avalon-min'], function(avalon) { function formatTime(seconds) { var seconds = Math.round(seconds); var minutes = Math.floor(seconds / 60); seconds = Math.floor(seconds % 60); minutes = (minutes >

随机推荐