Add toolbar for Baidu Read Web--The birth of the Hundred reading Bar

In a chance, see Baidu Read this product, find a few free books, opened to look at, the overall good look, but because the company's computer screen is relatively wide, and Baidu reading set reading width is 840px fixed width, so it looks more laborious. Width does not provide adjustment also forget, even font, font color, background color and so on do not provide the function of adjustment, casually open a novel website basically will provide it. There is also exasperating is not let cross-page copy, a scrolling mouse, copied things will be canceled.

See so many unbearable problems, go to the official website feedback, found that the official website is also garbage, feedback way only one--Baidu reading paste (Your sister!) ), feedback and no one reply, so decided to change it.

First, provide the simplest and most basic features: background color, body color, font and font size settings.

Set the background color function SETBG (bgcolor) {  /** adjust the color **/  $ ("body"). CSS ("Background-color", bgcolor);  /** title **/  $ (". Center"). CSS ("Background-color", bgcolor);    /** left border and zoom bar **/  $ (". Pay-wrap"). CSS ("Background-color", bgcolor);  $ (". Pay-boundary"). CSS ("Background-color", bgcolor);    /** body **/  $ (". Reader-page"). CSS ("Background-color", bgcolor);} Set foreground color function SETBC (fontcolor) {  bccolor=fontcolor;  $ (". reader-for-win7 p"). CSS ("color", Bccolor);} Set Font function setfonts (fonts) {  font=fonts;  $ (". reader-for-win7 p"). CSS ("font-family", fonts);} Set Text size function Setfontsize (FS) {  fontsise=fs;  $ ("span. Text"). CSS ("Font-size", FS);}

Looks very simple, the implementation is still a bit difficult, because the article more chapters, but only load 2 chapters at a time, so the font, foreground color, font size These settings are only for the loaded chapters are set. If you select a section manually, these settings become invalid. So you need to add a timing Setup method:

/** Body **/setinterval (function () {    SETBC (bccolor);//Set foreground color    setfonts (font);//Set Font    setfontsize (fontsise) ;//Set Font size  },10000);

Basic functions have, the following is the scrolling function. Baidu Reading is divided into chapters loaded, loading only the last 1-2 chapters of the content. The screen scrolling is also a modification of only 2 CSS values.

  Height= " -2000px";//Set page offset  $ ("#stream-underline-block"). CSS ("top", height);  $ ("#txt-reader-block"). CSS ("top", height)

If you just roll the screen, that adds up the height value, but when you scroll the mouse, the result goes back to where it started scrolling. So you can not just modify this CSS, but also need to modify the following two:

  Reader. State.scrolltop=parseint ($ ("#txt-reader-block"). CSS ("top"));  Readerstate.scrolltop=parseint ($ ("#txt-reader-block"). CSS ("top"));

Finally, the function of the scrolling screen is packaged into a JS plugin:

var scroller={speed:5,//scrolling Speed timer:undefined,//timer scrolling:false,//whether to scroll//set speed Setspeed:function (scrollspeed) {    var change= (Scroller.speed!=parseint (scrollspeed));    Scroller.speed = parseint (scrollspeed);      if (scroller.scrolling && change) {scroller.pause ();    SetTimeout (scroller.start,50); }},//scroll screen scroll:function () {if (scroller.scrolling) {var height = (parseint ($ ("#txt-reader-block"). CSS ("Top      ")) *-1) +1;      $ ("#txt-reader-block"). CSS ("Top",-height+ ' px ');      $ ("#stream-underline-block"). CSS ("Top", $ ("#txt-reader-block"). CSS ("top")); Reader.      State.scrolltop=parseint ($ ("#txt-reader-block"). CSS ("top"));     Readerstate.scrolltop=parseint ($ ("#txt-reader-block"). CSS ("top"));    }}, Pause:function () {//Pause scroller.scrolling=false;  Clearinterval (Scroller.timer);    },//Start pausing scrolling stop:function () {scroller.scrolling=false;    Clearinterval (Scroller.timer);  if (typeof (jumptoviewpos) = = ' function ') jumptoviewpos (); },//start rollingDynamic Start:function () {if (Scroller.timer) scroller.stop ();    Scroller.scrolling=true;  Scroller.timer=setinterval (Scroller.scroll, 300/scroller.speed); },}//Toggle Scrolling Function Switchscroller () {if (scroller.scrolling) {//Is scrolling scroller.stop ();//Stop}else{Scroller.start ();//Open Start}}

this way, each time you call the Switcherscroller () method, you can start switching the scroll screen.

Read aloud function, is a bright spot function, actually also only uses the synthesis sound way to read aloud. As long as you rely on HTML5, as long as your browser support HTML5, this reading should be no problem, give a small demo bar:

  var q = new speechsynthesisutterance ();  q.lang= "Mandarin";  q.text= "Hello, I'm just testing, can I try it?";  Window.speechSynthesis.speak (q);

in the browser console, you can hear the sound of reading aloud. I also encapsulated it with a JS component:

Reader component var speeker = {speecher:window.speechSynthesis,//Reader Component Configuration Voice_opt:new speechsynthesisutterance (),//read aloud by default    Speed default_rate:1.5,//default Read language default_language: ' Cn_zh ',//default tone default_pitch:1,//default sound default_volume:1,  Set reading speed Setspeed:function (rate) {this.voice_opt.rate = rates;  },//set read aloud sound setvolume:function (volume) {this.voice_opt.volume = volume;  },//Set reading intonation setpitch:function (pitch) {this.voice_opt.pitch = pitch;  },//Set read aloud language setlanguage:function (lang) {this.voice_opt.lang = lang;    },//read aloud sayit:function (Text,language, f) {This.setlanguage (language) in the specified language;  This.say (TEXT,F);    },//read aloud say:function (text,f) {this.voice_opt.text=text; if (this.voice_opt.rate<=0) {this.setspeed (this.default_rate);//Reset Speed} if (F && typeof (f) = = ' function ')    {this.voice_opt.onend=f;  } this.speecher.speak (this.voice_opt);  },//Close reading Stop:function () {this.speecher.cancel (); },//Pause reading Pause:funCtion () {this.speecher.pause ();  },//Resume reading Resume:function () {this.speecher.resume (); }, Init:function () {//Initialize Reader this.setlanguage (this.default_language);//Set Language This.setspeed (this.default_rate); /Set speech speed This.setpitch (this.default_pitch);//Set Tone This.setvolume (this.default_volume);//Set sound}}//pause n milliseconds function sleep ( N) {for (var t = date.now ();D ate.now ()-t <= N;);} Read aloud at initial load (function () {speeker.init ();}) ();

Of course, this is just the encapsulation component, to use the component, you need to continue the encapsulation method according to the actual situation.

After writing, how to use it on the page? Actually very simple, look at the demo:

var alertstr= ' <input type= "button" value= "You dare to point I dare to play the box" onclick= "Popform ();" > '; $ (". Book-qcode"). HTML (ALERTSTR);//Bullet Box Method function Popform () {  alert ("Let you point!! ");  Alert ("Not yet?"). ");  Alert ("also point!" Then I'll play it again! ");  Alert ("I play, I play, I play pinball!") ");  Alert ("Be afraid, don't mess up Later");  Alert ("Well, go home and steal Food");}

The demo in the browser console execution, you can see a button, click on the execution of the Popform method.

All are written to JS, how to use in Baidu reading? One is the use of bookmarks, two using the browser extension (plug-in). First, learn how to add a JS to the page. The code is as follows:

/** Add toolbar **/$ ("Head"). Append (' <script src= ' Http://mfxuan.free.800m.net/js/baiduyuedu/baiyuelan_ Basic-2015-12-15.js "/>");

If you need to load the latest JS every time, you need to add parameters after JS:

/** with parameters, so that each load is loaded with the latest js**/$ ("Head"). Append (' <script src= ' Http://mfxuan.free.800m.net/js/baiduyuedu/baiyuelan _basic-2015-12-15.js?t=0. ' +math.round (New Date ()/3600) + '/> ');

Well, there's so much to share technically.

There are some such as reading the selected text, automatic reading, reading the parameters of the modification settings, step by step reading, highlighting the current paragraph, highlighting the current sentence, marking the current operation of the paragraph, the automatic loading of the next chapter, configuration Access , jump back to the reading position, each time you open a record of the current reading paragraph location, and so on not much to do with sharing.

Toolbar now also has a name----------------------reading bar is the abbreviation of the Baidu Reader toolbar, and there is another layer of implication, that is, if you can, for more novels to read the site to provide similar toolbars.

Here's a look at the bar effect, I'm using the Chrome plugin:

On this toolbar-------------the suggestion of improving, welcome to http://tieba.baidu.com/p/4178382977 this post reply ha.

Add toolbar for Baidu Read Web--The birth of the Hundred reading Bar