纯JavaScript实现“返回顶部”和“评分”，“分享”等小功能
1.返回顶部功能的实现
<!DOCTYPE html>
<html>
<head>
<title>Back to Top</title>
<style type="text/css">
#btn{position:fixed;bottom: 0;right: 0px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
var bSys=true;
var timer=null;
//如何检测用户拖动滚动条
window.onscroll=function(){
if(!bSys){
clearInterval(timer);
}
bSys=false;
}
oBtn.onclick=function(){
timer=setInterval(function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var iSpeed=Math.floor(-scrollTop/8);
if(scrollTop==0){
clearInterval(timer);
}
bSys=true;
document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
},100)
}
}
</script>
</head>
<body style="height: 2000px;">
a11111
<input id='btn' type="button" value="back to top"> </body>
</html>
2.仿迅雷评分的小功能
<!DOCTYPE html>
<html>
<head>
<title>星级评论</title>
<style type="text/css">
*{margin:0;padding: 0;}
#rank{width: 800px;margin: 0 auto;}
li{list-style:none;background:url(images/timg.png)top center no-repeat;width: 140px;height: 150px; float: left;}
.active{background:url(images/timg.png) -10px 0 no-repeat;}
p{display: none;border:2px solid #000;text-align: center;}
</style>
<script type="text/javascript">
var aData=['很差','较差','一般','推荐','力荐']
window.onload=function(){
var oDiv=document.getElementById('rank');
var aLi=oDiv.getElementsByTagName('li');
var oP=oDiv.getElementsByTagName('p')[0];
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
oP.style.display='block';
oP.innerHTML=aData[this.index];
for(var i=0;i<=this.index;i++){
aLi[i].className='active';
}
};
aLi[i].onmouseout=function(){
oP.style.display='none';
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
}
};
aLi[i].onclick=function(){
alert('评分为'+(this.index+1)*2+'分');
}; }; };
</script>
</head> <body>
<div id="rank">
<ul>
<li></li>
<li ></li>
<li></li>
<li></li>
<li></li>
<div style="clear: both;"></div>
</ul>
<p>一般</p>
</div>
</body>
</html>
3.分享小功能：平时我们会看到有些网站点击侧栏分享小按钮会有很多分享平台
<!DOCTYPE html>
<html>
<head>
<title>share</title>
<style type="text/css">
#div1{width: 100px;height: 200px;background: #ccc;position: absolute;left:-100px;}
#div1 span{width: 20px;height: 60px;line-height: 20px;text-align: center;left: 100px;top:70px;background: yellow;position: absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(0);
}
oDiv.onmouseout=function(){
startMove(-100);
}
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
// var iSpeed=-10;
if(oDiv.offsetLeft<iTarget){
iSpeed=10;
}
else{
iSpeed=-10;
}
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30) }
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
4.JS实现固定侧边栏广告，广告不会随着鼠标的滑动而变化位置
<!DOCTYPE html>
<html>
<head>
<title>siderbarAd</title>
<style type="text/css">
#div1{width:100px;height:100px;position: absolute;right: 0;background: red;}
</style>
<script type="text/javascript">
window.onresize=window.onload=window.onscroll=function(){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
oDiv.style.top=scrollTop+t+'px';
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
5.有时候我们会看到打开新窗口就会运行里面的程序
点击run里面的程序代码会执行
<!DOCTYPE html>
<html>
<head>
<title>open window</title>
<script type="text/javascript">
window.onload=function(){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
//window.open('http://www.baidu.com/','_self');
//document.write();
var oNewWin=window.open('about:blank');
oNewWin.document.write(oTxt.value);
}
}
</script>
</head>
<body>
<!-- <input id='btn' type="button" value="open"> -->
<textarea id='txt1' rows="10" cols="40">
<h1>Hello world!</h1>
</textarea><br/>
<input id='btn' type="button" value="run">
</body>
</html>
6.事件冒泡的处理：阻止事件冒泡可以防止触发父元素上面绑定的事件。
点击show会弹出一个div，点击其他地方div隐藏
<!DOCTYPE html>
<html>
<head>
<title>shijianmaopao</title>
<style type="text/css">
#div1{width: 100px;height: 150px;background: red;display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
var oEvent=ev||event;
oDiv.style.display='block';
oEvent.cancelBubble=true;//阻止事件冒泡
};
//给整个document加点击事件
document.onclick=function(){
oDiv.style.display='none';
};
};
</script> </head>
<body>
<input id="btn" type="button" value="show">
<div id="div1"></div>
</body>
</html>
纯JavaScript实现“返回顶部”和“评分”，“分享”等小功能的更多相关文章
- DIY 博客全文界面的推荐、反对、加关注、返回顶部、快速评论等小功能的集成
博客园已经很不错了,但作为比较“挑剔”的用户,在使用的过程中,还是有一些地方不爽的. 我不是一个专业的前台程序员,也只能凭借自己蹩脚的JS和CSS知识完成对页面的小改造(专业的大虾莫要鄙视呀..). ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- JavaScript之返回顶部
为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
- JavaScript实现返回顶部效果
仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...
- 纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...
- 原生态纯JavaScript 100大技巧大收集---你值得拥有
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
- JQuery 实现返回顶部
1.添加html <div id="back-to-top"> <a href="javascript:;" title="返回顶部 ...
- javascript返回顶部几种代码总结
纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
随机推荐
- pymysql连接、关闭、查询，python如何操作mysql数据库
1 def get_conn(): 2 """ 3 :return: 连接,游标 4 """ 5 # 创建连接 6 conn = pymys ...
- .NET Core WebApi 多语言本地化,动态切换多语言
.NET Core WebApi 多语言本地化,动态切换多语言 原生的.net core webapi 动态多语言本地话 具体更多详细内容,可以参考官方文档 首先看效果图 整体项目结构图 开始前需要讲 ...
- Lustre架构介绍的阅读笔记-基础知识
本文是在阅读Introduction to Lustre* Architecture的如下章节时的笔记. Lustre – Fast, Scalable Storage for HPC Lustre ...
- Python实现聊天机器人接口封装部署
一.前言说明 博客声明:此文链接地址https://www.cnblogs.com/Vrapile/p/12427326.html,请尊重原创,未经允许禁止转载!!! 1. 功能简述 (1)将chat ...
- OpenHarmony轻松玩转GIF数据渲染
OpenAtom OpenHarmony(以下简称"OpenHarmony")提供了Image组件支持GIF动图的播放,但是缺乏扩展能力,不支持播放控制等.今天介绍一款三方库--o ...
- 【FAQ】视频编辑服务常见问题及解答
Q1问题描述 1. 访问贴纸等素材的时候提示"网络异常,请重试"怎么办? 2. 使用AI能力时,提示"errorCode:20124 errorMsg:Method no ...
- openGauss数据与PostgreSQL的差异对比
openGauss 数据与 PostgreSQL 的差异对比 前言 openGauss 数据库已经发布 2.0.1 版本了,中启乘数科技是一家专业的专注于极致性能的数据库服务提供商,所以也关注 ope ...
- 在HarmonyOS上使用ArkUI实现计步器应用
介绍 本篇Codelab使用ArkTS语言实现计步器应用,应用主要包括计步传感器.定位服务和后台任务功能: 1. 通过订阅计步器传感器获取计步器数据,处理后显示. 2. 通过订阅位置服务获取位 ...
- node require 运行步骤
前言 准备整理node 系列,先把一些基础含义放出来. 在学习node 的时候我们一般加载模块都是require,那么require 是如何运行的呢? 正文 通常,在Node.js里导入是通过 req ...
- js 实现双指缩放
前言随着智能手机.平板电脑等触控设备的普及,交互方式也发生了改变.相对于使用鼠标和键盘进行交互的电脑,触控设备可以直接使用手指进行交互,而且基本上都支持多点触控.多点触控最常见的操作莫过于双指缩放了. ...