投稿
  1. 首页
  2. 安全

JQ中怎么做出这种效果？ 我想做的事每隔1秒自动滚动100px的自动阅读小说的功能，应该再加点什么进去？

健身网站 • 9月前 • 安全 • 阅读 19

JQ中怎么做出这种效果？ 我想做的事每隔1秒自动滚动100px的自动阅读小说的功能，应该再加点什么进去？,第1张

楼主我帮你实现了下，直接把代码复制新建一个html网页，然后点“开始阅读”按钮，看是不是你想要的，想中止，就点“停止”，另：当滚动到底部后，会自动停止。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
article{
width: 390px;
height:390px;
overflow-y:auto ;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="article">
粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜，粉红西瓜花西瓜，花西瓜粉红西瓜，粉红西瓜花西瓜。
</div>
<button onclick='begin()'>开始阅读</button>
<button onclick='stop()'>停止</button>
</body>
<script>
(function($){
    var timer;
windowbegin=function(){
timer=setInterval(function(){
var el=$("article");
var lastScrollTop=elscrollTop;
elscrollTop+=100;
if(lastScrollTop==elscrollTop){
clearInterval(timer);
}
},1000)
};
windowstop=function(){
if(timer){
clearInterval(timer);
}
}
})(function(selector){
return documentquerySelector(selector);
});
</script>
</html>

在WebBrowser中注入并执行javascript代码
更多 0
c#WebBrowserWinForm
WebBrowser控件用来显示网页内容，有时候我们需要在网页中执行一段自定义的javascript代码。
如下是实现和注释:
//找到head元素
HtmlElement head = webBrowser1DocumentGetElementsByTagName("head")[0];
//创建script标签
HtmlElement scriptEl = webBrowser1DocumentCreateElement("script");
IHTMLScriptElement element = (IHTMLScriptElement)scriptElDomElement;
//给script标签加js内容
elementtext = "function sayHello() { alert('hello') }";
//将script标签添加到head标签中
headAppendChild(scriptEl);
//执行js代码
webBrowser1DocumentInvokeScript("sayHello");

elepos("upcontent","430","255"); 你这个是调用，不是定义
function aaa()
{
}
windowonresize=aaa; //onresize不接受参数。如果你要处理，那只能将外面设置一个全局变量

<HTML>
<HEAD>
<!-- 滚动区域坐标大小定位-->
<STYLE type=text/css>
#divContainer {
CLIP: rect(0px 294px 20px 0px); HEIGHT: 20px; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 294px
}
#divContent {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
</STYLE>
<SCRIPT language=JavaScript>
// 滚动开始
function verifyCompatibleBrowser(){
thisver=navigatorappVersion
thisdom=documentgetElementById1:0
thisie5=(thisverindexOf("MSIE 5")>-1 && thisdom)1:0;
thisie4=(documentall && !thisdom)1:0;
thisns5=(thisdom && parseInt(thisver) >= 5) 1:0;
thisns4=(documentlayers && !thisdom)1:0;
thisbw=(thisie5 || thisie4 || thisns4 || thisns5)
return this
}
bw=new verifyCompatibleBrowser()

var speed=0

var loop, timer

function ConstructObject(obj,nest){
nest=(!nest) '':'document'+nest+'';
thisel=bwdomdocumentgetElementById(obj):bwie4documentall[obj]:bwns4eval(nest+'document'+obj):0;
thiscss=bwdomdocumentgetElementById(obj)style:bwie4documentall[obj]style:bwns4eval(nest+'document'+obj):0;
//内容宽度
thisscrollWidth=bwns4thiscssdocumentwidth:thiseloffsetWidth;
//显示区域宽度
thisclipWidth=bwns4thiscssclipwidth:thiseloffsetWidth;
thisleft=MoveAreaLeft;
thisright=MoveAreaRight;
thisMoveArea=MoveArea; thisx; thisy;
thisobj = obj + "Object";
eval(thisobj + "=this");
return this;
}
function MoveArea(x,y){
thisx=x;thisy=y
thiscssleft=thisx
thiscsstop=thisy
}

function MoveAreaRight(move){
//alert("thisscrollWidth="+thisscrollWidth+" objContainerclipWidth="+objContainerclipWidth+"\n"+" objContainerclipWidth-thisscrollWidth="+(objContainerclipWidth-thisscrollWidth)+"\n"+"thisx="+thisx);
documentgetElementById("previous")styledisplay = "block";
documentgetElementById("previousq")styledisplay = "block";
if(thisx>objContainerclipWidth-thisscrollWidth){
thisMoveArea(thisx-move,0)
if(loop) setTimeout(thisobj+"right("+move+")",speed)
}
else{
documentgetElementById("next")styledisplay = "none";
documentgetElementById("nextq")styledisplay = "none";
}
}
function MoveAreaLeft(move){
documentgetElementById("next")styledisplay = "block";
documentgetElementById("nextq")styledisplay = "block";
if(thisx<0){
thisMoveArea(thisx-move,0)
if(loop) setTimeout(thisobj+"left("+move+")",speed)
}
else{
documentgetElementById("previous")styledisplay = "none";
documentgetElementById("previousq")styledisplay = "none";
}
}

//滚动方法
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScrollerright(speed)
else objScrollerleft(speed)
}
}

//停止滚动方法
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//初始化
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScrollerMoveArea(0,0)
objContainercssvisibility='visible'
initialised=true;
if(objScrollerscrollWidth>objContainerclipWidth){
documentgetElementById("previous")styledisplay = "none";
documentgetElementById("next")styledisplay = "block";
documentgetElementById("previousq")styledisplay = "none";
documentgetElementById("nextq")styledisplay = "block";
}
}
// 滚动结束
</SCRIPT>
</HEAD>
<BODY onload=InitialiseScrollableArea()>
<TABLE border=0 cellPadding=0 cellSpacing=0 height=300 width=360>
<TBODY>
<TR>
<TD background=ckhfiles/a_r1_c2jpg>
<!--滚动区域开始-->
<DIV id=divContainer style="LEFT: 50px; TOP: 50px; VISIBILITY: visible">
<DIV id=divContent>
<nobr>
但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了
</nobr>
</DIV>
</DIV>
<!--滚动区域结束 -->
</TD>
</TR>

<!--滚动按钮开始 -->
<tr>
<td id=starttd>
<DIV id="previousq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-200)>
快进左
</A>
</DIV>
<br><br>
<DIV id="previous">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-3)>
向左
</A>
</DIV>
     
</td>
<td>
<DIV id="next">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(3)>
向右
</A>
</DIV>
<br><br>
<DIV id="nextq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(200)>
快进右
</A>
</DIV>
</td>
</tr>
<!--滚动按钮结束 -->
</TBODY>
</TABLE>

</BODY>
</HTML>

<html>
<head>
<title> 选择事件与改变事件 </title>
</head>
<script language="javascript">
function changeEvent(str){
form1text1value = "你选择的地点是:" + str;
}
</script>
<body>
<form name="form1" action="">
<textarea name="text1" cols="50" rows="2" onselect="javascript:alert('你想复制么');">
</textarea>
<p>
<label>请选择地点:</label>
<!--this是事件源对象的一个引用，即某个option-->
<select name="select1" onchange="changeEvent(thisvalue)">
<option value="北京">北京 </option>
<option value="上海">上海 </option>
<option value="深圳">深圳 </option>
<option value="长春">长春 </option>
</select>
</form>
</body>
</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/yw/13408915.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
健身网站 健身网站 一级用户组
0 0
上一篇 2023-07-30
下一篇 2023-07-30

发表评论

登录后才能评论

评论列表（0条）

保存