js实现网站首页分享滑块
<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<style>
#div1{
width:150px;
height: 200px;
background-color: green;
position: absolute;
left:-150px; }
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-h eight:20px ;
background: blue;
right:-20px;
top:70px;
}
</style>
<body>
<div id="div1" > <span>分享到</span>
</div> </body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove();
}
oDiv.onmouseout=function(){
startMove(-);
}
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=;
if(oDiv.offsetLeft>iTarget){
speed=-;
}else{
speed=;
}
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},);
} </script>
</html>
js实现网站首页分享滑块的更多相关文章
- Sequence.js - 适合电子商务网站的图片滑块
Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 抓取Bing每日图片作为网站首页背景
把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新 效果图如下: 理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页. ...
- 织梦DEDECMS网站首页如何实现分页翻页
织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...
- 保持url唯一性 解决多个网站首页问题
原文地址:http://www.seowhy.com/bbs/thread-2694339-1-1.html 在网站SEO优化过程中,经常会遇到这样或者那样的常见技术型问题,达闻现将此类常见技术问题总 ...
- Vue 网站首页加载优化
Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. v ...
- 对石家庄铁道大学网站首页进行UI分析
对石家庄铁道大学网站首页进行UI界面分析首先,铁道大学的网页首页分为图文热点,学校新闻,校内公告,媒体看铁大,学术咨询等等模块.通过分析这些模块,可以看出,学校网站首页针对的使用对象有很多,包括学校领 ...
- dedecms如何随机调用指定分类下的文章到网站首页
dedecms是全静态的,有时会因为其他事情好几天没写文章推荐到首页,那样对se不是很友好.原本ytkah是想在网站首页上半部分调用几篇id从200到500的文章随机展示的,这样每次更新首页给se的赶 ...
- js获取网站根目录
//js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址 function getRootPath(){ var strFullPath=window ...
随机推荐
- Class__One HomeWork 实验报告
石家庄铁道大学信息科学与技术学院 实验报告 2018年----2019年 第一学期 题目: 四则运算和验证码 课程名称: JAVA语言程序设计 班 ...
- webpack4.0 实战记录
从零配置webpack4.0 搭建React工程. 基本环境:Node(v8.1.2)+ webpack(v4.16.2) 1.在项目目录 命令窗口 执行 npm init 初始化项目,执行完后项 ...
- AtCoder Beginner Contest 082 A - Round Up the Mean
题目链接:https://abc082.contest.atcoder.jp/tasks/abc082_a Time limit : 2sec / Memory limit : 256MB Score ...
- Step5：SQL Server 跨网段（跨机房）FTP复制
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 参考文献(References) ...
- DOS下读取PCI配置空间信息的汇编程序（通过IOCF8/IOCFC）
汇编程序编写的读取PCI配置空间信息的代码(通过IOCF8/IOCFC): ;------------------------------------------------ ;功能: 读取PCI 配 ...
- django 模型类的常见字段约束，以及filter 过滤和查询
null 不设置时默认设置为False.设置为True时,数据库表字段中将存入NULL的记录. null和blank组合使用,null=True,blank=True,表示该字段可以为空 blank ...
- Docker学习笔记之搭建Docker运行环境
0x00 概述 既然 Docker 是一款实用软件,我们就不得不先从它的安装说起,只有让 Docker 运行在我们的计算机上,才能更方便我们对 Docker 相关知识和使用方式的学习.得益于与商业性的 ...
- CI(CodeIgniter)框架下使用非自带类库实现邮件发送
在项目开发过程中,需要到了邮件提醒功能.首先想到的是CI自身带不带邮件发送类,查看帖子,发现CI本身自带,然后试着利用CI自身带的类库来实现,经过搜搜很多帖子,不少开发者反馈CI自身的Email类有问 ...
- pagehelper调用mybatis报错java.lang.NoSuchMethodError:org.apache.ibatis.reflection.MetaObject.forObject
最近在升新的基础框架到spring cloud,启动时pagehelper报错,如下: java.lang.NoSuchMethodError:org.apache.ibatis.reflection ...
- yum指定安装目录
纯粹做笔记 yum -c /etc/yum.conf --installroot=/opt/test/ --releasever=/ install lrzsz