仿360网站广告实现换肤特效

1、新建一个web项目，index.jsp同级目录下放jquery插件和top_right.png图片

2、index.jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="jquery-1.7.js"></script><script type="text/javascript" src="jquery-1.7.min.js"></script><script type="text/javascript">function posi(){$("#top_right").removeClass("t_r_0");$("#top_right").addClass("t_r_4");  }function poso(){$("#top_right").removeClass("t_r_4");$("#top_right").addClass("t_r_0");    }function closetop_right(){$("#top_right").hide();}
</script>
<style type="text/css">
#top_right{ width:248px; display:block;
position:absolute;; right:0;top:0;background-image:url(top_right.png);
background-repeat:no-repeat;
}
.top_righttrue{width:80px;height:50px;position:absolute;right:0;top:0;cursor:pointer;display:block;
}
.top_rightfalse{width:30px;height:30px;position:absolute;right:50px;top:50px;cursor:pointer;display:block;
}
.t_r_0{background-position:right 0;height:41px;}
.t_r_1{background-position:right -100px;height:70px;}
.t_r_2{background-position:right -200px;height:80px;}
.t_r_3{background-position:right -300px;height:90px;}
.t_r_4{background-position:right -400px;height:130px;}
.t_r_5{background-position:right -550px;height:150px;}
.t_r_6{background-position:right -700px;height:150px;}
</style>
</head>
<body><div class="t_r_0" id="top_right" href="" title="" target="_blank" οnmοuseοver="posi()" οnmοuseοut="poso()"><a class="top_righttrue" title="换皮肤" οnclick="showpf()"></a><a class="top_rightfalse" title="关闭" οnclick="closetop_right()"></a></div></body>
</html>

3、效果

仿360网站广告实现换肤特效相关推荐

高仿163网站广告弹出层（每天定时24小时弹出一次）
高仿163网站广告弹出层(每天定时24小时弹出一次) 这里和京东首页定时弹出广告功能一样:用JS实现网站首页弹出广告:超级炫酷的定时弹出图片广告:淘宝网站广告弹出层实现. 高仿163网站广告弹出层(每 ...
基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
仿360搜索界面html,仿360网站卫士拦截页面黑页源码
黑页源码下载,最新黑页复制以下内容保存为index.html 您好,由于360过于垃圾保护不了你的网站你的网站被人黑了.很抱歉,由于360太垃圾了,没有抵挡住渗透攻击拦截URL: 如果您是站长, ...
发布一个免费漂亮的仿Outlook风格、支持换肤的通用界面框架
这个通用界面框架是基于OSGi.NET插件框架来做的,先看一下运行效果. 换个皮肤试试看! 这个界面框架是OSGi.NET面向服务插件平台的一个通用的界面插件,OSGi.NET面向服务插件框架是一个支 ...
仿360桌面弹拉换壁纸接环动画效果
先看张效果图技术实现思路是继承一个View类,重载onDraw方法,在里面画一条线和圆环,重点是画的位置,那种曲线是利用Path做的,然后起一个线程去更新位置就好了,仔细观察了360桌面的效果,感觉 ...
Qt工作笔记-仿QQ登录界面（换肤，切换语言）
本程序含有资源文件,和QSS,在此博文不在展示. 源码下载地址: https://download.csdn.net/download/qq78442761/10389816 程序运行截图如下: 本程 ...
自制仿360首页支持拼音输入全模糊搜索和自动换肤
360首页搜索效果如下 1.完成编写的schoolnet校园网主要目录结构如下主要实现支持中文.拼音首字母.拼音全字母的智能搜索和换肤页面效果如下主要核心代码如下 1.head.jsp < ...
jstl 模糊比较_用java等语言仿360首页拼音输入全模糊搜索和自动换肤
360首页搜索效果如下 1.完成编写的schoolnet校园网主要目录结构如下主要实现支持中文.拼音首字母.拼音全字母的智能搜索和换肤页面效果如下主要核心代码如下 1.head.jsp 校园网首 ...
（源码）VC开发百分百仿360安全卫士界面，可换肤，可缩放
完全模仿360安全卫士的界面,可换肤,可缩放.其中包括360配置界面,360换肤界面360自定义滚动条,360托盘菜单,360新版特性界面等.可以兼容360安全卫士皮肤文件,使用VC开发,未使用除GD ...

仿360网站广告实现换肤特效

仿360网站广告实现换肤特效相关推荐

最新文章

热门文章