jQuery return positioning plug-in example tutorial
Jan 12, 2018 am 09:32 AM本文主要介紹了jQuery返回定位插件的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧,希望能幫助到大家。
一、jQuery 提供開(kāi)發(fā)者開(kāi)發(fā)插件的幾種模式
1.$.extend();???? //這個(gè)方法是綁定在$上面的。可以通過(guò)$直接調(diào)用
2.$.fn.方法名???? //這個(gè)方法是綁定在Dom對(duì)象上面的可以通過(guò)$('').方法名();調(diào)用
3.$.widget?? //通過(guò)jQuery UI 部件工廠模式創(chuàng)建。
二、插件的開(kāi)發(fā)過(guò)程
1.$.extend();
這個(gè)方法其實(shí)很簡(jiǎn)單,只是像$上面添加了一個(gè)靜態(tài)的方法而已。主要用途是對(duì)插件api的擴(kuò)展.
eg:
//$.extend();為了防止,變量和方法之間的相互污染,我們采用閉包的模式。 ??(function($,factory){ ????var?obj?=?factory(); ????$.extend({ ??????sayHelloWorld:obj.firstApply, ????}) ????$.secondApply?=?obj.secondApply; ??})(jQuery,function(){ ????var?obj?=?{ ??????firstApply(){ ????????console.log('hello?world'); ??????}, ??????secondApply(){ ????????console.log('直接綁定到$上'); ??????}, ????}; ?????return?obj; ??}); ??$.sayHelloWorld();//hello?world ??$.secondApply();?//直接綁定到$上 ???/*從上面的2種綁定方式可以看出用$.extend();對(duì)jQuery方法進(jìn)行拓展, ???其實(shí)和直接綁定到$上是一樣的效果*/
2.$.fn.方法名。?? (方法名 其實(shí)就是插件名)。
a.插件結(jié)構(gòu)
<p id="app">app</p> //$.fn.插件名字?(logText); ??(function($,factory){ ????$.fn.logText?=?factory(); ??})(jQuery,function(){ ????var?logText?=?function(){ ??????console.log(this.text()); ??????return?this; ????} ????return?logText; ??}); $("#app").logText();?//app??通過(guò)DOM元素之間調(diào)用該方法。并返回該對(duì)象。這也是jQuery實(shí)現(xiàn)鏈?zhǔn)讲僮鞯募记伞? ??var?h?=?$("#app").logText().height();?//?app ??console.log(h);?//18 ?//這樣就可以自定義方法了。
在jQuery插件的開(kāi)發(fā)過(guò)程中,其實(shí)主要是通過(guò)第二種模式($.fn.插件名)開(kāi)發(fā)的。因?yàn)閖Query的強(qiáng)大之處就是對(duì)Dom的操作.
b.一個(gè)插件的強(qiáng)大之處就是參提供周全的參數(shù)。以及方便使用者對(duì)參數(shù)進(jìn)行擴(kuò)展。
<p id="app">app</p> ???//$.fn.插件名字?(myPuglin); ??(function(global,$,factory){ ????var?common?=?factory();?//封裝插件使用到的函數(shù)。 ????$.fn.myPuglin?=?function(opts){??//插件的名稱 ??????var?defaults?=?{};?//默認(rèn)的api ??????opts?=?$.extend(defaults,opts?||?{});?//對(duì)api的拓展 ??????/* ???????* ???????*?要執(zhí)行的功能 ???????*? ???????*/ ??????console.log(opts.hello); ??????return?this; ????} ??})(window,jQuery,function(){ ????var?common?=?{ ??????a(opt){ ????????return?opt; ??????}, ????}; ????return?common; ??}); ??$("#app").myPuglin({hello:'hello?world'});?//hello?world
準(zhǔn)備工作已經(jīng)完畢。那么下面會(huì)一個(gè)插件為列子,來(lái)講解
3.工作中經(jīng)常用到的列表到詳情。返回來(lái)需要保留該位置的插件。(返回定位) savePositon();? $.fn.savePosition
<!DOCTYPE html> <html lang="en"> <head> ??<meta charset="UTF-8"> ??<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> ??<title>Title</title> ??<style> ????@media?screen?and?(max-width:?319px)?{ ??????html?{ ????????font-size:?85.33333px;?}?} ????@media?screen?and?(min-width:?320px)?and?(max-width:?359px)?{ ??????html?{ ????????font-size:?85.33333px;?}?} ????@media?screen?and?(min-width:?360px)?and?(max-width:?374px)?{ ??????html?{ ????????font-size:?96px;?}?} ????@media?screen?and?(min-width:?375px)?and?(max-width:?383px)?{ ??????html?{ ????????font-size:?100px;?}?} ????@media?screen?and?(min-width:?384px)?and?(max-width:?399px)?{ ??????html?{ ????????font-size:?102.4px;?}?} ????@media?screen?and?(min-width:?400px)?and?(max-width:?413px)?{ ??????html?{ ????????font-size:?106.66667px;?}?} ????@media?screen?and?(min-width:?414px)?{ ??????html?{ ????????font-size:?110.4px;?}?} ????/*CSS?Reset*/ ????body, ????p, ????dl, ????dt, ????dd, ????ul, ????ol, ????li, ????h1, ????h2, ????h3, ????h4, ????h5, ????h6, ????pre, ????code, ????form, ????fieldset, ????legend, ????input, ????textarea, ????p, ????blockquote, ????th, ????td, ????header, ????hgroup, ????nav, ????section, ????article, ????aside, ????footer, ????figure, ????figcaption, ????menu, ????button?{ ??????margin:?0; ??????padding:?0;?} ????li{ ??????list-style:?none; ????} ????#app{ ??????width:?100%; ??????max-width:?640px; ?????} ????li?{ ??????height:?1.2rem; ??????width:?100%; ??????border-bottom:?1px?solid?#cccccc; ??????text-align:?center; ??????line-height:?1.2rem; ??????font-size:?20px; ????} ??</style> ??<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> ??<p id="app"> ????<ul> ??????<li data-page="1" data-url="http://baidu.com?id=1">第一頁(yè)?第1個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=2">第一頁(yè)?第2個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=3">第一頁(yè)?第3個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=4">第一頁(yè)?第4個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=5">第一頁(yè)?第5個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=6">第一頁(yè)?第6個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=7">第一頁(yè)?第7個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=8">第一頁(yè)?第8個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=9">第一頁(yè)?第9個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=10">第一頁(yè)?第10個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=11">第一頁(yè)?第11個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=12">第一頁(yè)?第12個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=13">第一頁(yè)?第13個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=14">第一頁(yè)?第14個(gè)li</li> ??????<li data-page="1" data-url="http://baidu.com?id=15">第一頁(yè)?第15個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=16">第二頁(yè)?第1個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=17">第二頁(yè)?第2個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=18">第二頁(yè)?第3個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=19">第二頁(yè)?第4個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=20">第二頁(yè)?第5個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=21">第二頁(yè)?第6個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=22">第二頁(yè)?第7個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=23">第二頁(yè)?第8個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=24">第二頁(yè)?第9個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=25">第二頁(yè)?第10個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=26">第二頁(yè)?第11個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=27">第二頁(yè)?第12個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=28">第二頁(yè)?第13個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=29">第二頁(yè)?第14個(gè)li</li> ??????<li data-page="2" data-url="http://baidu.com?id=30">第二頁(yè)?第15個(gè)li</li> ????</ul> ??</p> </body> <script type="text/javascript"> ??/* ???*?1.為什么我要返回定位呢。肯定是增加用戶的體驗(yàn)度。比如你剛看的那條信息挺感 ???*?興趣的,點(diǎn)進(jìn)詳情看完了,回來(lái)一看,不見(jiàn)了,是不是很嘔心啊。 ???*?2.難點(diǎn)在哪里? ???*??難點(diǎn)1:當(dāng)我們有很多的列表的時(shí)候,列表肯定是滾動(dòng)加載。于是我們直接保存滾動(dòng)條的位置 ???*??的方式可以放棄了。 ???*??難點(diǎn)2:我們?cè)趺创_定是從詳情返回來(lái)的? ???*?3.我們?cè)撛趺磳?shí)現(xiàn)呢? ???*??其實(shí)我們實(shí)現(xiàn)的方式跟保存滾動(dòng)條的位置差不多。但要對(duì)scrollTop的距離進(jìn)行處理。 ???*??a.我們點(diǎn)擊這點(diǎn)詳情的時(shí)候,可視區(qū)域列表的條數(shù),可以是一頁(yè)的數(shù)據(jù),可能會(huì)是2頁(yè)數(shù)據(jù)。 ???*??這種情況下我們都要把結(jié)果保留下來(lái)。 ???*??b.當(dāng)我們點(diǎn)擊這條數(shù)據(jù)的時(shí)候存現(xiàn)當(dāng)前頁(yè)滾動(dòng)了多少就可以了。 ???* ???*??下面具體看代碼: ???*/ ??(function(global,$,factory){ ????var?keepScrollTop?=?0;?//用于最后保存的滾動(dòng)條的位置 ????var?tool?=factory(); ????$.fn.savePosition?=?function(options){ ??????var?dataPage,logo,objLogo,prevNum,containerHeight?=?0,scrollTopDistance?=?0,elIndex?=?0, ???????prevHeight?=?0,prevCountPage?=?0,prevCountPageDistance?=?0,prevDistance?=?0, ???????prevPageScrollDistance?=?0; ??????var?elements?=?this; ??????var?defaults?=?{ ????????container:$(window),??//滾動(dòng)的容器 ????????logo:"data-url",???//?用于計(jì)算在這個(gè)容器中的每個(gè)LI中的唯一標(biāo)識(shí)量。一般為去詳情的連接 ????????currentPage:"data-page",??//點(diǎn)擊當(dāng)前的li的頁(yè)碼 ????????pageResize:30,????????//與后臺(tái)交互的每頁(yè)返回的數(shù)量。?默認(rèn)是30, ????????goToDetailElement:$(".go-detail")?,??//滾動(dòng)的每個(gè)列的總對(duì)象 ????????nodeLi:"",?//元素節(jié)點(diǎn) ????????getPageNum:"getPageNum",???????//1表示單頁(yè)數(shù)據(jù),2表示雙頁(yè)數(shù)據(jù)。設(shè)置是請(qǐng)求單頁(yè)數(shù)據(jù)還是雙頁(yè)數(shù)據(jù)的標(biāo)識(shí)量。放在URL上。 ????????urlPageNum:"pageNum",????????//用于放到URL上面的參數(shù)標(biāo)識(shí)表示當(dāng)前是幾頁(yè).?pageNum?=?currentPage??//返回來(lái)的時(shí)候用這個(gè)參數(shù)來(lái)判斷是不是需要滾動(dòng) ??????}; ??????var?settings?=?$.extend(defaults,options?||?{}); ??????dataPage?=?elements.attr(settings.currentPage);??//求出點(diǎn)擊對(duì)象位于哪一個(gè)頁(yè)碼 ??????logo?=?elements.attr(settings.logo);???//求出當(dāng)前對(duì)象的唯一標(biāo)識(shí)量 ??????containerHeight?=?parseInt(settings.container.outerHeight());??//容器的高度 ??????scrollTopDistance?=?parseInt(settings.container.scrollTop());?//滾動(dòng)的距離 ??????elements.parent().find(""+?settings.nodeLi?+?"["+settings.currentPage?+?"="?+?dataPage?+"]").each(function(index,?obj){ ????????objLogo?=?$(obj).attr(settings.logo); ????????elIndex?=?index; ????????if(logo?==?objLogo){ ??????????prevNum?=?elements.prevAll().length; ??????????prevHeight?=?tool.getDistance(elements.parent().children(),prevNum?-?elIndex); ??????????prevCountPage?=?parseInt(prevNum?/?settings.pageResize); ??????????if(scrollTopDistance?< prevHeight){ elements.parent().children().each(function(index,target){ if(prevCountPage >?0?){ ????????????????if(index?<?(prevCountPage?-?1)?*?settings.pageResize){ ??????????????????prevCountPageDistance?+=?parseInt($(target).outerHeight()); ????????????????}; ??????????????}; ????????????}); ????????????tool.changeUrlPar(settings.urlPageNum,dataPage?-?1);?????//當(dāng)前的頁(yè)數(shù) ????????????tool.changeUrlPar(settings.getPageNum,2);???????//獲取雙頁(yè)數(shù)據(jù) ????????????keepScrollTop?=?scrollTopDistance?-?prevCountPageDistance;??????????//請(qǐng)求雙頁(yè)數(shù)據(jù)?向上?減?1; ??????????}else{ ????????????prevDistance?=?tool.getDistance(elements.parent().children(),(prevCountPage?+?1)?*?settings.pageResize); ????????????prevPageScrollDistance?=?tool.getDistance(elements.parent().children(),prevCountPage?*?settings.pageResize); ????????????if(prevDistance?<?(scrollTopDistance?+?containerHeight)){ ??????????????tool.changeUrlPar(settings.urlPageNum,dataPage);????//點(diǎn)擊對(duì)象位于當(dāng)前的頁(yè)數(shù) ??????????????tool.changeUrlPar(settings.getPageNum,2);????????//請(qǐng)求雙頁(yè)數(shù)據(jù) ??????????????keepScrollTop?=?scrollTopDistance?-?prevPageScrollDistance; ????????????}else{ ??????????????tool.changeUrlPar(settings.urlPageNum,dataPage);????//點(diǎn)擊對(duì)象位于當(dāng)前的頁(yè)數(shù) ??????????????tool.changeUrlPar(settings.getPageNum,1);??//請(qǐng)求單頁(yè)數(shù)據(jù) ??????????????keepScrollTop?=?scrollTopDistance?-?prevPageScrollDistance; ????????????}; ??????????}; ????????}; ??????}); ??????tool.setSessionStorage("keepScrollTop",keepScrollTop);???//保存滾動(dòng)條的位置 ??????return?this; ????}; ????$.getSessionStorage?=?function(opt){ ??????opt?=?sessionStorage.getItem(opt); ??????return?opt; ????}; ??})(window,jQuery,function(){ ????var?tool?=?{ ??????changeUrlPar(arg,?val){??//改變URL參數(shù) ????????function?changeU(destiny,?par,?par_value)?{ ??????????var?pattern?=?par+'=([^&]*)'; ??????????var?replaceText?=?par+'='+par_value; ??????????if?(destiny.match(pattern)) ??????????{ ????????????var?tmp?=?'/\\'+par+'=[^&]*/'; ????????????tmp?=?destiny.replace(eval(tmp),?replaceText); ????????????return?(tmp); ??????????} ??????????else?{ ????????????if?(destiny.match('[\?]')) ????????????{ ??????????????return?destiny+'&'+?replaceText; ????????????} ????????????else ????????????{ ??????????????return?destiny+'?'+replaceText; ????????????} ??????????} ??????????return?destiny+'\n'+par+'\n'+par_value; ????????} ????????var?hash?=?window.location.hash; ????????history.replaceState(null,'',location.pathname+location.search); ????????url?=?window.location.href; ????????var?newUrl?=?changeU(url,arg,val)?+?hash; ????????history.replaceState(null,'',newUrl); ????????return?false; ??????}, ??????removeUrlPar(options){ ????????history.replaceState(null,'',location.pathname+location.search); ????????var?newParamStr?=?""; ????????var?quotes?=?window.location.href.indexOf("?"); ????????if(quotes?!=?-1){ ??????????var?webUrl?=?window.location.href.split("?")[0]; ??????????var?paramsStr?=?window.location.href.split("?")[1].toString(); ??????????if(paramsStr.indexOf("&")?!=?-1){ ????????????var?pageIndex?=?paramsStr.indexOf(options); ????????????if(pageIndex?!=?-1){ ??????????????var?pageArr?=?paramsStr.split("&"); ??????????????for(var?i?=?0;?i?<?pageArr.length;?i++){ ????????????????if(pageArr[i].match(options)){ ??????????????????pageArr.splice(i,1); ????????????????}; ??????????????}; ??????????????newParamStr?=?pageArr.join("&"); ????????????}else{ ??????????????newParamStr?=?paramsStr; ????????????}?; ??????????}else{ ????????????if(paramsStr.match(options)){ ??????????????newParamStr?=?""; ????????????}else?{ ??????????????newParamStr?=?paramsStr; ????????????}; ??????????}; ??????????history.replaceState(null,'',webUrl?+?"?"?+?newParamStr); ????????}else{ ??????????history.replaceState(null,'',w.location.href); ????????} ??????}, ??????getDistance(obj,maxNum){ ????????var?h?=?0; ????????obj.each(function(index,target){ ??????????if(index?<?maxNum){ ????????????h?+=?parseInt($(target).outerHeight()); ??????????} ????????}); ????????return?h; ??????}, ??????setSessionStorage(keyName,opt){ ????????sessionStorage.setItem(keyName,opt); ????????console.log(opt) ??????}, ????} ????return?tool; ??}) ??$("li").on("click",function(){ ????$(this).savePosition({pageResize:15}); ????/* ?????*??1.http://localhost/index.php/Home/Web?pageNum=2&getPageNum=1 ?????*?點(diǎn)擊玩了以后url就變成這樣了。這時(shí)候表示?返回來(lái)的時(shí)候請(qǐng)求第二頁(yè)的數(shù)據(jù)。只請(qǐng)求一次。從第二頁(yè)開(kāi)始 ?????* ?????*?2.http://localhost/index.php/Home/Web?pageNum=1&getPageNum=2 ?????*?這樣表示請(qǐng)求也數(shù)據(jù)。從第一頁(yè)的數(shù)據(jù)開(kāi)始 ?????* ?????*/ ????var?_herf?=?$(this).attr("data-url"); ????window.location.href?=?_herf; ??}); ??//當(dāng)我們初始化的時(shí)候 ??var?pageNum?=?1,getPageNum?=?2;?//這兩個(gè)數(shù)的值是從URL中獲取的。只有從詳情返回來(lái)?時(shí)候,才有 ??if(!!pageNum?&&?!!getPageNum){ ????//其中還有很多判定,肯定是先獲取數(shù)據(jù)在滾動(dòng)。。。 ????$(window).scrollTop($.getSessionStorage('keepScrollTop')); ??}else{ ??} </script> </html>
這個(gè)返回定位的插件基本就開(kāi)發(fā)完畢了。當(dāng)然對(duì)于實(shí)際的項(xiàng)目中,還有很多的改動(dòng)。比如返回的時(shí)候,一定要把設(shè)置的標(biāo)志參數(shù)去掉。
相關(guān)推薦:
jQuery scrollFix滾動(dòng)定位插件_javascript技巧
jQuery導(dǎo)航條固定定位效果的實(shí)現(xiàn)方法
JavaScript隨機(jī)生成一定位數(shù)的密碼的實(shí)現(xiàn)方法
The above is the detailed content of jQuery return positioning plug-in example tutorial. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.

What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ??the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:

How does Google Chrome allow animation plugins to run? Google Chrome is very powerful. Many friends like to use this browser to watch video animations. However, if you want to watch various animated videos, you need to install animation plug-ins in the browser. Many friends use Google Chrome. After installing the animation plug-in, I still cannot care about the video. How should I deal with this problem? Next, let the editor show you the specific steps to allow the animation plug-in to run in Google Chrome. Friends who are interested can come and take a look. Specific steps for Google Chrome to allow animation plug-ins to run: 1. First run Google Chrome on your computer, and click the main menu button in the upper right corner of the homepage (as shown in the picture). 2. After opening the main menu, select the "Settings" option below (as shown in the picture). 3. In settings
