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 ...
随机推荐
- 在eclipse中启动tomcat时报错：could not create java virtual machine... a fatal error...
控制台报错:unrecoginzed option: --launcher XXMaxPermSize 解决方法:-〉 perference -> tomcat ->JVM setting ...
- UVa 11621 - Small Factors
称号:发现没有比给定数量少n的.只要2,3一个因素的数字组成. 分析:数论.贪婪,分而治之. 用两个三分球,分别代表乘法2,和繁殖3队列,队列产生的数字,原来{1}. 然后.每取两个指针相应元素*2和 ...
- Android系统APN配置具体解释
Android 系统APN配置具体解释 这些天一直在调系统原生的Settings.apk里面APN配置的问题.在设置里面手动添加了APN配置选项.可是在界面上还是看不到.所以跟了下代码.原以为就是简 ...
- Mysql 5.6 新特性
随笔,真的随笔,以后理解得更深了再修改. Index Condition Pushdown 更多的让存储引擎去处理Where语句中的条款,避免返回无关字段数据等: Multi-Range Re ...
- executeBatch()相关操作汇总
环境:oracle使用PreparedStatement的executeBatch方法,如果DML操作成功,返回值[-2,-2,...]an array of update counts contai ...
- JAVA基础实例（三）--排序
冒泡排序 是一种简单的排序算法.它反复地走訪过要排序的数列,一次比較两个元素.假设他们的顺序错误就把他们交换过来.走訪数列的工作是反复地进行直到没有再须要交换,也就是说该数列已经排序完毕. 这个算法的 ...
- Linux 的 Shell
一个:Shell 概念 shell 这个词是不奇怪,意思是 "壳" 这是间OS 用户和芯层之间的相互作用,在linux系统.用户可以通过命令终端.使用shell 命令向下传达他们的 ...
- 深入了解C++中间mutablekeyword
深入理解C++中的mutablekeyword kezunhai@gmail.com http://blog.csdn.net/kezunhai keywordmutable是C++中一个不 ...
- atcoder它A Mountaineer
Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB Problem Dave is a mountaineer. He is ...
- 命令模式 & 策略模式 & 模板方法
一.策略模式 策略模式:封装易变化的算法,可互相替换. GoF<设计模式>中说道:定义一系列算法,把它们一个个封装起来,并且使它们可以相互替换.该模式使得算法可独立于它们的客户变化. 比如 ...