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


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 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
基于angular实现树形二级表格
Oct 16 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
使用angular写一个hello world
2015/01/23 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
深入理解angular2启动项目步骤
2017/07/15 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Pytorch释放显存占用方式
2020/01/13 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
应届生.NET方向面试题
2015/05/23 面试题
自荐信格式范文
2013/10/07 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
检讨书怎么写
2015/01/23 职场文书
任命书标准格式
2015/03/02 职场文书
通知怎么写?
2019/04/17 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers