href 做导航 特效
<div>
<div>
<%for (int i = 0; i < 200; i++)
{
%><%=i.ToString() %>
<br />
<%
} %>
<div id="toTopB_blk">11</div>
<%for (int i = 400; i < 600; i++)
{
%><%=i.ToString()%>
<br />
<%
} %>
</div>
<a href="#toTopB_blk" class="toTop toTop02">111</a>
</div>
点击 链接 跳转 到 <div id="toTopB_blk">11</div> 这里。
还可以 借助 css js 做一些 特效。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm13.aspx.cs" Inherits="bootstrapLearn.WebForm13" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery.min.js"></script> <script>
ishid = true;
/*导航滚动效果*/
function navClarity() {
var ground = $("#nav-background");
var nav = $(".nav");
var logo = $(".brand"); var winWid = document.documentElement.clientWidth;
if ($(window).scrollTop() > || winWid < ) {
ground.removeClass("nav-clarity");
ground.addClass("nav-solid"); } else {
ground.removeClass("nav-solid");
ground.addClass("nav-clarity"); }
} /*下载移入效果*/
function downloadImg(o) {
$(o).hover(
function () {
//$(this).find("img").stop().fadeIn();
},
function () {
//$(this).find("img").stop().hide();
}
) } /*返回顶部*/
function toTop() {
var to01 = $(".toTop01");
var to02 = $(".toTop02");
var to = $(".toTop");
var toB = $(".footer"); to.hover(
function () {
//$(this).find("div").fadeIn();
},
function () {
//$(this).find("div").hide();
}
) $(window).scroll(function () {
var st = $(window).scrollTop();
if (st > document.documentElement.clientHeight) { to01.show(); var toT = parseInt(to01.offset().top);
var toB1 = parseInt(toB.offset().top);
var toSH = document.body.scrollHeight - ;
console.log(toT > toSH, toT, toSH, toB1);
if (toT > toSH) {
//to01.hide();
to02.show().css({ "top": toB1 - + "px" });
} else {
//to01.show();
// 渐出 div4click();
return;
to02.hide(); }
} else { div3click();
return;
to01.hide(); }
if (to02.is(":hidden")) { to01.show(); } else { to01.hide(); }
if (st < document.documentElement.clientHeight) { to01.hide(); }
}); } /*锚点*/
function goto(s) { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$(s).click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice() + ']');
if ($target.length) {
var targetOffset = $target.offset().top - ;
$('html,body').animate({
scrollTop: targetOffset
},
);
return false;
}
}
}); } //搜索获得焦点
function searchC() {
$(".search-help-text").focus(function () {
$(this).animate({ "width": "460px" });
}).blur(function () {
$(this).animate({ "width": "260px" });
});
} $(document).ready(function () {
navClarity();/*导航滚动效果*/
downloadImg(".download-img a");/*下载移入效果*/
downloadImg(".Download_hp p"); toTop();/*返回顶部*/ searchC();/*搜索获得焦点*/ goto(".toTop");
goto(".explainGo");
}) $(window).resize(function () {
navClarity();/*导航滚动效果*/
}); $(window).scroll(function () {
navClarity();/*导航滚动效果*/
}); </script> <script>
var rotINT, rotINT2, x, n = , y, m = , a = , b = ;
function div2click() {
x = document.getElementById("div2");
clearInterval(rotINT);
rotINT = setInterval("startRotate()", )
} function div1click() {
y = document.getElementById("div1");
clearInterval(rotINT2);
rotINT2 = setInterval("startRotate2()", )
} function startRotate() {
n = n +
x.style.transform = "rotate(" + n + "deg)"
x.style.webkitTransform = "rotate(" + n + "deg)"
x.style.OTransform = "rotate(" + n + "deg)"
x.style.MozTransform = "rotate(" + n + "deg)"
if (n == ) {
clearInterval(rotINT)
if (n == ) { n = }
}
}
function startRotate2() {
m = m +
y.style.transform = "translateX(" + m + "px)";
y.style.webkitTransform = "translateX(" + m + "px)";
y.style.OTransform = "translateX(" + m + "px)";
y.style.MozTransform = "translateX(" + m + "px)";
if (m == ) {
clearInterval(rotINT2)
if (m == ) { m = }
}
} function startRotateOut() {
a = a -
x.style.transform = "rotate(" + a + "deg)"
x.style.webkitTransform = "rotate(" + a + "deg)"
x.style.OTransform = "rotate(" + a + "deg)"
x.style.MozTransform = "rotate(" + a + "deg)"
if (a == ) {
clearInterval(rotINT)
if (a == ) { a = }
}
} function startRotate2Out() {
b = b -
y.style.transform = "translateX(" + b + "px)";
y.style.webkitTransform = "translateX(" + b + "px)";
y.style.OTransform = "translateX(" + b + "px)";
y.style.MozTransform = "translateX(" + b + "px)";
if (b == ) {
clearInterval(rotINT2)
if (b == ) { b = }
}
}
//hid
function div3click() {
if (!ishid) {
div1click();
div2click();
}
ishid = true;
}
// show
function div4click() {
if (ishid) {
y = document.getElementById("div1");
clearInterval(rotINT2);
rotINT2 = setInterval("startRotate2Out()", ) x = document.getElementById("div2");
clearInterval(rotINT);
rotINT = setInterval("startRotateOut()", )
}
ishid = false; }
</script>
<style>
#toTopB_blk {
display: block;
height: 0px;
width: %;
margin: auto;
padding: ;
overflow: hidden;
} .toTop {
display: none;
height: 60px;
width: 60px;
/*background-image: url(../images/toTop00.png);
background-repeat: no-repeat;*/
} .toTop div {
/*display: none;*/
height: 60px;
width: 60px;
/*background-image: url(../images/toTop01.png);
background-repeat: no-repeat;*/
} .toTop01 {
position: fixed;
_position: absolute;
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight-);
z-index: ;
right: 20px;
bottom: 35px;
} .toTop02 {
display: none;
position: absolute;
z-index: ;
right: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<%----%>
<div id="dd" style="position: fixed; left: 100px"><input type="button" onclick="div4click()" /></div> <div id="toTopB_blk"></div>
<a href="#toTopB_blk" class="toTop toTop01">
<div id="div1" onclick="" style="position: fixed; right: 10px; height: 50px; width: 50px">
<div id="div2" style="background-image: url(11/top_button2.png); height: 50px; width: 50px"></div>
</div>
</a>
<a href="#toTopB_blk" class="toTop toTop02">
<div id="div3" onclick="" style="position: fixed; right: 10px; height: 50px; width: 50px">
<div id="div4" style="background-image: url(11/top_button2.png); height: 50px; width: 50px"></div>
</div>
</a>
<div>
<%for (int i = ; i < ; i++)
{
%><%=i.ToString() %>
<br />
<%
} %>
</div> <div class="footer">
<%--<div class="container">
<div class="row-fluid show-grid"> <div class="span9">
<div class="row-fluid">
<div class="span6">
<div class="footer-guild">
<h6>技术支持服务</h6>
<table>
<tr>
<td>技术支持电话</td>
<td>：--</td>
</tr>
<tr>
<td>技术支持QQ</td>
<td>：</td>
</tr>
<tr>
<td style="letter-spacing: 0.25em">QQ交流群</td>
<td>：</td>
</tr>
<tr>
<td style="letter-spacing: 0.22em">论坛讨论区</td>
<td>：
<a href="http://bbs.ikuai8.com/forum.php" target="_blank">bbs.ikuai8.com</a>
</td>
</tr>
</table>
</div>
</div>
<div class="span6">
<div class="footer-service">
<h6>产品销售</h6>
<table>
<tr>
<td class="tt">联系电话</td>
<td>：- -</td>
</tr> <tr>
<td style="letter-spacing: 0.1em">联 系 人</td>
<td>：爱快市场</td>
</tr> <tr>
<td>邮 箱</td>
<td>：<a href="mailto:sales@ikuai8.com">sales@ikuai8.com</a></td>
</tr> <tr>
<td colspan="">
<a href="#" target="_blank">了解我们的商业产品</a>
</td>
</tr>
</table> </div>
</div>
<div class="footer-guild">
<div class="span12">
<div class="footer-copyright tc">
<span onclick="$('#login').show()">(C)版权所有</span> iKuaiCopyright(C) All Rights Reserved 京ICP备13001110号
</div>
</div>
</div>
</div>
</div> <div class="span3">
<div class="footer-logo fc">
<a class="" href="#">
<img src="img/logo-small.png" /></a>
<img src="img/qrCode.png" />
</div>
</div> </div>
</div>--%>
</div>
</form>
</body>
</html>
href 做导航 特效的更多相关文章
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- JQuery制作简单的网页导航特效
使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触 ...
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- react-navigation 做导航栏，发现 Android 上的标题不居中
在做 React Native 应用的时候,我们常常使用 react-navigation 做导航栏,发现 Android 上的标题不居中,IOS 上没问题. 1 如果只有标题,那就在 headerT ...
- [Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...
- php -- PHP实现点击a标签的href做链接时，直接保存文件（任何类型），而不是通过浏览器直接打开下载的文件
之前做项目遇到这样一个问题,就是在php环境下,用a标签的href链接到一个资源,比如是mp3或者lrc文件时,点击之后不是出现保存文件的提示,而是调用本地程序打开文件或者直接在浏览器上解析.网上说可 ...
- 在react项目当中做导航守卫
距离上一篇文章,似乎已经过去好久了. 确实是最近相对忙了一点,本身是用vue重构之前一个传统的项目,就自己一个人写.而且,在稍微闲暇之余,想着同时用react也重构一遍,也算是对react的学习吧!毕 ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
- 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...
随机推荐
- leetcode第一刷_Minimum Path Sum
能够用递归简洁的写出,可是会超时. dp嘛.这个问题须要从后往前算,最右下角的小规模是已知的,边界也非常明显,是最后一行和最后一列,行走方向的限制决定了这些位置的走法是唯一的,能够先算出来.然后不断的 ...
- 利用hibernate的session查询数据库，而且在jsp页面显示表内容的方法
试过了非常多种方法都没有成功,最终让我找到了这样的方法! 首先在后台写代码: Transaction tx = session.beginTransaction(); List list = sess ...
- 自己动手写一个编译器Tiny语言解析器实现
然后,上一篇文章简介Tiny词法分析,实现语言.本文将介绍Tiny的语法分析器的实现. 1 Tiny语言的语法 下图是Tiny在BNF中的文法. 文法的定义能够看出.INNY语言有以下特点: 1 程序 ...
- linux并发连接数查看
1.查看Webserver(Nginx Apache)的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) pri ...
- hdoj1010Starship Troopers （树dp，依赖背包）
称号:hdoj1010Starship Troopers 题意:有一个军队n个人要占据m个城市,每一个城市有cap的驻扎兵力和val的珠宝,并且这m个城市的占率先后具有依赖关系,军队的每一个人能够打败 ...
- 利用Ring Buffer在SQL Server 2008中进行连接故障排除
原文:利用Ring Buffer在SQL Server 2008中进行连接故障排除 出自:http://blogs.msdn.com/b/apgcdsd/archive/2011/11/21/ring ...
- Cordova WP8 平台安装部署
原文:Cordova WP8 平台安装部署 Cordova是一个开放源码移动开发框架. 它允许您使用标准的 web 技术如 HTML5. CSS3 和 JavaScript 进行跨平台开发,避免每个移 ...
- IOS-Plist文件存储(1)
1.什么是一个文件系统? IOS每个应用程序都有自己的文件系统.并且有一个相应的接入,一般分 ~/Documents/ ~/tmp/ ~/Library/Caches/ ~/Library/Prefe ...
- 刷牙LeetCode思考
时间已经到了不自觉地,3在五月中旬.今天正式LeetCode自由181刷牙的问题.感觉,以提高他们的算法非常有帮助. 第一个主要的深搜索,广泛搜索,DP他已经掌握7788.也有自己写的代码格公式,使用 ...
- 基于GeoHash算法的附近点搜索实现（一）
1. 引入 最近在参加学校的计算机仿真大赛,时间好像有点不够,所以只完成了前面的一部分最基础的功能,中途还是选择了放弃.但是之前的部分的确觉得完成得还不错,在这里分享一下.题目是要完成一个宇宙飞船加油 ...