一些功能记录
1、 分享到网页的接口
<div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div> <script> window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; </script>
这样的话,可以直接出效果在页面上,实现页面的分享功能。
2、 页面中的滚动效果(从下往上的字母效果)
function doRoll(ele) { var _wrap = $(ele); //定义滚动区域 var _interval = 2000; //定义滚动间隙时间 var _moving; //需要清除的动画 _wrap.hover(function() { clearInterval(_moving); //当鼠标在滚动区域中时,停止滚动 }, function() { _moving = setInterval(function() { var _field = _wrap.find('.cotem_lj:first'); //此变量不可放置于函数起始处,li:first取值是变化的 var _h = _field.height(); //取得每次滚动高度 _field.animate({ marginTop: -_h + 'px' }, 600, function() { //通过取负margin值,隐藏第一行 _field.css('marginTop', 0).appendTo(_wrap); //隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 }) }, _interval) //滚动间隔时间取决于_interval }).trigger('mouseleave'); //函数载入时,模拟执行mouseleave,即自动滚动 } //调用函数doRoll doRoll(“.item_li”);
3、 页面中从右往左滚动效果
<div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff> <table align=left cellpadding=0 cellspace=0 border=0> <tr> <td id=demo1 valign=top> <img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764741.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764742.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764743.jpg"> <img src="http://www.lanrentuku.com/down/js/images/12460764744.jpg"> </td> <td id=demo2 valign=top></td> </tr> </table> </div> <script> var speed=30 //注意两个元素处于一行同一水平线 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>
4、 获取所在城市
var city1; $.ajax({ //获取客户端 IP 和 归属地 url: "http://int.dpool.sina.com.cn/iplookup/iplookup.php? format=js", dataType: "json", success: function (data) { console.log(data) console.log('归属地:' + data.Isp) var str=data.Isp; var lcity = str.substring(0,str.indexOf("市")+1); $(".city").html(data.city); console.log(city1) });
5、 在页面中满屏幕移动
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta name="" content=""> </head> <body> <style> #demoerweima{ position: absolute; padding: 16px; border: 1px solid #e5e5e7; background-color: #fff; } #demoerweima img{ width: 102px; height: 102px; } #demoerweima p { font-size: 14px; line-height: 20px; } </style> <div id="demoerweima"> <img src="resource/images/erweima.png" style=""> <p>微信扫一扫<br>关注该公众号</p> </div> <script type="text/javascript"> window.onload=function(){ //写入 document.body.appendChild(demoerweima); //定时器 var a1a = setInterval(moves,100); //函数 var x = 10; var y = 10; function moves(){ var tops = demoerweima.offsetTop var lefts = demoerweima.offsetLeft if (lefts>=document.documentElement.clientWidth-demoerweima.offsetWidth || lefts<=0) { x=-x } if (tops>=document.documentElement.clientHeight-demoerweima.offsetHeight || tops<=0) { y=-y } tops+=y; lefts+=x; demoerweima.style.top=tops+"px" demoerweima.style.left=lefts+"px" } //悬停停止 demoerweima.onmouseover=function(){ clearInterval(a1a); } //放手继续运动 demoerweima.onmouseout=function(){ a1a =setInterval(moves,100); } } </script> </body> </html>
6、 帝国cms实现全站搜索功能
<form action="/e/search/index.php" method="post" name="searchform" id="searchform"> <input name="keyboard" type="text" id="keyboard" class="inputText" placeholder=""> <input type="hidden" name="show" value="title"> <input type="hidden" name="tempid" value="2"> <input type="hidden" name="tbname" value="news"> <input type="image" class="fangdajing inputSub" src="/resource-blue/images/search.png"> </form>
通过以上多个input实现全文搜索,其功能可以参考帝国cms的学习网站。