您的位置：首页 > 其它

返回顶部、懒加载、自定义右键

2019-09-09 22:38 246 查看

返回顶部

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#top{
height: 2000px;
}
a{ position:fixed; bottom: 10px; right: 10px; display: none}
</style>
</head>
<body id='top'>
<span></span>
<a href="#top" id="tp">返回顶部</a>
<script>
window.onscroll = function(){
var sT = document.documentElement.scrollTop
if(sT>500){
tp.style.display = 'block'
}else{
tp.style.display = 'none'
}
}
</script>
</body>

懒加载

<body>
<!-- 懒加载
页面没有到可视区域的时候页面的内容没有去发送这个请求
一般就是指图片
<img src='' >
-->
<div>
<img src="" alt="" data = 'images/1.jpg'>
<img src="" alt="" data = 'images/2.jpg'>
<img src="" alt="" data = 'images/3.jpg'>
<img src="" alt="" data = 'images/4.jpg'>

<img src="" alt="" data = 'images/1.jpg'>
<img src="" alt="" data = 'images/2.jpg'>
<img src="" alt="" data = 'images/3.jpg'>
<img src="" alt="" data = 'images/4.jpg'>
</div>
<script>
window.onscroll = load;
window.onload = load;
function load(){
var imgs = document.getElementsByTagName('img')
// imgs[0].src = imgs[0].getAttribute('data')
var cH = document.documentElement.clientHeight
var sT = document.documentElement.scrollTop
console.log( imgs[2].offsetTop)
for(var i=0; i<imgs.length;i++){

if( imgs[i].offsetTop<=cH+sT){
imgs[i].src = imgs[i].getAttribute('data')
}
}
}
</script>
</body>

自定义右键

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

#ul {
border: 1px solid #000;
width: 100px;
position: absolute;
display: none
}

#ul>li {
text-indent: 1em;
border-bottom: 1px solid #ccc;
position: relative;
}

li:hover {
background: #eee
}

li>ul {
position: absolute;
left: 101px;
top: 0;
border: 1px solid #000;
width: 100px;
display: none
}
</style>
</head>

<body>
<ul id="ul">
<li>返回</li>
<li id="li1">新建
<ul id="ul1">
<li>
html
</li>
<li>
css
</li>
<li>
js
</li>
</ul>
</li>
<li id="li2">复制
<ul id="ul2">
<li>
html
</li>
<li>
css
</li>
<li>
js
</li>
</ul>
</li>
<li>粘贴</li>
</ul>

<script>
document.oncontextmenu = function (ev) {

var x = ev.pageX;
var y = ev.pageY;
ul.style.display = 'block';
ul.style.left = x + 'px';
ul.style.top = y + 'px';
ev.preventDefault();
}
var li = document.getElementsByTagName('li')[0];
li.addEventListener('click', function () {
ul.style.display = 'none'
})
li1.onmouseover = function () {
// ul1.style.display = 'block'
over(ul1)
}
li1.onmouseout = function () {
out(ul1)
// ul1.style.display = 'none'
}

li2.onmouseover = function () {
over(ul2)
// ul2.style.display = 'block'
}
li2.onmouseout = function () {
// ul2.style.display = 'none'
out(ul2)
}
function over(obj) {
obj.style.display = 'block'
}
function out(obj) {
obj.style.display = 'none'
}
document.onclick = function () {
ul.style.display = 'none'
}
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航