锚链接电梯效果

最新推荐文章于 2022-04-14 12:25:23 发布
最新推荐文章于 2022-04-14 12:25:23 发布
阅读量535 收藏
点赞数
分类专栏： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sn_qmzm521/article/details/53256257
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery183.min.js"></script>
<style>
ul,li,a,body,div{
margin:0px;
}
#nav li{
width:18%;
border:1px solid blue;
height:50px;
line-height:50px;
list-style:none;
text-align:center;
float:left;
}
.top_jt{
width:100px;
height:50px;
border:1px solid green;
text-align:center;
line-height:50px;
position: fixed;
top:800px;
left:1600px;
z-index:1000;
box-shadow: 1px 1px 10px #666;
}
.dingyi{
position: fixed;
top:0px;
z-index:1000;
box-shadow: 1px 1px 10px #666;
}
</style>
</head>
<body>
<div class="z_daohang" style="width:100%;height:60px;background: #fff;margin: 0 auto;margin-top:20px;">
<div class="z_daohang2" style="width:100%;">
<ul style="width:100%;" id="nav">
<li>
<a  href="#AA">AA</a>
</li>
<li>
<a  href="#BB">BB</a>
</li>
<li>
<a  href="#CC">CC</a>
</li>
<li>
<a  href="#DD">DD</a>
</li>
<li>
<a  href="#EE">EE</a>
</li>
</ul>
</div>
</div>
<div class="container" >
<div class="content">
<div id="AA" style="position:relative;">
<a name="AA" id="AA" style=" position:absolute;top:-50px;">&nbsp;</a>
</div>
<div style="margin-top:20px;">
<a >&nbsp;</a>
</div>
<div class="service_scope" style="height:600px;background-color:red;">
AAAAAAAAA
</div>
<div id="BB" style="position:relative;">
<a name="BB" id="BB" style=" position:absolute;top:-50px;">&nbsp;</a>
</div>
<div style="margin-top:20px;">
<a >&nbsp;</a>
</div>
<div class="service_scope" style="height:600px;background-color:blue;">
BBBBBBBB
</div>
<div id="CC" style="position:relative;">
<a name="CC" id="CC" style=" position:absolute;top:-50px;">&nbsp;</a>
</div>
<div style="margin-top:20px;">
<a >&nbsp;</a>
</div>
<div class="service_scope" style="height:600px;background-color:green;">
CCCCCCCC
</div>
<div id="DD" style="position:relative;">
<a name="DD" id="DD" style=" position:absolute;top:-50px;">&nbsp;</a>
</div>
<div style="margin-top:20px;">
<a >&nbsp;</a>
</div>
<div class="service_scope" style="height:600px;background-color:#ccc;">
DDDDDDDD
</div>
<div id="EE" style="position:relative;">
<a name="EE" id="EE" style=" position:absolute;top:-50px;">&nbsp;</a>
</div>
<div style="margin-top:20px;">
<a >&nbsp;</a>
</div>
<div class="service_cooperation" style="height:600px;background-color:#DEDEDE;">
EEEEEEEEEE
</div>
</div>
</div>
<!--回到顶部-->
<a href="javascript:;" class="top_jt" >↑回到顶部</a>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){//滚动事件

var top=$(this).scrollTop()
if(top>=400){
$(".top_jt").fadeIn(); //回到顶部按钮显示效果
}else{
$(".top_jt").fadeOut(); //回到顶部按钮显示效果
}

if(top>=30){
$(".z_daohang").addClass("dingyi") //导航定位效果
}else{
$(".z_daohang").removeClass("dingyi") //导航定位效果
}

$(".top_jt").click(function(){//回到顶部按钮点击事件
$("html,body").stop().animate({scrollTop:0})
})

})
})
</script>
<!--锚链接-->
<script type="text/javascript">
$(function(){
$('a[href*=#]').click(function() {//锚链接主要在点击的href的ID和需要显示的DIV,A,ID,NAME,一致
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                    scrollTop: targetOffset
                },
                500);
                return false;
            }
        }
    });
});
</script>
</body>
</html>
天步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中锚链接作用和特点,HTML<a>标签作为锚链接
weixin_34693059的博客
06-04 1000
1. 什么是锚链接？标签主要作为超链接和锚链接使用。超链接主要指不同html页面之间的跳转，而锚链接指的是同一页面之间的跳转。锚链接的两种效果：在当前页面中跳转.：通过元素的ID进行跳转 网页中的返回顶部效果：2. 小案例2.1 案例描述比如要实现点击下图中的 “×”隐藏这个区域的效果点击前：点击后：2.2 实现方法1.给 “×” 所在的标签设置锚链接：　　　　　x2.给 id 属性值为 clos...
jquery实现仿京东楼梯效果（比较全面的）
09-08
里面有index2.和index4两个效果是一样的只不过我用了两种不同的写法。 一个不用管点击效果直接通过锚点连接到导航的那个部分，一个是写了一个点击函数让他跳转过去。 我们需要记住点击也会触发滚动。他可能执行两个函数，所以选中的状态加个样式只在一个里面写，在滚动时写。
jQuery-锚链接滑动效果
05-15 128
$(function(){ $("ul li a").click(function(){ var hr = $(this).attr("href"); var anh = $(hr).offset().top; $("html,body").stop().animate({scrollTop:anh},2000); ...
基于Layui用JQ实现锚点定位/电梯导航(附带效果GIF)
分享、进步、收获！！！
08-18 1294
今天要给页面用JQ实现一个锚点定位，就是经常听到的电梯导航，京东和淘宝的主页都有这样的应用，一般是用于页面太长，方便用户定位到需要的位置，就是放的锚点。 下面看看HTML内容： //这个是导航栏 <div class="side-nav"> <span class="active">选择评分机</span> //默认选择的位置 <span>本机IP设置</span> <span>平..
原生js实现京东商城楼梯效果
weixin_30563319的博客
06-28 249
这个可能有些兼容问题和小bug,新手写的不完善 欢迎指出 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0px; ...
锚链6mm.SLDPRT
10-23
锚链6mm.SLDPRT
锚链钢市场深度研究与市场竞争态势分析报告
06-14
锚链钢市场深度研究与市场竞争态势分析报告
亚星锚链：亚星锚链2021年半年度报告.PDF
08-31
【亚星锚链2021年半年度报告】揭示了公司在该年度上半年的运营状况、财务表现以及面临的主要风险。亚星锚链是一家专注于锚链制造的江苏企业，其报告详细介绍了以下几个关键知识点： 1. **信息披露与责任声明**：...
锚链尺寸型号
12-28
船舶设计中所必不可少的东东，里面有各种锚链的尺寸型号，以及切断力应力等，是个很重要的参考文件
亚星锚链：2018年年度报告.PDF
06-14
【亚星锚链2018年年度报告】揭示了公司在该年度的运营状况和面临的行业挑战。报告中，亚星锚链展示了其在2018年的财务表现，包括净利润亏损以及利润分配预案，同时也阐述了公司的风险管理策略和未来展望。 首先，...
js电梯效果
ak157888的博客
12-01 4007
html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>左侧电梯演示</title> <script src="js/jquery-1.10.2.js"></script> <script src="js/LiftEffect.js"></script> <style>
css定位流布局 可做轮播图 电梯导航等效果
pyhui的技术博客
04-14 387
定位流的基本特性与小结
电梯效果一（只实现了单个人上下电梯，多人的待续--）
ruoyuanyi的专栏
07-25 1263
html代码 电梯演示 /*简单样式*/ * {     margin: 0;     padding: 0; } .wrapper{ width:800px; margin:0 auto; top:50px; position:relative; } .wrapper input{ width:35px; line-height:30px; t
滑动电梯效果
weixin_57130691的博客
03-15 178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
淘宝侧边导航栏+滑动电梯效果
qq_45387575的博客
03-26 1964
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
js模拟电梯运行的例子
showlin的专栏
05-19 4648
=========dianti.htm================="http://www.w3.org/TR/html4/loose.dtd">电梯模拟运行  var now_value=1;//电梯当前楼层var plan_value=now_value;//电梯初始计划停靠楼层var Floor_status=0;//电梯当前状态，停var Floor_num=20;va
电梯效果
涛涛的博客
09-23 393
电梯效果 效果图 具体代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 800px; height: 800px; backgro
HTML——锚链接
热门推荐
ShyuDai的博客
10-14 2万+
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp
jquery实现html超链接锚点之间的平滑效果
小菜鸟笔记
03-22 3330
之前没有学习js或jquery的时候，使用到超链接标签的锚点功能时，那样的效果感觉太生硬了，点击超链接，马上就跳转到目地地，给人一种不好的感觉，使用jquery来实现这一功能，给人的体验效果会好很多。具体代码是这样实现的，只要你网页上用到了锚点功能，将该代码直接贴上就可以使用。 $('a[href*=#]').click(function() { if (location.pathname
锚链集中质量法张力计算
最新发布
03-25
锚链是一种常见的海洋工程构件，使用锚链的目的是将船舶或构件固定在海床上。因为锚链受到海水和风浪的作用，所以需要计算锚链受力状态，以保证其安全可靠。集中质量法是一种流行的计算锚链张力的方法。下面介绍如何...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值