How to realize the suspension frame of the Home Page by jQuery
Most people do not understand the knowledge points of this article "jQuery how to achieve home suspension box", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "jQuery how to achieve home suspension box" article.
Implement the home page suspension frame based on jQuery, as shown in the following figure
1. The code for introducing jQuery.bay-window.js,jQuery.bay-window.js into the page is as follows:
! function ($) {/ * Description: jquery floating window plug-in Can adapt to the change of browser width and height * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args= {startL:default, startT:default, angle:-Math.PI/4, speed: 125} * Parameter description: the distance from the left of the startL window at the beginning, the distance from the top of the startT window initialization, and the initial movement direction of the angle window. Speed movement speed (px/s) * / $. Fn.autoMove = function (args) {/ / define some tool functions to judge the margin function isTop (pos, w / w, w / h, d / w, d / h) {/ / the upper margin of the floating window return (pos.top= (w_h-d_h))? True: false;} function isLeft (pos, w / w, w / w, d / w) {/ / the window reaches the left margin return (pos.left= (w_w-d_w))? True: false } return this.each (function () {var wreckw = parseInt ($(window). Width ()), wishh = parseInt ($(window). Height ()), dhamw = parseInt ($(this). Width ()), dhumh = parseInt ($(this). Height ()), dhuml = (w_w-d_w) / 2 Dempt = (w_h-d_h) / 2, max_l = w _ w-d _ w Max_t = initialization of locations and parameters 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']}; / / floating window position object var that = $(this); var angle= setobj.angle; var time = 10 control floating window movement effect, the smaller the value, the more delicate var step = setobj.speed * (time/1000). / / calculate the motion step var decoration = {x:step*Math.cos (angle), y:step*Math.sin (angle)}; / / calculate the motion increment var mvtid; $_ (window) .on ('resize', function () {/ / when the window size changes, reset the motion-related parameter w / parseInt ($(window). Width () Function move h = parseInt ($(window). Height ()); max_l = w _ w-d _ w _ w; max_t = w _ r _ h-d _ h;}); function move () {position.left + = decoration.x; position.top + = decoration.y If (isLeft (position, w / w, w / h) | | isRight (position, w / w, w / h, d / w, d / h)) {decoration.x =-1 decoration.x;} if (isRight (position, w / w, w / w, d / w)) {position.left = max_l } if (isTop (position, w, d, h) | | isBottom (position, w / w, w / h, d / w, d / h)) {decoration.y =-1 decoration.y;} if (isBottom (position, w / w, w / w, d / w)) {position.top = max_t } / / that.css ({left:position.left, top:position.top}); that.stop (). Animate ({left:position.left, top:position.top}, time); / / use the jquery animation function to make it smoother mvtid = setTimeout (move, time); / / Recursive call to make the floating window move continuously} move () / / trigger action that.on ('mouseenter', function () {clearTimeout (mvtid)}); / / add mouse event that.on (' mouseleave', function () {move ()});});}; / / end plugin definition} (jQuery)
2. The API acquires the data related to the suspension box.
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 ()})})
3. Introduce the relevant html code into the html page
×
4. Css of related suspension frame
.automv {width: 200px; height: 150px; z-index: 1032; position: relative;}. Automv a {display: block; width: 100%; height: 100%;}. Automv an 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;} above is about "jQuery how to achieve home page suspension frame" this article content, I believe we all have a certain understanding, I hope the editor to share the content is helpful to you, if you want to learn more related knowledge content, please follow the industry information channel.
