jquery 给图片添加遮罩 响应鼠标事件出现提示
来源:互联网 发布:天翼手机淘宝 编辑:程序博客网 时间:2024/06/05 10:59
代码如下
转载至 某某特效网站
<!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">
<head>
<title>jQuery实现响应鼠标给图片加个遮罩层文字说明的动画效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css">
html, body, div,ul, li {
margin: 0;
padding: 0;
}
div.examples_body {
width: 360px;
margin: 0px auto;
clear: both;
overflow: hidden;
}
.bannerHolder {
width: 340px;
margin: 20px 0 15px 0;
padding: 20px 10px 20px 10px;
background-color: #f7f7f7;
border: 1px solid #eee;
overflow: hidden;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
.bannerHolder li {
list-style: none;
display: inline;
}
.banner {
position: relative;
width: 320px;
height: 240px;
overflow: hidden;
float: left;
display: inline;
margin: 0 10px
}
.banner img {
display: block;
border: none;
}
.banner div {
position: absolute;
z-index: 240;
background-color: #222;
width: 10px;
height: 10px;
cursor: pointer;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
.banner .cornerTL {
left:-40px;
top:-63px;
}
.banner .cornerTR {
right:-40px;
top:-63px;
}
.banner .cornerBL {
left:-40px;
bottom:-63px;
}
.banner .cornerBR {
right:-40px;
bottom:-63px;
}
.banner p {
display: none;
left: 0;
top: 110px;
width: 100%;
z-index: 240;
position: absolute;
font-family: Tahoma, Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript" src="/images/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.banner div').css('opacity',0.4);
$('.banner').hover(function(){
var el = $(this);
el.find('div').stop().animate({width:200,height:200},'slow',function(){
el.find('p').fadeIn('fast');
});
},function(){
var el = $(this);
el.find('p').stop(true,true).hide();
el.find('div').stop().animate({width:60,height:60},'fast');
}).click(function(){
window.open($(this).find('a').attr('href'));
});
});
</script>
</head>
<body>
如果左下角提示错误,刷新一下就可以了。<br>
<div class="examples_body">
<ul class="bannerHolder">
<li>
<div class="banner">
<a href="http://www.7caidy.com" target="_blank"><img alt="油菜花开" src="/images/m04.jpg"></a>
<p class="companyInfo">点击访问:七彩影视</p>
<div class="cornerTL"></div>
<div class="cornerTR"></div>
<div class="cornerBL"></div>
<div class="cornerBR"></div>
</div>
</li>
</ul>
</div>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p>
- jquery 给图片添加遮罩 响应鼠标事件出现提示
- 给表格添加鼠标提示
- 给工具栏添加鼠标提示
- jquery 添加鼠标滑动事件
- [MFC] 对话框添加鼠标事件响应
- 用CToolTipCtrl给控件添加鼠标提示
- JAVA给下拉菜单添加事件响应
- 给控件添加点击响应事件UITapGestureRecognizer
- 给DBGrid添加鼠标滚动事件
- 给DBGrid添加鼠标滚动事件
- 给DBGrid添加鼠标滚动事件
- 给DBGrid添加鼠标滚动事件
- jquery 添加标签不响应click事件
- JQuery实例入门(添加鼠标事件)
- JQuery实例入门(添加鼠标事件)
- 如何给静态文本框添加鼠标左键按下的响应
- silverlight给ScrollViewer滚动条添加响应鼠标滚轮
- AddObserve通过添加nteractionEvent来响应鼠标事件
- 第九章 进程结构
- 只要你足够好——写给理想受挫的人们
- Python凡人笔记
- Windows 7共享WIFI让Android手机上网
- stl string常用函数
- jquery 给图片添加遮罩 响应鼠标事件出现提示
- 王勇:开源世界和 Linux Deepin
- 关于医学的一点想法
- 第十章 应用程序架构
- 对于大学第一学期的思考
- 第十一章 Oracle应用程序
- Spring 开发 Swing GUI 简介
- Java 理论与实践: 描绘线程安全性
- 第十二章 数据库和实例启动和关闭