获取选中内容
// 1.1 获取选中的文字 兼容
var selectedText;
if(window.getSelection){ // 标准模式 获取选中的文字
selectedText = window.getSelection().toString();
}else{ // IE 系列
selectedText = document.selection.createRange().text;
}
举例：微博分享
window.onload=function () {
var selectedText;
$("word").onmouseup=function (event) {
if(window.getSelection){ // 标准模式 获取选中的文字
selectedText = window.getSelection().toString();
}else{ // IE 系列
selectedText = document.selection.createRange().text;
}
$("share_weibo").style.display="block";
var e=event || window.event;
$("share_weibo").style.left=e.clientX+"px";
$("share_weibo").style.top=e.clientY+"px";
}
//页面点击时取消选择
document.onmousedown=function (event) {
var e=event || window.event;
var targetId=e.target ? e.target.id :e.srcElement.id;
if(targetId!="share_weibo"){
$("share_weibo").style.display = "none";
}else{
//链接的路径 微博分享的API接口
window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectedText;
}
//清除选择
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
</script>
2.基本动画原理 ：left=offsetLeft+speed+"px"; 定时器实现累加
封装基本动画动画
//封装基本动画
function move(obj,target,speed) {
clearInterval( obj.timer);
var speed=target>obj.offsetLeft ? speed : -speed;
obj.timer=setInterval(function () {
obj.style.left=obj.offsetLeft+speed+"px";
//判断是否超过目标值或少于目标值 可用差值与布长判断 不管大于或小于 使她等于目标值
if(Math.abs(target-obj.offsetLeft)<Math.abs(speed)){
clearInterval(obj.timer);
obj.style.left=target+"px";
}
},20)
}
可运用基本动画做一个案例
仿淘宝轮播 原生js
<script>
window.onload=function () {
var aLi=$("ul").children;
var olIndex=0,aLiIndex=0,timer=null;
//创建元素 初始化
$("ul").appendChild(aLi[0].cloneNode(true));
for(var i=0;i<aLi.length-1;i++){
var li=document.createElement('li');
$("ol").appendChild(li);
}
$("ol").children[0].className="current";
//添加事件
var aOl= $("ol").children;
for(var i=0;i<aOl.length;i++){
//运用闭包 让里边可以访问外边i
(function (i) {
aOl[i].onmouseover=function () {
for(var j=0;j<aOl.length;j++){
aOl[j].className="";
}
this.className="current";
move($("ul"),-i*750,35);
olIndex=aLiIndex=i;
}
})(i)
}
clearInterval(timer);
timer=setInterval(lunbo,3000);
//自动轮播的函数
function lunbo() {
olIndex++;
if(olIndex>aOl.length-1){
olIndex=0;
}
for(var j=0;j<aOl.length;j++){
aOl[j].className="";
}
aOl[olIndex].className="current";
aLiIndex++;
//关键点 当轮播到复制的图片时 left为0 索引为1
if(aLiIndex>aLi.length-1){
$("ul").style.left=0+"px";
aLiIndex=1;
}
move($("ul"),- aLiIndex*750,25);
}
$("slider").onmouseover=function () {
clearInterval(timer);
}
$("slider").onmouseout=function () {
timer=setInterval(lunbo,3000);
}
}
3.Math常用函数
Math.random() //随机获取0~1随机数
Math.round() //四舍五入取值
Math.ceil() //向上取值
Math.floor() //向下取值
Math.abs() //取正数
4.缓动动画 例如：speed改变 left=offsetLeft+speed+"px" speed=(target-offsetLeft)*缓动系数
封装缓动函数
**
* 缓动动画
* @param obj
* @param json
* @param fuc
*/
function buffer(obj, json,fuc) {
// 1.1 清除定时器
clearInterval(obj.timer);
// 1.2 设置定时器
var begin = 0, target = 0, speed = 0;
obj.timer = setInterval(function () {
// 1.3.0 旗帜
var flag = true;
for(var k in json){
// 1.3 获取初始值
begin = parseInt(getStyleAttr(obj, k)) || 0;
target = parseInt(json[k]);
// 1.4 求出步长
speed = (target - begin) * 0.2;
// 1.5 判断是否向上取整
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
// 1.6 动起来
obj.style[k] = begin + speed + "px";
// 1.5 判断
if(begin !== target){
flag = false;
}
}
// 1.3 清除定时器
if(flag){
clearInterval(obj.timer);
// 判断有没有回调函数
if(fuc){
fuc();
}
}
}, 20);
}
举例：缓动动画未封装时 返回顶部 原理：begin=scroll().top target=0;
scrollTo(0,begin)
window.onload=function () {
//声明变量
var begin=0,end=0,timer=null;
clearInterval(timer);
//监听窗口滚动
window.onscroll=function () {
begin=scroll().top;
begin>0 ? show($("top")) : hide($("top"));
$("top").onclick=function () {
timer=setInterval(function () {
//欢动动画
begin+=(end-begin)*0.2;
scrollTo(0,begin);
console.log(begin,end);
//清除定时器
if(parseInt(begin)==end){
clearInterval(timer);
}
},20)
}
}
}
5.获取css值 封装函数
function getStyleAttr(obj, attr) {
if(obj.currentStyle){ // IE 和 opera
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
}
举例：楼层特效 原理：鼠标点击 运动相同位置 scrollTop=索引*client().height 滚动条滚动 左边划到相应楼层原理：当滚动条滚动距离>=当前划到大的内容.offsetTop 设置当前状态
window.onload=function () {
//1.获取元素
var oLis=$("ol").children;
var uLis=$("ul").children;
//2.初始化li颜色
var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
for(var i=0;i<colorArr.length;i++){
uLis[i].style.backgroundColor=colorArr[i];
}
var iClick=false;
//3.添加点击事件 动画实现
for(var i=0;i<oLis.length;i++){
(function (i) {
var oI=oLis[i];
oI.onmousedown=function () {
iClick=true;
for(var j=0;j<oLis.length;j++){
oLis[j].className="";
}
this.className="current";
//document.documentElement.scrollTop=通过索引*可视区域的高度
buffer(document.documentElement,{scrollTop:i*client().height});
iClick=false;
}
})(i)
}
//4.当滚动条滚动时 左边Li显示当前li
document.onscroll=function () {
if(!iClick){
//获取滚动高度
var roll=scroll().top;
for(var i=0;i<uLis.length;i++){
if(roll>=uLis[i].offsetTop){
for(var j=0;j<oLis.length;j++){
oLis[j].className="";
}
oLis[i].className="current";
}
}
}
}
}
网友评论