獲取選中內(nèi)容
// 1.1 獲取選中的文字 兼容
var selectedText;
if(window.getSelection){ // 標(biāo)準(zhǔn)模式 獲取選中的文字
selectedText = window.getSelection().toString();
}else{ // IE 系列
selectedText = document.selection.createRange().text;
}
舉例：微博分享
window.onload=function () {
var selectedText;
$("word").onmouseup=function (event) {
if(window.getSelection){ // 標(biāo)準(zhǔn)模式 獲取選中的文字
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";
}
//頁面點(diǎn)擊時取消選擇
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. + selectedText;
}
//清除選擇
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
</script>
2.基本動畫原理 ：left=offsetLeft+speed+"px"; 定時器實(shí)現(xiàn)累加
封裝基本動畫動畫
//封裝基本動畫
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";
//判斷是否超過目標(biāo)值或少于目標(biāo)值 可用差值與布長判斷 不管大于或小于 使她等于目標(biāo)值
if(Math.abs(target-obj.offsetLeft)<Math.abs(speed)){
clearInterval(obj.timer);
obj.style.left=target+"px";
}
},20)
}
可運(yùn)用基本動畫做一個案例
仿淘寶輪播 原生js
<script>
window.onload=function () {
var aLi=$("ul").children;
var olIndex=0,aLiIndex=0,timer=null;
//創(chuàng)建元素 初始化
$("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++){
//運(yùn)用閉包 讓里邊可以訪問外邊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);
//自動輪播的函數(shù)
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++;
//關(guān)鍵點(diǎn) 當(dāng)輪播到復(fù)制的圖片時 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常用函數(shù)
Math.random() //隨機(jī)獲取0~1隨機(jī)數(shù)
Math.round() //四舍五入取值
Math.ceil() //向上取值
Math.floor() //向下取值
Math.abs() //取正數(shù)
4.緩動動畫 例如：speed改變 left=offsetLeft+speed+"px" speed=(target-offsetLeft)*緩動系數(shù)
封裝緩動函數(shù)
**
* 緩動動畫
* @param obj
* @param json
* @param fuc
*/
function buffer(obj, json,fuc) {
// 1.1 清除定時器
clearInterval(obj.timer);
// 1.2 設(shè)置定時器
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);
// 判斷有沒有回調(diào)函數(shù)
if(fuc){
fuc();
}
}
}, 20);
}
舉例：緩動動畫未封裝時 返回頂部 原理：begin=scroll().top target=0;
scrollTo(0,begin)
window.onload=function () {
//聲明變量
var begin=0,end=0,timer=null;
clearInterval(timer);
//監(jiān)聽窗口滾動
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值 封裝函數(shù)
function getStyleAttr(obj, attr) {
if(obj.currentStyle){ // IE 和 opera
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
}
舉例：樓層特效 原理：鼠標(biāo)點(diǎn)擊 運(yùn)動相同位置 scrollTop=索引*client().height 滾動條滾動 左邊劃到相應(yīng)樓層原理：當(dāng)滾動條滾動距離>=當(dāng)前劃到大的內(nèi)容.offsetTop 設(shè)置當(dāng)前狀態(tài)
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.添加點(diǎn)擊事件 動畫實(shí)現(xiàn)
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=通過索引*可視區(qū)域的高度
buffer(document.documentElement,{scrollTop:i*client().height});
iClick=false;
}
})(i)
}
//4.當(dāng)滾動條滾動時 左邊Li顯示當(dāng)前l(fā)i
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";
}
}
}
}
}
