常用代码demo_1

最新推荐文章于 2021-04-17 11:38:06 发布

小星_day

最新推荐文章于 2021-04-17 11:38:06 发布

阅读量734

点赞数

分类专栏：代码分享文章标签： javascript 代码demo

代码分享专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1、QQ登陆以及新浪微博登陆

qq demo :

//引入JS脚本  
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101044974" charset="utf-8">   
//引入登录按钮以及回调函数：  
<span style="margin-left:10px; margin-top:60px !important; float:left;"    
                id="qq_login_btn" data-role="none"> </span>     
        <script type="text/javascript">    
                    QC.Login({    
                        btnId: "qq_login_btn",    
                        scope: "all",    
                    },    
                    function() {    
                        QC.api("get_user_info").success(function(s) {    
                            var paras = {    
                                format: "json"    
                            };    
                            QC.api("get_info", paras).success(function(w) {    
                                var data = eval(w.data);    
                                var weiboUrl = "http://t.qq.com/"   data.data.name;    
                                var lc = data.data.location;    
    
                            }).error(function(e) {    
    
}).complete(function(c) { //完成请求回调    
                              
                                var nickName = s.data.nickname;  //称谓  
                                var userQQSmallImage = s.data.figureurl_qq_1; //大小为40×40像素的QQ头像URL。    
                                userQQLargeImage = s.data.figureurl_qq_2; //大小为100×100像素的QQ头像URL。    
                                var userQQZoneImage = s.data.figureurl_1; //大小为50×50像素的QQ空间头像URL    
                            });    
                        });    
                    });    
                </script>

新浪 demo :

//引入JS  
<script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=APPKEY" type="text/javascript" charset="utf-8"></script>  
//登录按钮以及回调函数  
 <wb:login-button type="3,2" onlogin="login" onlogout="logout" style=" margin:0 auto; margin-top:50px;"> </wb:login-button>  
    <script type="text/javascript">  
                    function login(o) {  
                        //  
                        $.ajax({  
                            type: "Get",  
                            url: "https://api.weibo.com/2/users/show.json?source=2890452764&screen_name="   o.screen_name   "",  
                            dataType: "jsonp",  
                            success: function(data) {  
                                var lc = data.data.location;  
                                var nickName = o.screen_name;//称谓  
                                var userQQLargeImage = o.avatar_large;//大头像  
                                var weiboUrl = "http://weibo.com/u/"   o.idstr;//微博地址  
                            },  
                            error: function(xhr, msg, e) {  
                                  alert(msg);  
}  
                        });  
                    }  
  
                    function logout() {  
                        alert('logout');  
                    }  
                </script>

2、jQuery放大镜效果：

<style type="text/css">  
#Main {  
    width: 240px;  
    height: 350px;  
    border: 1px solid #fff;  
    background-image: url(imgS.jpg);  
    margin: 0 auto;  
    margin-top: 100px;  
}  
#child {  
    position: absolute;  
    width: 100px;  
    height: 100px;  
    border: 1px solid #fff;  
    background-image: url(imgB.jpg);  
    background-position: 0px 0px;  
    cursor: pointer;  
}  
</style>

<body>  
<div id="Main">  
    <div id="child"></div>  
</div>  
</body>

<script type="text/javascript">  
        $(document).ready(function(e) {  
            var flag = false;  
            $("#Main").hover(function() {  
                flag = true;  
            });  
            $(this).mousemove(function(e) {  
                if (flag == false) return;  
                var x = e.clientX - $("#Main").offset().left-50;  
                var y = e.clientY - $("#Main").offset().top-50;  
          
                if (x >= 0 && x <= 140) {  
                    $("#child").css("margin-left", x   "px");  
                    $("#child").css("background-positionX", -x * 2   "px");  
  
                }  
                if (y >= 0 && y <= 250) {  
                    $("#child").css("margin-top", y   "px");  
                    $("#child").css("background-positionY", -y * 2  "px");  
                }  
            }, function() {});  
        });  
    </script>

思路：两张图片，一张大的一张小的，在mouseover的时候，展示用div取加载第一个Div的放大

3、jQuery滚动条和进度条

var ScrollBar = {  
            value: 20,  
            maxValue: 100,  
            step: 1,  
            currentX: 0,  
            Initialize: function() {  
                if (this.value > this.maxValue) {  
                    alert("给定当前值大于了最大值");  
                    return;  
                }  
                this.GetValue();  
                $("#scroll_Track").css("width", this.currentX   2   "px");  
                $("#scroll_Thumb").css("margin-left", this.currentX   "px");  
                this.Value();  
                $("#scrollBarTxt").html(ScrollBar.value   "/"   ScrollBar.maxValue);  
            },  
            Value: function() {  
                var valite = false;  
                var currentValue;  
                $("#scroll_Thumb").mousedown(function() {  
                    valite = true;  
                    $(document.body).mousemove(function(event) {  
                        if (valite == false) return;  
                        var changeX = event.clientX - ScrollBar.currentX;  
                        currentValue = changeX - ScrollBar.currentX;  
                        $("#scroll_Thumb").css("margin-left", currentValue   "px");  
                        $("#scroll_Track").css("width", currentValue   2   "px");  
                        if ((currentValue   25) >= $("#scrollBar").width()) {  
                            $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25   "px");  
                            $("#scroll_Track").css("width", $("#scrollBar").width()   2   "px");  
                            ScrollBar.value = ScrollBar.maxValue;  
                        } else if (currentValue <= 0) {  
                            $("#scroll_Thumb").css("margin-left", "0px");  
                            $("#scroll_Track").css("width", "0px");  
                        } else {  
                            ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));  
                        }  
                        $("#scrollBarTxt").html(ScrollBar.value   "/"   ScrollBar.maxValue);  
                    });  
                });  
                $(document.body).mouseup(function() {  
                    ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));  
                    valite = false;  
                    if (ScrollBar.value >= ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue;  
                    if (ScrollBar.value <= 0) ScrollBar.value = 0;  
                    $("#scrollBarTxt").html(ScrollBar.value   "/"   ScrollBar.maxValue);  
                });  
            },  
            GetValue: function() {  
                this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);  
            }  
        }

滑动条使用：

//设置最大值  
        ScrollBar.maxValue=100;  
        //初始化  
        ScrollBar.Initialize();

进度条实现和使用：

var ProgressBar = {  
            maxValue: 100,  
            value: 20,  
            SetValue: function(aValue) {  
                this.value=aValue;  
                if (this.value >= this.maxValue) this.value = this.maxValue;  
                if (this.value <= 0) this.value = 0;  
                var mWidth=this.value/this.maxValue*$("#progressBar").width() "px";  
                $("#progressBar_Track").css("width",mWidth);  
                $("#progressBarTxt").html(this.value "/" this.maxValue);  
            }  
        }

//设置最大值  
            ProgressBar.maxValue=100;  
            //设置当前刻度  
            ProgressBar.SetValue(index)

小星_day

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录