图片翻转效果具体实现代码


Posted in Javascript onJanuary 09, 2014

以下为程序代码:

<!DOCTYPE html /> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<title>图片翻转效果</title> 
<style type="text/css"> 
.box {overflow:hidden;position:relative;} 
.txt {width:100%;height:100%;background:#f51146;font-size:12px;position:absolute;top:-100%;color:white; 
text-align:center;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity:0.8;} 
#b1 {background:url(http://biyuan.tk/u/upload/201310221457326875.jpg);width:232px;height:232px;} 
#b2 {background:url(http://biyuan.tk/u/upload/201310221457486875.jpg);width:110px;height:110px;} 
#b3 {background:url(http://biyuan.tk/u/upload/201310221458149843.jpg);width:110px;height:110px;} 
</style> 
</head> 
<body> 
<div id="obj"> 
<div class="box" id="b1"><div class="txt">文字说明<br />文字说明</br />文字</div></div> 
<div class="box" id="b2"><div class="txt">文字说明<br />文字说明</br />文字</div></div> 
<div class="box" id="b3"><div class="txt">文字说明<br />文字说明</br />文字</div></div> 
</div> 
<script type="text/javascript"> 
function Show(o, s, v){ 
clearInterval(Show.prototype["a" + v]); 
Show.prototype["a" + v] = setInterval(function(){ 
if(s == -1) { 
if(o.offsetTop <= -o.parentNode.offsetHeight) { 
o.style.top = -o.parentNode.offsetHeight + "px"; 
return clearInterval(Show.prototype["a" + v]); 
} 
} else { 
if(o.offsetTop >= -10) { 
o.style.top = 0; 
return clearInterval(Show.prototype["a" + v]); 
} 
} 
o.style.top = (o.offsetTop * 1 + 10 * s) + "px"; 
}, 10); 
} 
var igs = document.getElementById('obj').getElementsByTagName("div"); 
for(var i = 0; i < igs.length; i ++) { 
if(igs[i].className == "box") { 
(function(x){ 
igs[x].onmouseover = function(){ 
Show(this.childNodes[0], 1, x); 
this.onmouseout = function() { 
Show(this.childNodes[0], -1, x); 
} 
} 
})(i); 
} 
} 
</script> 
</body> 
</html>

效果预览:http://biyuan.tk/u/upload/201310221500310000.html
Javascript 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
清空上传控件input file的值
Jul 03 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 #Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 #Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 #Javascript
含有CKEditor的表单如何提交
Jan 09 #Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 #Javascript
javascript计算用户打开网页的停留时间
Jan 09 #Javascript
js中生成map对象的方法
Jan 09 #Javascript
You might like
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python paramiko模块学习分享
2017/08/23 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
本科生学习总结的自我评价
2013/10/02 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
车贷收入证明范本
2014/01/09 职场文书
党员党性分析材料
2014/02/17 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书