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 ...
随机推荐
- 自己动手写一个编译器Tiny语言解析器实现
然后,上一篇文章简介Tiny词法分析,实现语言.本文将介绍Tiny的语法分析器的实现. 1 Tiny语言的语法 下图是Tiny在BNF中的文法. 文法的定义能够看出.INNY语言有以下特点: 1 程序 ...
- hdu 4856 Tunnels(bfs+状态压缩)
题目链接:hdu 4856 Tunnels 题目大意:给定一张图,图上有M个管道,管道给定入口和出口,单向,如今有人想要体验下这M个管道,问最短须要移动的距离,起点未定. 解题思路:首先用bfs处理出 ...
- UML部署图和图九组件图
前言 UML大部分描写叙述了逻辑和设计方面的信息.实现图用来描写叙述实现方面的信息.实现图包含部署图和构件图. 构件图 1. 概念 构件图从软件架构的角度来描写叙述一个系统的 ...
- RH133读书笔记(9)-Lab 9 Installation and System-Initialization
Lab 9 Installation and System-Initialization Goal: Successfully install Red Hat Enterprise Linux. Sy ...
- javascript变量，作用域和内存问题（一）
js对象的引用是很有意思的,引用型对象是不可以直接引用的,我猜测这是原型的来源之一,有大神请详解或斧正. “引用类型的值是保存在内存中的对象.与其他语言不同,JavaScript不允 ...
- 简单搜索dfs， 简单的修剪搜索
选择最合适的语言做一个项目是非常重要的.但,熟练的掌握自己的武器,这也是非常重要的. ========================================================= ...
- fastboot完成自己主动命令
于Ubuntu13.10后来Ubuntu 14.04上,由APT安装fastboot以及adb该工具后, 发现fastboot在主动补充一个问题,, fastboot flash 自己主动有问题完成后 ...
- 具体解释首页被K后SEOer必做的三大排除方法！
近段时间.有非常多朋友向新辰抱怨说出大问题了,为神马site不到首页了,并且收录变成了0?唉,新辰不得不非常同情的告诉你:你的首页真的被K了!好了.作为一个职业SEOer.面对被K宛如已经看破红尘般没 ...
- iOS 生成随机颜色（UIColor）
#import <UIKit/UIKit.h> @interface UIColor (RandomColor) +(UIColor *) randomColor; @end #impor ...
- 如何使用Maven创建web工程（详细步骤）
使用eclipse插件创建一个web project 首先创建一个Maven的Project例如以下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing ...