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的学习网站。