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


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 相关文章推荐
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
前端jquery部分很精彩
May 03 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
javascript实现弹幕墙效果
Nov 28 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
浅谈js数组和splice的用法
2016/12/04 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
遗传算法python版
2018/03/19 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python实现趣味图片字符化
2019/04/30 Python
什么是python的函数体
2020/06/19 Python
python调用私有属性的方法总结
2020/07/24 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
super()与this()的区别
2016/01/17 面试题
组工干部对照检查材料
2014/08/25 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
检讨书范文2000字
2015/01/28 职场文书
自主招生英文自荐信
2015/03/25 职场文书
芙蓉镇观后感
2015/06/10 职场文书
提档介绍信范文
2015/10/22 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android