!function($){
? /**
? ?* Description: jquery飄窗插件，可自適應(yīng)瀏覽器寬高的變化
? ?* Author: ddqre12345
? ?* CreateTime: 2017.5.3
? ?* param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125}
? ?* 參數(shù)說名: startL飄窗初始時距離左邊的距離, startT飄窗初始化距離頂部的距離, angle飄窗初始運動方向, speed運動速度(px/s)
? ?*/
? $.fn.autoMove = function(args){
? ? //先定義一些工具函數(shù)判斷邊距
? ? function isTop(pos, w_w, w_h, d_w, d_h){//飄窗到達上邊距
? ? ? return (pos.top<=0) ? true : false;
? ? }
? ? function isBottom(pos, w_w, w_h, d_w, d_h){//飄窗到達下邊距
? ? ? return (pos.top>=(w_h-d_h)) ? true : false;
? ? }
? ? function isLeft(pos, w_w, w_h, d_w, d_h){//飄窗到達左邊距
? ? ? return (pos.left<=0) ? true : false;
? ? }
? ? function isRight(pos, w_w, w_h, d_w, d_h){//飄窗到達右邊距
? ? ? return (pos.left>=(w_w-d_w)) ? true : false;
? ? }
? ? return this.each(function(){
? ? ? var w_w = parseInt($(window).width()),
? ? ? ? w_h = parseInt($(window).height()),
? ? ? ? d_w = parseInt($(this).width()),
? ? ? ? d_h = parseInt($(this).height()),
? ? ? ? d_l = (w_w-d_w)/2,
? ? ? ? d_t = (w_h-d_h)/2,
? ? ? ? max_l = w_w - d_w;
? ? ? max_t = w_h - d_h;
? ? ? //位置及參數(shù)的初始化
? ? ? var setobj = $.extend({startL:d_l, startT:d_t, angle:Math.PI/4, speed:100}, args);
? ? ? $(this).css({position: 'fixed', left: setobj['startL']+'px', top: setobj['startT']+'px'});
? ? ? var position = {left: setobj['startL'], top: setobj['startT']};//飄窗位置對象
? ? ? var that = $(this);
? ? ? var angle= setobj.angle;
? ? ? var time = 10;//控制飄窗運動效果，值越小越細膩
? ? ? var step = setobj.speed * (time/1000);//計算運動步長
? ? ? var decoration = {x:step*Math.cos(angle), y:step*Math.sin(angle)};//計算二維上的運動增量
? ? ? var mvtid;
? ? ? $(window).on('resize', function(){//窗口大小變動時重新設(shè)置運動相關(guān)參數(shù)
? ? ? ? ? w_w = parseInt($(window).width());
? ? ? ? ? w_h = parseInt($(window).height());
? ? ? ? ? max_l = w_w - d_w;
? ? ? ? ? max_t = w_h - d_h;
? ? ? });
? ? ? function move(){
? ? ? ? position.left += decoration.x;
? ? ? ? position.top ?+= decoration.y;
? ? ? ? if(isLeft(position, w_w, w_h, d_w, d_h)||isRight(position, w_w, w_h, d_w, d_h)){
? ? ? ? ? decoration.x = -1*decoration.x;
? ? ? ? }
? ? ? ? if(isRight(position, w_w, w_h, d_w, d_h)){
? ? ? ? ? position.left = max_l;
? ? ? ? }
? ? ? ? if(isTop(position, w_w, w_h, d_w, d_h)||isBottom(position, w_w, w_h, d_w, d_h)){
? ? ? ? ? decoration.y = -1*decoration.y;
? ? ? ? }
? ? ? ? if(isBottom(position, w_w, w_h, d_w, d_h)){
? ? ? ? ? position.top = max_t;
? ? ? ? }
? ? ? ? //that.css({left:position.left, top:position.top});
? ? ? ? that.stop().animate({left:position.left, top:position.top}, time);//改用jquery動畫函數(shù)使其更加平滑
? ? ? ? mvtid = setTimeout(move, time);//遞歸調(diào)用，使飄窗連續(xù)運動
? ? ? }
? ? ? move();//觸發(fā)動作
? ? ? that.on('mouseenter', function(){ clearTimeout(mvtid) });//添加鼠標事件
? ? ? that.on('mouseleave', function(){ move() });
? ? });
? }; //end plugin definition
}(jQuery);

http("POST", "/School/detail", {"id":s_id}, function (e) {
? ? ?
? ? ? ? vm.piaoc = e.data;
? ? ? ? vm.$nextTick(function () {
? ? ? ? ? ? $('.automv').autoMove({angle:-Math.PI/4, speed:50});
? ? ? ? ? ? $("body").on("click",".automv span",function(){
? ? ? ? ? ? ? ? $(this).parent().find("a").removeAttr("href");
? ? ? ? ? ? ? ? $(this).parent().hide();
? ? ? ? ? ? })
? ? ? ? })
? ? })

<template v-if="piaoc != null">
? ? ? <template v-if="piaoc.is_open_float_win == '1'">
? ? ? ? ? ? ? ? <div class="automv" :style="'display: block;height:'+piaoc.open_float_height+';width:'+piaoc.open_float_width">
? ? ? ? ? ? ? ? ? ? <span>×</span>
? ? ? ? ? ? ? ? ? ? <a :href="piaoc.open_float_url" rel="external nofollow" >
? ? ? ? ? ? ? ? ? ? ? ? <template v-if="piaoc.open_float_image">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img :src="piaoc.open_float_image_name+'!y'" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? ? ? <template v-else>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="../image/piaochuang.jpg" alt="">
? ? ? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </template>
? ? ? ? ? ? <template v-else>
? ? ? ? ? ? ? ? <div class="automv" style="display: none;"></div>
? ? ? </template>
</template>

.automv{
? ? width: 200px;
? ? height: 150px;
? ? z-index: 1032;
? ? position: relative;
}
.automv a{
? ? display: block;
? ? width: 100%;
? ? height: 100%;
}
.automv a img{
? ? width: 100%;
? ? height: 100%;
}
.automv span{
? ? position: absolute;
? ? right: 3px;
? ? top: 3px;
? ? font-size: 26px;
? ? color: #fff;
? ? cursor: pointer;
? ? display: block;
? ? width: 20px;
? ? height: 20px;
? ? line-height: 20px;
? ? text-align: center;
}
.automv:hover span{
? ? color: #fc87a3;
}