jQuery点击图片弹出放大特效下载

效果体验:http://hovertree.com/texiao/jqimg/1/效果图:代码如下:源码下载:http://hovertree.com/h/bjaf/ljn1fwka.htm转自:

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果体验:http://hovertree.com/texiao/jqimg/1/

效果图:
jQuery点击图片弹出放大特效下载

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>美女图片浏览特效 - 何问起</title>
<link href="http://hovertree.com/texiao/jqimg/1/css/clearbox.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/texiao/jqimg/1/js/clearbox.js" type="text/javascript"></script>
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
</head>
<body>

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}

a, img {
border: 0;
}

body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}

.playbox {
width: 840px;
margin: 5px auto;
overflow: hidden;
padding: 20px 0px 0px 20px;
border: solid 1px #ddd;
}

.playbox a {
height: 360px;
overflow: hidden;
display: block;
float: left;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
text-decoration: none;
}

.playbox a img {
max-width: 260px;
_width: expression(this.width > 260 ? "260px" : this.width); /*使ie6支持max-width*/
border: none;
}

.txt {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.6);
}

.txt h3 {
font-weight: normal;
margin: 0px;
}

.txt p {
font-size: 14px;
display: block;
line-height: 20px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-moz-margin-before: 1em;
-moz-margin-after: 1em;
-moz-margin-start: 0px;
-moz-margin-end: 0px;
}
.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}
</style>

<h2 style="margin:0 auto; width:840px; text-align:center; margin-top:10px;">点击美女,相册播放</h2>
<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/flurt6nt.htm" target="_blank">原文</a> <a href="http://hovertree.com/texiao/" target="_blank">特效库</a>
<a href="http://hovertree.com/" target="_blank">首页</a>
</div>
<div class="playbox">
<a href="http://hovertree.com/texiao/jqimg/1/images/1.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/1.jpg" /><div class="txt"><h3>性感美女</h3><p>送福利了,拿走不懈!</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/2.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/2.jpg" /><div class="txt"><h3>性感美女</h3><p>更多请访问:hovertree.com/texiao/ </p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/3.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/3.jpg" /><div class="txt"><h3>性感美女</h3><p>你过来,我保证不会打你的!</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/4.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/4.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩层的话,可以删除</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/5.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/5.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩层的话,可以删除</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/6.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/6.jpg" /><div class="txt"><h3>性感美女</h3><p>何问起,其实是一位美女。</p></div></a>
</div>

<script type="text/javascript">
// 不是必要的代码
//从底部上升的遮罩效果开始
$(".playbox a").hover(function(){
$(this).find(".txt").stop().animate({height:"360px"},200);
$(this).find(".txt h3").stop().animate({paddingTop:"60px"},200);
},function(){
$(this).find(".txt").stop().animate({height:"45px"},200);
$(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);
})
//从底部上升的遮罩效果结 何问起
</script>

</body>
</html>

源码下载:http://hovertree.com/h/bjaf/ljn1fwka.htm

转自:http://hovertree.com/h/bjaf/flurt6nt.htm

特效库:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120594.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm 替换快捷键_pycharm到包快捷键

    pycharm 替换快捷键_pycharm到包快捷键查找/替换(Search/Replace)F3下一个Shift+F3前一个Ctrl+R替换(需要同时替换的变量名等)Ctrl+Shift+F整个项目中全局查找Ctrl+Shift+R整个项目中全局替换

  • oracle ogg kafka添加一张表_kafka读取数据

    oracle ogg kafka添加一张表_kafka读取数据GoldenGate介绍GoldenGate软件是一种基于日志的结构化数据复制软件。GoldenGate能够实现大量交易数据的实时捕捉、变换和投递,实现源数据库与目标数据库的数据同步,保持亚秒级的数据延迟。GoldenGate能够支持多种拓扑结构,包括一对一,一对多,多对一,层叠和双向复制等等。GoldenGate基本架构OracleGoldenGate主要由如下组件组成Extra…

    2022年10月30日
  • Generic Host Process for Win32 Services 错误

    Generic Host Process for Win32 Services 错误机器运行时防火墙一直提示“GenericHostProcessforWin32Services”访问网络,选阻止后系统就一直弹出一个GenericHostProcessforWin32Services遇到问题需要关闭的对话框!在资源管理器中把系统文件的隐藏属性打开后,发现每个盘的根目录下和C:/WINDOWS目录下都有一个gg.exe文件,每个盘的根目录下有一个autoru

    2022年10月12日
  • 面试问题spring cloud和dubbo的区别[通俗易懂]

    面试问题spring cloud和dubbo的区别[通俗易懂]最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论微服务架构 。近期也看到各大技术社区开始组织一些沙龙和论坛来分享spring Cloud的相关实施经验,这对于最近正在整理SpringCloud相关套件内容与实例应用的我而言,还是有不少激励的。目前,SpringCloud在国内的知名度并不高,在前阵子的求职过程中,与一些互联网公司的架构师、技术VP或者CT

  • 4个世界上最长域名的网站是_域名最长多少个字符

    4个世界上最长域名的网站是_域名最长多少个字符第一个http://www.llanfairpwllgwyngyllg…iliogogogoch.co.uk/这个域名属于一个旨在宣传英国圭内斯郡安格尔西的一个同名村庄,这个名字的意思是“位于急流附近白榛树山谷中的圣玛丽亚教堂和红山洞附近的圣泰西里奥教堂。”第二个http://www.111111111111111111111…11111111111111.com/这个域

  • 什么是ARP欺骗_ARP欺骗防范

    什么是ARP欺骗_ARP欺骗防范ARP欺骗的本质是把虚假的IP-MAC映射关系通过ARP报文发给主机,让主机把虚假的IP-MAC映射存入ARP缓存表(可能是IP地址错误,也可能是MAC地址错误),让其无法正确发送数据漏洞的根源ARP协议是无连接操作系统收到ARP请求或响应后无法确认senderMAC和senderIP真假ARP欺骗伪造网关攻击者B伪造ARP报文(senderIP地址是网关的,senderMAC地址不是网关的),发送给网段内的主机A,那么主机A就会把网关的ip地址和伪造的mac地址缓存到arp缓.

    2022年10月29日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号