HTML 页面弹出一个图片 自动消失
适用于网站首页的提示 比如购物网站提示送积分等
首先需要一个放置图片的容器
<img src="#" class="jump_img">
随后 需要给这个类一个样式
<style type="text/css">
.jump_img
{position:absolute;
z-index:99999;
width:80%;
height:80%;
top:50%;
left:50%;
margin:-20% 0 0 -40%;
}
</style>
//根据 宽 高 上 左 来调试图片显示的位置
最后 就剩下能够驱动这个容器的脚本了
<script type="text/javascript">
$(document).ready(function() {
//倒计时消失 使用 毫秒值
$(".jump_img").delay(5000).fadeOut();
})
</script>
简单的一个定时弹图片就好了 我的分辨率是1920的 笔记本 其他的请自己调试比例
直接在img标签上添加点击事件
如果不想用a来包一层的话，那么直接在img标签上添加onclick来点击跳转，
<img src="img/logo.png" alt="" onclick="window.open('index.html')" style="cursor: pointer;"/>
jQuery 效果 - fadeOut() 方法
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>